/* ============================================================
   variables.css — design tokens (CHC gold/black identity) +
   the animation state variables the engine scrubs on scroll.

   THEME tokens  → swap these to re-skin for another brand.
   MOTION vars   → written by GSAP; the values here are the
                   INITIAL (scroll = 0) state, so the section looks
                   correct even for a single frame before JS binds.
   ============================================================ */

.sr-stage {
  /* ── Theme: colors (identical to chc_beauty_page.php) ── */
  --sr-gold: #d4af37;
  --sr-gold-light: #e8cc6a;
  --sr-gold-dim: rgba(212, 175, 55, 0.18);
  --sr-black: #1a1a1a;
  --sr-black-2: #222222;
  --sr-hero-bg: #050505; /* matches the portrait's near-black backdrop so the image blends edge-to-edge */
  --sr-brown: #4a3728;
  --sr-cream: #f5f0e8;
  --sr-cream-2: #ede8df;
  --sr-ink: #1a1a1a;
  --sr-muted: #8b857c;

  /* ── Theme: type ── */
  --sr-font: "Tajawal", system-ui, "Segoe UI", sans-serif;

  /* ── Theme: geometry ── */
  --sr-portrait-ratio: 627 / 1054; /* matches the placeholder assets */
  --sr-radius: 4px;
  --sr-maxw: 1200px;

  /* ── Theme: depth ── */
  --sr-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);

  /* ── Motion: camera / face (initial = scene S0) ── */
  --sr-zoom: 1;          /* scene scale; engine sets 1.7 → 1.0 during S0 */
  --sr-angle: 0;         /* rotateY degrees (unitless; CSS applies * 1deg) */
  --sr-parallax: 0;      /* background drift px (unitless; CSS applies * 1px) */

  /* ── Motion: global skin quality (dullness / texture read here) ── */
  --sr-bri: 1;           /* brightness()  */
  --sr-sat: 1;           /* saturate()    */
  --sr-con: 1;           /* contrast()    */
  --sr-glow: 0;          /* gold glow overlay opacity 0..1 */

  /* ── Motion: gold light sweep ── */
  --sr-sweep-x: -30%;    /* horizontal position */
  --sr-sweep-o: 0;       /* opacity 0..1 */

  /* ── Motion: localized reveal radii (grown per concern stage) ──
     JS also sets these dynamically per active concern; declaring the
     common ones here guarantees a defined fallback of 0%. */
  --m-full: 0%;
  --m-dullness: 0%;
  --m-circles: 0%;
  --m-acne: 0%;
  --m-texture: 0%;
  --m-lips: 0%;
  --m-cheeks: 0%;
  --m-jaw: 0%;

  /* ── Motion: outro + progress ── */
  --sr-outro: 0;         /* 0 hidden → 1 fully revealed content */
  --sr-progress: 0;      /* 0..1 whole-timeline progress */

  /* ── Tuning knobs (safe to theme) ── */
  --sr-mask-feather: 22%; /* softness of every reveal edge */
  --sr-ease-fade: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dark surface behind the pinned stage (matches the portrait backdrop). */
.sr-stage {
  background: var(--sr-hero-bg);
  color: var(--sr-cream);
}