/* ════════════════════════════════════════════════════════════════════
   scroll-fx.css  ·  EXPERIMENT  ·  drop-in scroll-reveal layer  (v2)
   Enhances the existing demismatch.com front door in place - targets the
   page's own classes, adds nothing to the markup's meaning. Remove the two
   include lines + the head arm-script and the page is exactly as before.
   Composes cor.css tokens (oxblood / teal / gold / parchment, Spectral).

   v2: GRANULAR. Reveals at leaf level - every kicker, tag, list item, node,
   chip, answer line, FAQ row and stat rises on scroll, so the page assembles
   itself piece by piece. Section titles get word-brightening (handled in JS),
   so they are excluded from the fade set below to avoid double-animating.

   The master list lives in --SFX-MASTER (mirrored in scroll-fx.js). All of it
   is gated on html.sfx-armed, which the head arm-script only sets when motion
   is allowed - so if JS never runs, or reduced-motion is on, nothing hides.
   ════════════════════════════════════════════════════════════════════ */

/* ── Initial hidden state for every reveal target (CSS-only, no flash) ── */
html.sfx-armed :is(
  .bd-kicker, .bd-lede, .bd-film, .bd-decode-row, .bd-needs-row,
  .bd-arm-kicker, .bd-arm-tag, .bd-arm-paper, .bd-arm-fold > summary, .bd-arm-list > li,
  .bd-source-kicker, .bd-source-mark, .bd-source-spec, .bd-source-cta, .bd-source-vid,
  .bd-source-credit-label, .bd-source-credit-names .cr-pill, .bd-source-credit-names .more,
  .bd-source-answers-label, .bd-source-answers li,
  .bd-source-stats .stat, .bd-source-note,
  .bd-horizon, .bd-map-expand,
  .panel-demo > div:first-child, .panel-demo .dt-label, .panel-demo .dt-q, .panel-demo .dt-a,
  .bd-quote, .bd-read, .bd-cta,
  .cx-head, .cx-stage,
  .bd-eyebrow, .faq-group-label, .faq-item,
  .bd-network, .bd-horizon-body p,
  .vid-head, .vid-card, .vid-channel
){
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--sfx-delay, 0s);
  will-change: opacity, transform;
}
html.sfx-armed :is(
  .bd-kicker, .bd-lede, .bd-film, .bd-decode-row, .bd-needs-row,
  .bd-arm-kicker, .bd-arm-tag, .bd-arm-paper, .bd-arm-fold > summary, .bd-arm-list > li,
  .bd-source-kicker, .bd-source-mark, .bd-source-spec, .bd-source-cta, .bd-source-vid,
  .bd-source-credit-label, .bd-source-credit-names .cr-pill, .bd-source-credit-names .more,
  .bd-source-answers-label, .bd-source-answers li,
  .bd-source-stats .stat, .bd-source-note,
  .bd-horizon, .bd-map-expand,
  .panel-demo > div:first-child, .panel-demo .dt-label, .panel-demo .dt-q, .panel-demo .dt-a,
  .bd-quote, .bd-read, .bd-cta,
  .cx-head, .cx-stage,
  .bd-eyebrow, .faq-group-label, .faq-item,
  .bd-network, .bd-horizon-body p,
  .vid-head, .vid-card, .vid-channel
).sfx-in{
  opacity: 1;
  transform: none;
}

/* chips ride in slightly from the left - reads as a name ticker filling up */
html.sfx-armed .cr-pill{ transform: translateY(0) translateX(-4px); }
html.sfx-armed .cr-pill.sfx-in{ transform: none; }
/* the concentric Cor mark eases in a touch larger - it settles into place */
html.sfx-armed .bd-source-mark{ transform: translateY(6px) scale(.99); transform-origin: center; }
html.sfx-armed .bd-source-mark.sfx-in{ transform: none; }

/* ── Word-brightening ───────────────────────────────────────────────── */
.sfx-w{
  display: inline-block;
  color: inherit;
  opacity: .5;
  filter: blur(1.5px);
  will-change: opacity, filter;
}
/* hero thesis brightens word-by-word on load (it sits above the fold) */
html.sfx-armed .bd-thesis .sfx-w{
  animation: sfx-word .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(.15s + var(--i) * .052s);
}
@keyframes sfx-word{ to{ opacity: 1; filter: none; } }
/* section titles brighten on scroll - JS drives opacity/blur directly */

/* ── Cor stat count-up: hold tabular so the width doesn't jitter ─────── */
html.sfx-armed .bd-source-stats .stat .n{ font-variant-numeric: tabular-nums; }

/* ── Parallax backdrops: transform only, never touches layout ────────── */
html.sfx-armed .bd-backdrop{ will-change: transform; }

/* ── Reduced motion: sfx-armed is never set by the arm-script, so nothing
      hides. Belt-and-suspenders for the word spans. ─────────────────────── */
@media (prefers-reduced-motion: reduce){
  .sfx-w{ opacity: 1 !important; filter: none !important; }
}