/* Bunker 404 — Cross-document View Transitions
 * Gives index / /map / /stats a fake-SPA feel using the native browser API.
 * Chrome 126+, Safari 18+, Edge 126+. Older browsers fall back to hard nav.
 */

@view-transition {
  navigation: auto;
}

/* Root cross-fade (the whole page) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: vt-root-out;
}

::view-transition-new(root) {
  animation-name: vt-root-in;
}

@keyframes vt-root-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes vt-root-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Continuity for the brand + nav bar — stays put across pages */
.vt-brand { view-transition-name: brand; }
.vt-nav   { view-transition-name: primary-nav; }

/* Slower/softer animation for the header so it feels persistent */
::view-transition-old(brand),
::view-transition-new(brand),
::view-transition-old(primary-nav),
::view-transition-new(primary-nav) {
  animation-duration: 200ms;
  animation-timing-function: ease-out;
}

/* Respect reduced motion — instant swap */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(brand),
  ::view-transition-new(brand),
  ::view-transition-old(primary-nav),
  ::view-transition-new(primary-nav) {
    animation-duration: 1ms;
  }
}