/* Content is visible by default. JavaScript opts in only when motion is
   allowed and IntersectionObserver is available. Use individual transforms
   so existing hover transforms and the hero's 3D ring remain independent. */
.motion-ready [data-motion] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity .58s cubic-bezier(.22, 1, .36, 1),
    translate .82s cubic-bezier(.22, 1, .36, 1),
    scale .82s cubic-bezier(.22, 1, .36, 1),
    background-color .45s var(--ease),
    transform .45s var(--ease);
  transition-delay: var(--motion-delay, 0ms), var(--motion-delay, 0ms), var(--motion-delay, 0ms), 0ms, 0ms;
}
.motion-ready [data-motion="below"],
.motion-ready [data-motion="above"] {
  opacity: 0;
  scale: .988;
  pointer-events: none;
  transition-delay: 0ms;
  transition-duration: .4s, .6s, .6s, .45s, .45s;
}
.motion-ready [data-motion="below"] { translate: 0 24px; }
.motion-ready [data-motion="above"] { translate: 0 -20px; }
.motion-ready [data-motion]:focus-within {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  pointer-events: auto;
  transition: none;
}

/* The outside hero layers can drift without overriding the rotating cards,
   the portrait's entrance, or the magnetic button's local transform. */
.motion-ready .hero { opacity: calc(1 - var(--hero-exit, 0) * .8); }
.motion-ready .hero .figure { translate: 0 calc(var(--hero-exit, 0) * 42px); }
.motion-ready .hero .hero-ui { translate: 0 calc(var(--hero-exit, 0) * -18px); }
.motion-ready .hero:focus-within { opacity: 1; }

@keyframes nav-arrive {
  from { opacity: 0; translate: 0 -10px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav { animation: nav-arrive .8s cubic-bezier(.22, 1, .36, 1) .12s both; }
  .btn, .copy {
    transition: transform .45s var(--ease), background-color .4s var(--ease), box-shadow .45s var(--ease);
  }
  .btn:hover, .btn:focus-visible { box-shadow: 0 6px 28px rgba(255, 61, 154, .2); }
  .copy:hover { box-shadow: 0 4px 20px rgba(243, 244, 250, .15); }
  .menu { transition: opacity .4s var(--ease), visibility 0s linear .4s; }
  .menu.open { transition: opacity .45s var(--ease), visibility 0s; }
  .menu a { transition: opacity .4s var(--ease), transform .55s var(--ease); transition-delay: 0ms; }
  .menu.open a { transition-delay: calc(var(--i) * 55ms + 60ms); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-ready [data-motion],
  .motion-ready [data-motion="below"],
  .motion-ready [data-motion="above"] {
    opacity: 1; translate: none; scale: none; pointer-events: auto; transition: none;
  }
  .motion-ready .hero { opacity: 1; }
  .motion-ready .hero .figure, .motion-ready .hero .hero-ui { translate: none; }
  .nav, .menu, .menu a, .btn, .copy, .work, .cover, .arrow, .service h3, .tile, .tags span {
    animation: none; transition: none;
  }
}