/* The shared engine stylesheet (ADR-003 and amendment). Every site links this
   once, before its own tokens. Cross-document view transitions, the named site
   chrome, and reduced motion stopping the world. No JavaScript router, ever. */

/* 1. Opt in: ordinary navigations cross-fade instead of flashing. Both the page
      you leave and the page you arrive on carry this rule. */
@view-transition {
  navigation: auto;
}

/* 2. The whole-page cross-fade, kept short (browser default is 250ms). */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
}

/* 3. The site chrome is named, so the browser treats header and footer as
      persistent pieces rather than part of the fading page. */
.site-header {
  view-transition-name: site-header;
}
.site-footer {
  view-transition-name: site-footer;
}

/* 4. THE PIN (docs/LEARNINGS.md): a named piece holds still only when its old
      image, its new image AND its group are all animation: none. The group owns
      geometry; leaving it running slides any rectangle difference into place. */
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-group(site-header),
::view-transition-old(site-footer),
::view-transition-new(site-footer),
::view-transition-group(site-footer) {
  animation: none;
}

/* 5. A scrollbar appearing must never change the page's width (the gate measured
      this as a 15px header resize on the lab). */
html {
  scrollbar-gutter: stable;
}

/* 6. REDUCED MOTION STOPS THE WORLD (engine README section 4, ruled).
      No page transition; no CSS animation or transition anywhere; no smooth
      scrolling. Canvas loops are stopped by shared/engine/lifecycle.js, which
      reads the same media query and never starts them. */
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}