/* ── Cross-document View Transitions ── */
/* Progressive enhancement: unsupported browsers silently fall back to
   instant navigation. Chrome/Edge (126+) currently support this; Safari/
   Firefox ignore the @view-transition rule entirely, which is fine. */

@view-transition {
  navigation: auto;
}

/* Default (page-agnostic) color block — used by index.html and as a
   fallback before a page-specific identity color takes over. */
::view-transition-group(root) {
  background: var(--black, #000);
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: vt-out 0.42s var(--ease-out, ease) both;
  }
  ::view-transition-new(root) {
    animation: vt-in 0.42s var(--ease-out, ease) both;
    animation-delay: 0.14s;
  }

  @keyframes vt-out {
    to { opacity: 0; transform: scale(0.96); }
  }
  @keyframes vt-in {
    from { opacity: 0; transform: scale(1.04); }
  }

  /* Destination-page identity color shows through the brief gap between
     the outgoing page shrinking away and the incoming page fading in.
     Each page only needs to style its own "new" state — when the browser
     is *arriving* at about.html, about.html's own stylesheet (with
     body.page-about already present) governs ::view-transition-new(root). */
  .page-about::view-transition-group(root)    { background: var(--color-about); }
  .page-events::view-transition-group(root)   { background: var(--color-events); }
  .page-releases::view-transition-group(root) { background: var(--color-releases); }
}

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