/* NWDC — motion layer
   -----------------------------------------------------------------------------
   Two modern capabilities, both PURELY additive: a browser without them renders
   the site exactly as it does today, which is why neither is behind a script.

   1. CROSS-DOCUMENT VIEW TRANSITIONS. A twelve-page static site normally blanks
      to white between pages. With this the old page fades to the new one and the
      header holds its place, so it reads like an app rather than a document set.
      Two lines, no JavaScript, no router, no framework.

   2. SCROLL-DRIVEN REVEALS. `animation-timeline: view()` ties an animation to an
      element's position in the viewport, driven by the compositor rather than by
      scroll listeners — so it cannot jank the main thread the way an
      IntersectionObserver reveal does. Guarded by @supports; unsupported
      browsers simply see the content, already visible.

   Reduced motion switches both off. Neither is decoration worth a headache. */

@view-transition { navigation: auto; }

::view-transition-old(root)  { animation: nw-vt-out .22s ease both; }
::view-transition-new(root)  { animation: nw-vt-in  .32s cubic-bezier(.22,.75,.30,1) both; }
@keyframes nw-vt-out { to   { opacity:0; transform: translateY(-6px) } }
@keyframes nw-vt-in  { from { opacity:0; transform: translateY(10px) } }

/* The masthead is the same object on every page, so tell the browser that and
   it stops re-animating it on each navigation. */
header.site { view-transition-name: nw-header; }
footer.site { view-transition-name: nw-footer; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .card, .step, .svc-card, .mega-feature, .work-item, article.post {
      animation: nw-rise linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 34%;
    }
    @keyframes nw-rise {
      from { opacity:0; transform: translateY(18px) scale(.985) }
      to   { opacity:1; transform: none }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}