/*!
 * scene-player.css — structural styles for Module C (ScenePlayer).
 * Extracted from index.html. STRUCTURE lives here; VALUES live in a
 * theme tokens file (see theme-yael.css / Module E). Load order:
 * theme tokens first, then this file.
 *
 * Verbatim from production: panel positioning + 0.5s opacity fade
 * (hideScene's timing pairs with it), svg sizing (cover + translateZ),
 * .rp base-hidden rule, caption positions/timing/paper-glow, vignette.
 * Tokenized: ink/paper colors, font roles, and the one Module E
 * addition --paper-glow (r,g,b triplet) so glow + vignette stop
 * hardcoding the paper color.
 */

/* ── stage + panels ─────────────────────────────────────────── */
.sp-stage {
  position: relative;
  overflow: hidden;
  background: var(--paper);
}

.sp-stage .panel {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.5s ease;        /* hideScene fades via this */
}
.sp-stage .svg-host {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.sp-stage .svg-host svg {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  transform: translateZ(0);
}

/* the reveal contract: bucketed paths start hidden */
.rp { opacity: 0; }

/* paper vignette to soften edges (tokenized paper color) */
.sp-stage .panel::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              transparent 45%, rgba(var(--paper-glow), 0.4) 100%);
}

/* ── captions (mechanism; content comes from story.json) ────── */
.sp-stage .caption {
  position: absolute;
  max-width: min(50vw, 480px);
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  z-index: 10;
  padding: 1.5rem;
  text-shadow:
    0 0 20px rgba(var(--paper-glow), 0.95),
    0 0 40px rgba(var(--paper-glow), 0.85),
    0 0 8px  rgba(var(--paper-glow), 1);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.sp-stage .caption.tl { top: 4vh;    left: 4vw;   text-align: left; }
.sp-stage .caption.tr { top: 4vh;    right: 4vw;  text-align: right; }
.sp-stage .caption.bl { bottom: 8vh; left: 4vw;   text-align: left; }
.sp-stage .caption.br { bottom: 8vh; right: 4vw;  text-align: right; }

.sp-stage .caption .num {
  display: block; font-family: var(--latin); font-style: italic;
  color: var(--ochre); font-size: 0.85rem;
  letter-spacing: 0.3em; margin-bottom: 0.75rem;
}
.sp-stage .caption .he {
  font-family: var(--serif); font-weight: 500; color: var(--ink);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  line-height: 1.25; margin-bottom: 0.5rem;
  direction: rtl;
}
.sp-stage .caption .en {
  font-family: var(--latin); font-style: italic;
  color: var(--ink-soft); font-size: 1rem;
  letter-spacing: 0.02em;
  direction: ltr;
}

@media (max-width: 720px) {
  .sp-stage .caption { max-width: 70vw; padding: 1rem; }
}

/* ── reduced motion (pairs with the player's F4 branches) ───── */
@media (prefers-reduced-motion: reduce) {
  .sp-stage .panel, .sp-stage .caption { transition: none; }
}