/* site-reveal.css — portable, framework-free premium reveal styles.
   Used by site-motion.js on interior pages. Heading words rise out of a clip
   mask; content blocks fade up out of a soft blur; both gate on an added class
   so nothing is ever permanently hidden if the script fails. */

/* ── Masked word reveal for headings (animation-driven = deterministic) ─ */
.fxr-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .03em .16em; margin-bottom: -.16em; }
.fxr-w-i {
  display: inline-block;
  transform: translateY(118%);
  opacity: 0;
  will-change: transform;
}
.fxr-h.fxr-in .fxr-w-i {
  animation: fxrWordIn .72s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(min(var(--i, 0), 20) * 28ms);
}
@keyframes fxrWordIn {
  from { transform: translateY(118%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── Blur-up for opt-in content (data-fxr) ─────────────────────── */
[data-fxr] { opacity: 0; transform: translateY(26px); filter: blur(12px); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), filter .8s ease; }
[data-fxr].fxr-in { opacity: 1; transform: none; filter: blur(0); }
[data-fxr-stagger] > * { opacity: 0; transform: translateY(24px); filter: blur(10px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1), filter .7s ease; }
[data-fxr-stagger].fxr-in > * { opacity: 1; transform: none; filter: blur(0); }
[data-fxr-stagger].fxr-in > *:nth-child(2){transition-delay:.07s}
[data-fxr-stagger].fxr-in > *:nth-child(3){transition-delay:.14s}
[data-fxr-stagger].fxr-in > *:nth-child(4){transition-delay:.21s}
[data-fxr-stagger].fxr-in > *:nth-child(5){transition-delay:.28s}
[data-fxr-stagger].fxr-in > *:nth-child(6){transition-delay:.35s}
[data-fxr-stagger].fxr-in > *:nth-child(n+7){transition-delay:.42s}

.cnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ── Supporting-text word rise (lighter, softer; animation-driven) ─── */
.fxr-sub .fxr-sw { display: inline-block; }
.fxr-sub .fxr-sw-i {
  display: inline-block;
  transform: translateY(0.62em);
  opacity: 0;
  will-change: transform, opacity;
}
.fxr-sub.fxr-in .fxr-sw-i {
  animation: fxrSubIn .6s cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(min(var(--i, 0), 36) * 15ms);
}
@keyframes fxrSubIn {
  from { transform: translateY(0.62em); opacity: 0; filter: blur(5px); }
  to   { transform: none; opacity: 1; filter: blur(0); }
}

/* ── Eyebrow reveal + accent-bar wipe ──────────────────────────── */
.fxr-eb { opacity: 0; transform: translateY(9px); transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.fxr-eb.fxr-in { opacity: 1; transform: none; }
.fxr-eb .accent-bar { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.16,1,.3,1) .14s; }
.fxr-eb.fxr-in .accent-bar { clip-path: inset(0 0 0 0); }

/* ── Shine: glow charge across the emphasis phrase (container-level, 
      conflict-free with the word reveal animations) ──────────────── */
.shine-go {
  animation: fxrEmGlow 1.05s ease both;
  animation-delay: .25s;
}
@keyframes fxrEmGlow {
  0%, 100% { filter: brightness(1); }
  45% { filter: brightness(1.45) drop-shadow(0 0 16px var(--accent-glow, rgba(99,102,241,.5))); }
}

/* ── Keyword highlights inside headings (interior pages) ─────── */
.h2 em, .sd-h1 em, .sd-problem-text em {
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* ── Scramble / decode ─────────────────────────────────────────── */
.fxr-scramble { white-space: normal; }
.fxr-scramble .scr-w { display: inline-block; white-space: nowrap; }
.fxr-scramble .scr-c { display: inline; }
.fxr-scramble .scr-rnd { color: var(--accent, #6366F1); opacity: .9; }

/* ── Opt-in 3D tilt (perspective lives on the element) ──────────── */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .fxr-w-i, [data-fxr], [data-fxr-stagger] > *,
  .fxr-sub .fxr-sw-i, .fxr-eb, .fxr-eb .accent-bar {
    transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; transition: none !important; animation: none !important;
  }
  .shine-go { animation: none !important; filter: none !important; }
}
