/* ==========================================================================
   ENTER — every page opens with its own signature move.

   nav.js stamps <body data-page="..."> and a short-lived .pg-fresh class.
   The mast choreography keys off data-page alone (the mast is static shell,
   it animates exactly once at load). Everything that mounts ASYNC keys off
   .pg-fresh too, because those containers re-render — a week hop, an odds
   click, a live-score poll — and an entrance that replays on every render
   stops being an entrance. When .pg-fresh drops (~1.8s), later renders paint
   plainly.

   Transform / opacity / filter / clip-path only — nothing here reflows.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

/* ---- the shared mast baseline: art settles, words rise ------------------ */
body[data-page] .pm-bg{ animation:en-settle 1.8s var(--ease,ease) both }
body[data-page] .pm-k{ animation:en-rise .5s .08s var(--ease,ease) both }
body[data-page] .pm-t{ animation:en-rise .6s .16s var(--ease,ease) both }
body[data-page] .pm-s{ animation:en-rise .6s .3s var(--ease,ease) both }

@keyframes en-settle{ from{ transform:scale(1.06) } to{ transform:scale(1) } }
@keyframes en-rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

/* ---- the shared stagger clock for async content ------------------------- */
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > *{
  animation-delay:.46s;
}
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(1){ animation-delay:.04s }
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(2){ animation-delay:.11s }
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(3){ animation-delay:.18s }
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(4){ animation-delay:.25s }
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(5){ animation-delay:.32s }
body.pg-fresh :is(.mus,#powerList,#odBoard,#nflBoard,.prof-grid,.hist-champs,.hb-games,.wire-rail) > :nth-child(6){ animation-delay:.39s }

/* ---- MATCHUPS · the tale of the tape ------------------------------------
   The title and the tagline enter from opposite corners like two fighters;
   each card's sides slide in from their own corner and the VS badge lands
   last with a spring. */
body[data-page="matchups"] .pm-t{ animation-name:en-from-left }
body[data-page="matchups"] .pm-s{ animation-name:en-from-right }
body.pg-fresh[data-page="matchups"] .mus > *{ animation:en-rise .55s var(--ease,ease) both }
/* the away side slides from the left; anything past the VS badge is the
   home side and comes from the right (a .tag div precedes the sides, so
   :first-of-type would never match here) */
body.pg-fresh[data-page="matchups"] .mu .side{ animation:en-from-left .5s .34s var(--ease,ease) both }
body.pg-fresh[data-page="matchups"] .mu .vs ~ .side{ animation-name:en-from-right }
body.pg-fresh[data-page="matchups"] .mu .vs i{
  animation:en-pop .5s .62s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes en-from-left{ from{ opacity:0; transform:translateX(-30px) } to{ opacity:1; transform:none } }
@keyframes en-from-right{ from{ opacity:0; transform:translateX(30px) } to{ opacity:1; transform:none } }
@keyframes en-pop{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:scale(1) } }

/* ---- STANDINGS · the board fills in -------------------------------------
   Rows climb up from the bottom of the table and every power bar sweeps
   from zero, the way a season builds. */
body[data-page="standings"] .pm-t{ animation-name:en-climb }
body.pg-fresh[data-page="standings"] #powerList > *{ animation:en-climb .55s var(--ease,ease) both }
body.pg-fresh[data-page="standings"] .pr-row .bar i,
body.pg-fresh[data-page="standings"] .pr-row .pr-bar i{
  animation:en-sweep .8s .5s var(--ease,ease) both; transform-origin:left center;
}
body.pg-fresh[data-page="standings"] .rc-pre{ animation:en-climb .6s var(--ease,ease) both }
body.pg-fresh[data-page="standings"] .rc-pre:nth-child(2){ animation-delay:.12s }
body.pg-fresh[data-page="standings"] .rc-pre:nth-child(3){ animation-delay:.24s }

@keyframes en-climb{ from{ opacity:0; transform:translateY(22px) } to{ opacity:1; transform:none } }
@keyframes en-sweep{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* ---- ODDS · the split-flap board ----------------------------------------
   Cards flip down into place like a departures board turning over, and the
   no-vig bar sweeps once the card lands. */
body[data-page="odds"] .pm-t{ animation-name:en-flip; transform-origin:center top }
body.pg-fresh[data-page="odds"] #odBoard > *{
  animation:en-flip .55s var(--ease,ease) both; transform-origin:center top;
}
body.pg-fresh[data-page="odds"] .gm .gm-bar i{
  animation:en-sweep .7s .8s var(--ease,ease) both; transform-origin:left center;
}

@keyframes en-flip{
  from{ opacity:0; transform:perspective(720px) rotateX(-72deg) }
  to{ opacity:1; transform:perspective(720px) rotateX(0) }
}

/* ---- WATCH · going on air -----------------------------------------------
   The mast powers on like a broadcast feed — a fast bright flash that
   settles — and each game card pops on with the same TV blink. */
body[data-page="watch"] .pm{ animation:en-onair .9s ease-out both }
body.pg-fresh[data-page="watch"] #nflBoard > *{ animation:en-blink .5s ease-out both }

@keyframes en-onair{
  0%{ filter:brightness(0) saturate(0) }
  35%{ filter:brightness(1.45) saturate(.4) }
  100%{ filter:brightness(1) saturate(1) }
}
@keyframes en-blink{
  0%{ opacity:0; transform:scale(.97); filter:brightness(2) }
  60%{ opacity:1; filter:brightness(1.25) }
  100%{ opacity:1; transform:scale(1); filter:brightness(1) }
}

/* ---- WIRE · hot off the wire --------------------------------------------
   The headline wipes on like it is printing, and stories punch in from the
   right the way a ticker delivers them. */
body[data-page="wire"] .pm-t{ animation-name:en-print }
body.pg-fresh[data-page="wire"] :is(.wire-lead,.wire-item,.wire-p){
  animation:en-from-right .45s var(--ease,ease) both;
}
body.pg-fresh[data-page="wire"] :is(.wire-lead,.wire-item,.wire-p):nth-child(2){ animation-delay:.08s }
body.pg-fresh[data-page="wire"] :is(.wire-lead,.wire-item,.wire-p):nth-child(3){ animation-delay:.16s }
body.pg-fresh[data-page="wire"] :is(.wire-lead,.wire-item,.wire-p):nth-child(4){ animation-delay:.24s }
body.pg-fresh[data-page="wire"] :is(.wire-lead,.wire-item,.wire-p):nth-child(n+5){ animation-delay:.32s }

@keyframes en-print{
  from{ opacity:1; clip-path:inset(0 100% 0 0) }
  to{ opacity:1; clip-path:inset(0 0 0 0) }
}

/* ---- DASHBOARD · the deal -----------------------------------------------
   The mast settles like every other room's, then slate tiles are dealt
   across the table, cards rising as they land. */
body[data-page="hub"] .hb-mastbg{ animation:en-settle 1.8s var(--ease,ease) both }
body[data-page="hub"] .hb-mastk{ animation:en-rise .5s .08s var(--ease,ease) both }
body[data-page="hub"] .hb-masttitle{ animation:en-rise .6s .16s var(--ease,ease) both }
body[data-page="hub"] .hb-mastsub{ animation:en-rise .6s .3s var(--ease,ease) both }
body.pg-fresh[data-page="hub"] .hb-games > *{ animation:en-deal .5s var(--ease,ease) both }
body.pg-fresh[data-page="hub"] .hb-card{ animation:en-rise .6s .2s var(--ease,ease) both }

@keyframes en-deal{
  from{ opacity:0; transform:translateY(12px) scale(.94) }
  to{ opacity:1; transform:none }
}

/* ---- FILM ROOM · the projector warms up --------------------------------- */
body[data-page="film"] .fm-hero{ animation:en-projector 1.1s steps(1,end) both }

@keyframes en-projector{
  0%{ opacity:0 } 9%{ opacity:.55 } 15%{ opacity:.15 } 26%{ opacity:.8 }
  34%{ opacity:.45 } 48%{ opacity:.92 } 60%{ opacity:.7 } 72%{ opacity:1 }
  100%{ opacity:1 }
}

/* ---- RECORD BOOK · the banners drop -------------------------------------
   Champions unfurl from the rafters, one after the next. */
body[data-page="history"] .pm-t{ animation-name:en-drop }
body.pg-fresh[data-page="history"] .hist-champs > *{
  animation:en-unfurl .65s cubic-bezier(.22,1.3,.36,1) both; transform-origin:center top;
}

@keyframes en-drop{ from{ opacity:0; transform:translateY(-20px) } to{ opacity:1; transform:none } }
@keyframes en-unfurl{
  from{ opacity:0; transform:perspective(900px) rotateX(-50deg) }
  to{ opacity:1; transform:perspective(900px) rotateX(0) }
}

/* ---- MANAGERS · the dossiers hit the desk -------------------------------
   Files land with a little alternating skew, like they were tossed down. */
body.pg-fresh[data-page="profiles"] .prof-grid > *{ animation:en-file .55s var(--ease,ease) both }
body.pg-fresh[data-page="profiles"] .prof-grid > :nth-child(even){ animation-name:en-file-r }

@keyframes en-file{
  from{ opacity:0; transform:translateY(16px) rotate(-1.4deg) }
  to{ opacity:1; transform:none }
}
@keyframes en-file-r{
  from{ opacity:0; transform:translateY(16px) rotate(1.4deg) }
  to{ opacity:1; transform:none }
}

/* ---- DATA SHEET · the printout ------------------------------------------
   (each shell names its own main — #sheetMain here, not #main) */
body[data-page="sheet"] .pm-t{ animation-name:en-print }
body.pg-fresh[data-page="sheet"] #sheetMain section .wrap > *{ animation:en-rise .55s .1s var(--ease,ease) both }

/* ---- NFL PLAYERS · the big board cascades ------------------------------- */
body.pg-fresh[data-page="players"] #playersMain section .wrap > *{ animation:en-climb .55s .12s var(--ease,ease) both }

/* ---- THE LAB · one scan pass over the mast ------------------------------ */
body[data-page="sim"] .pm::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, transparent 0%, rgba(140,255,200,.16) 45%, rgba(140,255,200,.28) 50%, rgba(140,255,200,.16) 55%, transparent 100%);
  background-size:100% 40%; background-repeat:no-repeat;
  animation:en-scan 1.2s .25s ease-in-out both;
}

@keyframes en-scan{
  from{ background-position:0 -60% ; opacity:1 }
  85%{ opacity:1 }
  to{ background-position:0 160%; opacity:0 }
}

/* ---- DRAFT ROOM · the card is in ---------------------------------------- */
body[data-page="draft"] .pm-t{ animation-name:en-stamp; animation-duration:.45s }

@keyframes en-stamp{
  from{ opacity:0; transform:scale(1.45); filter:blur(3px) }
  70%{ opacity:1; transform:scale(.985); filter:blur(0) }
  to{ opacity:1; transform:scale(1) }
}

/* ---- HOME · the crest catches the light, the floor fills in ------------- */
body[data-page="home"] .hm-heroid > *{ animation:en-rise .6s var(--ease,ease) both }
body[data-page="home"] .hm-heroid > :nth-child(2){ animation-delay:.12s }
body[data-page="home"] .hm-heroid > :nth-child(3){ animation-delay:.24s }
body[data-page="home"] .hm-crest{ animation:en-glint 1.5s .3s ease-out both }
body[data-page="home"] .hm-feed{ animation:en-rise .6s .35s var(--ease,ease) both }
body[data-page="home"] .hm-topboard{ animation:en-rise .6s .45s var(--ease,ease) both }
body[data-page="home"] .hm-champs{ animation:en-rise .6s .55s var(--ease,ease) both }

/* ---- WATCH PARTY · the lobby lights up ---------------------------------- */
body[data-page="party"] .pbar{ animation:en-drop .5s var(--ease,ease) both }
body[data-page="party"] .lobby .lcard{ animation:en-pop .5s cubic-bezier(.34,1.45,.64,1) both }
body[data-page="party"] .lobby .lcard:nth-child(2){ animation-delay:.1s }
body[data-page="party"] .lobby .lcard:nth-child(3){ animation-delay:.2s }

@keyframes en-glint{
  from{ opacity:0; transform:scale(.94); filter:brightness(.7) }
  55%{ opacity:1; filter:brightness(1.3) drop-shadow(0 0 26px rgba(255,210,30,.5)) }
  to{ opacity:1; transform:scale(1); filter:brightness(1) }
}

/* ---- JAMES ONLY · the model boots ---------------------------------------
   One gold scan pass over the mast, then the best-pick desk, roster, and
   scorecard land in sequence. */
body[data-page="james"] .pm::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(180deg, transparent 0%, rgba(255,210,30,.14) 45%, rgba(255,210,30,.26) 50%, rgba(255,210,30,.14) 55%, transparent 100%);
  background-size:100% 40%; background-repeat:no-repeat;
  animation:en-scan 1.2s .25s ease-in-out both;
}
body.pg-fresh[data-page="james"] #jmBest{ animation:en-pop .55s .2s cubic-bezier(.34,1.4,.64,1) both }
body.pg-fresh[data-page="james"] #jmRoster{ animation:en-rise .55s .4s var(--ease,ease) both }
body.pg-fresh[data-page="james"] #jmCard{ animation:en-rise .6s .55s var(--ease,ease) both }

} /* prefers-reduced-motion: no-preference */