/* ══════════════════════════════════════════════════════════════════════════════════════════════
   pn-scroll-reveal — every hub view + the Financials room animates on SCROLL, not on page build.
   CEO 2026-09-27: "all this content needs to animate when user scrolls down not on page build" /
   "its ALL TOO STATIC - all content on all pages should animate as I scroll".

   Pairs with assets/js/pn-scroll-reveal.js. That script tags any panel PNMotion doesn't already
   own with `.pn-sr` (and each Team-page card with `.pn-sr-card`), then adds `.is-inview` once
   scrolled into the real scroller (`.screen > .content`, or the Financials room's `.s1-wrap`).

   ⛔ SAFE-BY-DEFAULT: `.pn-sr`/`.pn-sr-card` alone (no `html.pn-reveal-on`, i.e. no JS / no
   IntersectionObserver) never hides anything — every pre-hidden rule below is scoped to
   `html.pn-reveal-on`, which only the script sets, and only when it can also guarantee a scroll
   trigger will fire. If JS fails, every panel/card is visible exactly as it is today.

   Loaded LAST of the standard sheet stack so plain source order wins the cascade; the
   `html:not(#pn-ds-never) body …` shape + !important match pn-ds.css's own specificity so this
   cannot be quietly outranked by it (see pn-legibility-20260927.css header for the same trap).
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* the seven scopes this sheet covers: six hub views (v-perf keeps its own chart-draw rules
   below too) plus the Financials room's own scroller. One shared `:is()` list, everywhere. */
:is(
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-floor"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-nbo"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-clients"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-group"],
  html.pn-reveal-on:not(#pn-ds-never) body #__cfoView
) .pn-sr:not(.is-inview){
  opacity: .18 !important;
  transform: translate3d(0,14px,0) !important;
}
:is(
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-floor"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-nbo"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-clients"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-group"],
  html.pn-reveal-on:not(#pn-ds-never) body #__cfoView
) .pn-sr{
  transition: opacity .5s cubic-bezier(.19,1,.22,1), transform .5s cubic-bezier(.19,1,.22,1);
  will-change: opacity, transform;
}
:is(
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-floor"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-nbo"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-clients"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"],
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-group"],
  html.pn-reveal-on:not(#pn-ds-never) body #__cfoView
) .pn-sr.is-inview{
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
}

/* ── THE TEAM (v-hires) — each roster/market/poach card reveals on its own, not as one block ── */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:not(.is-inview){
  opacity: .18 !important;
  transform: translate3d(0,16px,0) !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card{
  transition: opacity .48s cubic-bezier(.19,1,.22,1), transform .48s cubic-bezier(.19,1,.22,1);
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card.is-inview{
  opacity: 1 !important;
  transform: translate3d(0,0,0) !important;
}
/* a light stagger across a row of cards so the grid cascades rather than blinking on together —
   restrained: ≤60ms steps, capped at 6 cards deep before it flattens back to no extra delay */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(1){ transition-delay: 0ms; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(2){ transition-delay: 40ms; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(3){ transition-delay: 80ms; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(4){ transition-delay: 120ms; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(5){ transition-delay: 160ms; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:nth-child(6){ transition-delay: 200ms; }

/* the seven trait bars (TALENT/AMBITION/ATTITUDE/RELIABILITY/CHEMISTRY/RESILIENCE/VISION) and the
   MRL/STM/TNS meters grow from 0 to their real (already-set, inline `width:%`) value once the
   card is in view — a real stagger within the card, ≤60ms steps, house cadence. The numbers next
   to them count up in JS (pn-scroll-reveal.js countUpCard), ending on the exact rendered value. */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:not(.is-inview) .tt-bar i,
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .pn-sr-card:not(.is-inview) .sqd-mf{
  transform: scaleX(0) !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-bar i,
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .sqd-mf{
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(1) .tt-bar i{ transition-delay: .04s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(2) .tt-bar i{ transition-delay: .10s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(3) .tt-bar i{ transition-delay: .16s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(4) .tt-bar i{ transition-delay: .22s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(5) .tt-bar i{ transition-delay: .28s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(6) .tt-bar i{ transition-delay: .34s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .tt-row:nth-of-type(7) .tt-bar i{ transition-delay: .40s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .sqd-m:nth-of-type(1) .sqd-mf{ transition-delay: .30s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .sqd-m:nth-of-type(2) .sqd-mf{ transition-delay: .36s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-hires"] .sqd-m:nth-of-type(3) .sqd-mf{ transition-delay: .42s; }

/* ── CHART DRAW / GROW (The Floor) — squad-capability radar + revenue-mix donut ──
   The whole SVG grows in from a slight scale-down alongside the panel's own fade/rise; both
   sit on the SAME `.is-inview` flip so there is one motion event per panel, not two. */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-radarwrap svg,
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-donutwrap svg{
  transform: scale(.86) !important;
  transform-origin: center !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-radarwrap svg,
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-donutwrap svg{
  transition: transform .55s cubic-bezier(.19,1,.22,1) .06s;
}

/* the donut's ring segments literally DRAW on — held at a near-zero arc pre-inview, then
   released to their real inline stroke-dasharray/stroke-dashoffset (set per-render by
   perfInsightHTML off the live save) once the panel is in view. Removing the override lets the
   transition declared below interpolate from the held state to the real value. */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-donutwrap svg circle{
  stroke-dasharray: 0 999 !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-donutwrap svg circle{
  transition: stroke-dasharray .6s cubic-bezier(.19,1,.22,1) .18s;
}

/* ── the pipeline bars (The Floor) grow left→right, one loud strip at a time — a real stagger ── */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-pbar-fill{
  transform: scaleX(0) !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar-fill{
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.19,1,.22,1);
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar:nth-child(1) .pv-pbar-fill{ transition-delay: .05s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar:nth-child(2) .pv-pbar-fill{ transition-delay: .11s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar:nth-child(3) .pv-pbar-fill{ transition-delay: .17s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar:nth-child(4) .pv-pbar-fill{ transition-delay: .23s; }
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pv-pbar:nth-child(5) .pv-pbar-fill{ transition-delay: .29s; }

/* ── THE SEASON — the promotion-bar fills (`.pnsp-req-bar > i`, inline width:%) grow once their
   stack cascade (data-pn-reveal="stack", owned by PNMotion) has revealed them — PNMotion flags
   each stagger child `.pn-shown` on completion, so this piggybacks on that existing signal
   instead of adding a second, competing observer for the same block. */
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"] .pnsp-req-bar i{
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.19,1,.22,1) .1s;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"] .pnsp-req-bar i{
  transform: scaleX(0) !important;
}
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"] .pn-shown .pnsp-req-bar i,
html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"] .pnsp-req-bar.pn-shown i{
  transform: scaleX(1) !important;
}

/* ── reduced motion: everything visible immediately, no exceptions (mirrors PNMotion's own rule) ── */
@media (prefers-reduced-motion: reduce){
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr,
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr:not(.is-inview),
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr-card,
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr-card:not(.is-inview),
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr-card:not(.is-inview) .tt-bar i,
  html.pn-reveal-on:not(#pn-ds-never) body .pn-sr-card:not(.is-inview) .sqd-mf,
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-radarwrap svg,
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-donutwrap svg,
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-donutwrap svg circle,
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-perf"] .pn-sr:not(.is-inview) .pv-pbar-fill,
  html.pn-reveal-on:not(#pn-ds-never) body .hub-view[data-view="v-season"] .pnsp-req-bar i{
    opacity: 1 !important;
    transform: none !important;
    stroke-dasharray: unset !important;
    transition: none !important;
  }
}