/* ============================================================================
   theme.css — THE TOP-LEVEL THEME for this deck. Edit here to restyle.
   base.css (framework) ships defaults; this file overrides them.

   This deck exists to test one thing: a "buttery smooth" per-character focus-in
   reveal for slide titles (blur + fade, staggered letter by letter). It is pure
   CSS — no extra JS — triggered by the SAME `.slide.active` class the framework
   already toggles when a slide becomes current, so the effect (re)plays every
   time you land on the slide, in both directions, and needs nothing from
   framework/.

   Usage in slide markdown (raw slides only):
     <h1 class="s-title fx-title">
       <span class="fx-line">
         <span class="fx-char" style="--i:0">H</span>
         <span class="fx-char" style="--i:1">e</span>
         ...
       </span>
     </h1>
   `--i` = this character's position (drives its stagger delay).
   ============================================================================ */

:root{
  /* --- palette --- */
  --deck-bg:        #000510;   /* slide background (also in deck.json) */
  --deck-ink:       #f9fafb;   /* primary text */
  --deck-ink-dim:   #9aa3b8;   /* secondary text (body, bullets) */
  --deck-ink-faint: #7e879c;   /* chrome / counter */
  --deck-accent:    #a9c0ea;   /* eyebrow, dividers, citations */

  /* --- cards --- */
  --deck-card:      rgba(255,255,255,.028);
  --deck-card-bd:   rgba(255,255,255,.075);

  /* --- fx-title timing --- */
  --fx-char-dur: 920ms;
  --fx-stagger: 50ms;
}

/* ---- generic raw-slide layout helpers for this test deck ---- */
.fx-stage{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 2.6cqh;
  padding: 8cqh 10cqw;
}
.fx-stage--top{
  align-items: flex-start; justify-content: flex-start;
  text-align: left;
  gap: 3.2cqh;
  padding-top: 9cqh;
}
.fx-eyebrow{
  font-size: 1.5cqw; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--deck-accent); margin: 0;
}
.fx-subtitle{
  font-size: 2cqw; font-weight: 300; color: var(--deck-ink-dim); margin: 0;
  max-width: 60cqw;
}
.fx-body{
  font-size: 2cqw; line-height: 1.7; color: var(--deck-ink-dim);
  max-width: 62cqw; margin: 0;
}
.fx-bullets{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.7cqh;
  font-size: 2cqw; line-height: 1.5; color: var(--deck-ink-dim);
}
.fx-bullets li strong{ color: var(--deck-ink); font-weight: 500; }

/* whisper of depth behind the intro title, so pure black doesn't read flat */
.fx-glow{
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(249,250,251,.07), transparent 70%);
  filter: blur(10px);
  opacity: 0;
  transition: opacity 1.4s ease;
}
.slide.active .fx-glow{ opacity: 1; }

/* ---- the character-focus title effect ---- */
.fx-title{ margin: 0; }
.fx-line{ position: relative; display: inline-block; }
.fx-char{ display: inline-block; opacity: 0; }

/* The animation is keyed off `.slide.active` — the same class the engine already
   adds/removes on slide navigation — so it fires fresh every time this slide
   becomes current, with no bespoke JS in this deck. */
.slide.active .fx-line .fx-char{
  animation: fxFocusIn var(--fx-char-dur) cubic-bezier(.16,1,.3,1) both;
  animation-delay: calc(var(--i) * var(--fx-stagger));
}
@keyframes fxFocusIn{
  from { opacity: 0; transform: translateY(2px); filter: blur(12px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);    }
}

@media (prefers-reduced-motion: reduce){
  .fx-char{ opacity: 1; animation: none !important; filter: none; transform: none; }
  .fx-glow{ transition: none; }
}