/* Movement only: scrolling never changes content opacity, visibility or
   clickability. Entrance runs once and leaves no persistent transform. */
@keyframes content-arrive {
  from { translate: 0 12px; }
  to { translate: 0 0; }
}
@keyframes nav-arrive {
  from { translate: 0 -8px; }
  to { translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .content-arrive {
    animation: content-arrive .7s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms) backwards;
  }
  .content-arrive:focus-within { animation: none; }
  .nav { animation: nav-arrive .7s cubic-bezier(.22, 1, .36, 1) 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; }
  .content-arrive, .nav, .menu, .menu a, .btn, .copy, .work, .cover, .arrow, .service h3, .tile, .tags span {
    animation: none; transition: none;
  }
}