@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-group(root) { animation-duration: 320ms; }
  ::view-transition-old(root) { animation: 200ms ease-out both nt-fade-out; }
  ::view-transition-new(root) { animation: 320ms var(--ease) both nt-fade-in; }

  .home-intro .hero-word,
  .page-title h1,
  .project-heading h1 {
    animation: nt-title-in 780ms var(--ease) 50ms backwards;
  }
  .home-intro .hero-blue { animation-delay: 145ms; }

  .page-title > :is(.eyebrow, .breadcrumbs),
  .project-header .breadcrumbs,
  .project-heading .eyebrow {
    animation: nt-rise-in 480ms var(--ease) backwards;
  }

  .home-intro > p,
  .page-title .lead,
  .project-intro {
    animation: nt-rise-in 640ms var(--ease) 150ms backwards;
  }
  .home-intro .subtle-link,
  .page-title > :is(.button, .text-link) {
    animation: nt-rise-in 620ms var(--ease) 225ms backwards;
  }

  .motion-entered:not(:focus-within):not(.project-card, .media-item) {
    animation: nt-rise-in 650ms var(--ease) var(--motion-delay, 0ms) backwards;
  }
  .project-card.motion-entered:not(:focus-within) .project-image,
  .media-item.motion-entered:not(:focus-within) > :is(.gallery-trigger, .video-frame) {
    animation: nt-media-in 760ms var(--ease) var(--motion-delay, 0ms) backwards;
  }
  .project-card.motion-entered:not(:focus-within) .project-caption,
  .media-item.motion-entered:not(:focus-within) > figcaption {
    animation: nt-rise-in 620ms var(--ease) calc(var(--motion-delay, 0ms) + 105ms) backwards;
  }

  .page-enter-active { transition: opacity 290ms var(--ease); }
  .page-leave-active { transition: opacity 140ms ease-out; }

  .menu-open .mobile-menu { animation: nt-fade-in 280ms ease-out backwards; }
  .menu-open .menu-links > a {
    animation: nt-rise-in 480ms var(--ease) calc(var(--menu-order, 0) * 42ms) backwards;
  }
  .menu-links > a:nth-child(2) { --menu-order: 1; }
  .menu-links > a:nth-child(3) { --menu-order: 2; }
  .menu-links > a:nth-child(4) { --menu-order: 3; }
  .menu-links > a:nth-child(5) { --menu-order: 4; }
  .menu-links > a:nth-child(6) { --menu-order: 5; }
  .menu-open .mobile-email { animation: nt-rise-in 500ms var(--ease) 225ms backwards; }
  .menu-open .menu-links > a:focus-visible { animation: none; }

  .lightbox[open] { animation: nt-fade-in 260ms ease-out; }
  .lightbox[open]::backdrop { animation: nt-fade-in 280ms ease-out; }
  .lightbox[open] > img { animation: nt-lightbox-in 440ms var(--ease); }

  .project-image > img { transition-duration: 850ms; }
  .project-caption h2,
  .project-caption h3 { transition: color 250ms ease; }
  .project-card:focus-visible .project-caption :is(h2, h3) { color: var(--accent); }
  .project-open { transition: opacity 240ms ease, transform 440ms var(--ease); }
  .project-next > span { transition: transform 320ms var(--ease); }

  @media (hover: hover) and (pointer: fine) {
    .project-card:hover .project-image > img { transform: scale(1.055); }
    .project-card:hover .project-caption :is(h2, h3) { color: var(--accent); }
    .gallery-trigger { overflow: hidden; }
    .gallery-trigger > img { transition: transform 800ms var(--ease); }
    .gallery-trigger:hover > img { transform: scale(1.035); }
    .project-next:hover > span { transform: translate(4px, -4px); }
  }
}

@keyframes nt-title-in {
  from { opacity: .35; transform: translateY(.28em); clip-path: inset(-8px -8px 100%); }
  to { opacity: 1; transform: none; clip-path: inset(-8px -8px -12px); }
}
@keyframes nt-rise-in {
  from { opacity: .35; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes nt-media-in {
  from { opacity: .5; clip-path: inset(0 0 24%); }
  to { opacity: 1; clip-path: inset(0); }
}
@keyframes nt-lightbox-in {
  from { opacity: .55; transform: scale(.975); }
  to { opacity: 1; transform: none; }
}
@keyframes nt-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nt-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .page-enter-from, .page-leave-to,
  .menu-enter-from, .menu-leave-to { opacity: 1; transform: none; }
  .project-card:hover .project-image > img { transform: none; }
}