/* fx.css · page transitions for mmafightcard.io (loaded in <head> on every page)
   Cross-document view transitions: Chrome/Edge 126+, Safari 18.2+. Other browsers load pages normally. */

@view-transition { navigation: auto; }

/* The nav bar stays put while the page underneath changes */
#tb-root { view-transition-name: topbar; }

/* Event page headers morph from the card you clicked (fx.js names the card on click) */
.header { view-transition-name: event-head; }

/* Whole-page swap: old page drops back and fades, new page rises in */
::view-transition-old(root) { animation: fx-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: fx-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both; }
::view-transition-group(event-head) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
::view-transition-old(event-head), ::view-transition-new(event-head) { height: 100%; object-fit: cover; overflow: clip; }

@keyframes fx-out { to { opacity: 0; transform: scale(0.985); filter: blur(2px); } }
@keyframes fx-in  { from { opacity: 0; transform: translateY(18px); } }

/* Walkout intro: titles stay hidden until fx.js has split them (html.fx-pre is removed by fx.js or a safety timer) */
.fx-pre .event-title, .fx-pre .hero-title { visibility: hidden; }
.fx-char { display: inline-block; will-change: transform, opacity, filter; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .fx-pre .event-title, .fx-pre .hero-title { visibility: visible; }
}