:root {
  --motion-fast: 200ms;
  --motion-standard: 560ms;
  --motion-cinematic: 920ms;
  --motion-page: 560ms;
  --motion-stagger: 70ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-page: cubic-bezier(0.76, 0, 0.24, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html.motion-booting body {
    visibility: hidden;
  }
}

.motion-system-active .hero-copy,
.motion-system-active .hero-links {
  animation: none;
}

/* Media remains immediately visible; interaction states live in interactions.css. */
.motion-system-active :is(.case-card, .case-card__image, .projects-card, .collection-tile, .collection-tile img, .case-detail-gallery__figure, .case-detail-gallery__figure img, .blog-article__frame, .blog-article__frame img) {
  animation: none !important;
  animation-delay: 0s !important;
  transition-delay: 0s !important;
  opacity: 1;
  visibility: visible;
}

.motion-system-active .motion-page-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  transform: scaleY(0);
  transform-origin: bottom;
  background: var(--page-transition-color, var(--scene-initial-background, #101217));
  pointer-events: none;
  transition: transform var(--motion-page) var(--motion-ease-page);
}

.motion-system-active.is-page-leaving .motion-page-transition {
  transform: scaleY(1);
  pointer-events: auto;
}

.motion-system-active.is-page-leaving .story-shell,
.motion-system-active.is-page-leaving .work-main,
.motion-system-active.is-page-leaving .shared-site-tail {
  opacity: 0.18;
  transform: translate3d(0, -12px, 0);
  transition:
    opacity 420ms var(--motion-ease-page),
    transform 520ms var(--motion-ease-page);
}

@media (max-width: 760px) {
  :root {
    --motion-standard: 440ms;
    --motion-cinematic: 680ms;
    --motion-page: 460ms;
    --motion-stagger: 42ms;
  }

  .motion-system-active.is-page-leaving .story-shell,
  .motion-system-active.is-page-leaving .work-main,
  .motion-system-active.is-page-leaving .shared-site-tail {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-system-active .motion-page-transition {
    display: none;
  }
}
html.has-smooth-scroll {
  scroll-behavior: auto;
}