/* On desktop, align the first info block with gallery top and use the measured Header. */
@media (min-width: 1200px) {
  .project-detail--miuu .detail-info {
    padding-top: 0;
    top: var(--miuu-sticky-top, calc(var(--nav-top) + var(--font-header) * 1.1875 + 30px));
  }
}

/* The page level entrance owns the other sections; Miuu's info uses this sequence. */
.motion-page-enter .project-detail--miuu .detail-info > * { animation: none; }

html.miuu-info-motion-armed .project-detail--miuu .detail-info__block,
html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div {
  position: relative;
  border-bottom-color: transparent;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 450ms cubic-bezier(0.215, 0.61, 0.355, 1),
    transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: var(--miuu-reveal-delay, 0ms);
}

html.miuu-info-motion-armed .project-detail--miuu .detail-info__block::after,
html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--project-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 500ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition-delay: calc(var(--miuu-reveal-delay, 0ms) + 80ms);
}

html.miuu-info-motion-armed .project-detail--miuu .detail-info__block.miuu-info-revealed,
html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div.miuu-info-revealed {
  opacity: 1;
  transform: none;
}

html.miuu-info-motion-armed .project-detail--miuu .detail-info__block.miuu-info-revealed::after,
html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div.miuu-info-revealed::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  html.miuu-info-motion-armed .project-detail--miuu .detail-info__block,
  html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div {
    opacity: 1;
    transform: none;
    transition: none;
    border-bottom-color: var(--project-accent);
  }
  html.miuu-info-motion-armed .project-detail--miuu .detail-info__block::after,
  html.miuu-info-motion-armed .project-detail--miuu .detail-facts > div::after { display: none; }
}