/* ============================================================
   Explora Investor Deck — Cinema layer
   Word-by-word reveals, mask sweeps, letter-tracking settles
   and pop scale-ins. Every animation keys off `.slide.active`
   so it re-fires on every slide entry, not only on first load.
   ============================================================ */

/* -------- timing primitives -------- */
:root {
  --cine-ease:    cubic-bezier(.22,1,.36,1);       /* film-grade ease-out */
  --cine-pop-ease: cubic-bezier(.34,1.56,.64,1);   /* gentle overshoot */
  --cine-dur:     1.05s;
  --cine-stagger: .07s;
  --cine-cd:      .18s;                            /* base lead-in delay */
}

/* ============================================================
   1 · Word reveal — text rises with blur-to-sharp settle.
   Use: <h2 class="cine-words">Hello <em>world</em></h2>
   The cinema.js splits text into <span class="cine-w">word</span>;
   <em>-wrapped words get .cine-em for the honey glow.
   ============================================================ */
.cine-words .cine-w {
  display:inline-block;
  opacity:0;
  transform:translateY(.55em) scale(.94);
  filter:blur(10px);
  will-change:transform,filter,opacity;
}
.slide.active .cine-words .cine-w {
  animation: cineRise var(--cine-dur) var(--cine-ease) both;
  animation-delay: calc(var(--w,0) * var(--cine-stagger) + var(--cd, var(--cine-cd)));
}
@keyframes cineRise {
  0%   { opacity:0; transform:translateY(.55em) scale(.94); filter:blur(10px); }
  55%  { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1);       filter:blur(0); }
}

/* honey emphasis: same rise, plus a brief golden bloom */
.cine-em {
  text-shadow: 0 0 0 rgba(232,199,127,0);
}
.slide.active .cine-words .cine-w.cine-em {
  animation:
    cineRise var(--cine-dur) var(--cine-ease) both,
    cineGlow 2.6s ease-out both;
  animation-delay:
    calc(var(--w,0) * var(--cine-stagger) + var(--cd, var(--cine-cd))),
    calc(var(--w,0) * var(--cine-stagger) + var(--cd, var(--cine-cd)));
}
@keyframes cineGlow {
  0%   { text-shadow: 0 0 0   rgba(232,199,127, 0); }
  35%  { text-shadow: 0 0 36px rgba(232,199,127,.55); }
  100% { text-shadow: 0 0 0   rgba(232,199,127, 0); }
}

/* ============================================================
   2 · Letter-tracking settle — for eyebrows / sub labels.
   Use: <span class="cine-track">OUR PROMISE</span>
   Starts wide-tracked + blurred, settles to natural spacing.
   ============================================================ */
.cine-track {
  opacity:0;
  letter-spacing:.45em;
  filter:blur(6px);
}
.slide.active .cine-track {
  animation: cineTrack 1.35s var(--cine-ease) forwards;
  animation-delay: var(--cd, 0s);
}
@keyframes cineTrack {
  0%   { opacity:0; letter-spacing:.45em; filter:blur(6px); }
  100% { opacity:1; letter-spacing:inherit; filter:blur(0); }
}

/* ============================================================
   3 · Mask sweep — left→right film-title wipe.
   Use: <h2 class="cine-mask">Investment need</h2>
   ============================================================ */
.cine-mask {
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  opacity:0;
}
.slide.active .cine-mask {
  animation: cineMask 1.15s cubic-bezier(.65,0,.35,1) forwards;
  animation-delay: var(--cd, .2s);
}
@keyframes cineMask {
  0%   { clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); opacity:0; }
  10%  { opacity:1; }
  100% { clip-path: inset(0 0 0 0);    -webkit-clip-path: inset(0 0 0 0);    opacity:1; }
}

/* ============================================================
   4 · Pop scale-in — for hero numbers / badges.
   Use: <div class="bi-value cine-pop">€30M</div>
   ============================================================ */
.cine-pop {
  opacity:0;
  transform: scale(.5) rotate(-4deg);
}
.slide.active .cine-pop {
  animation: cinePop 1.05s var(--cine-pop-ease) forwards;
  animation-delay: var(--cd, .25s);
}
@keyframes cinePop {
  to { opacity:1; transform: scale(1) rotate(0); }
}

/* honey-toned pop variant — adds a soft golden glow as it lands */
.cine-pop.cine-pop-glow {
  text-shadow: 0 0 0 rgba(232,199,127,0);
}
.slide.active .cine-pop.cine-pop-glow {
  animation: cinePop 1.05s var(--cine-pop-ease) forwards,
             cineGlow 2.4s ease-out both;
  animation-delay: var(--cd, .25s), var(--cd, .25s);
}

/* ============================================================
   5 · Corner drift — SWOT quadrants float in from each corner.
   ============================================================ */
.cine-from-tl { opacity:0; transform:translate(-26px,-26px); }
.cine-from-tr { opacity:0; transform:translate( 26px,-26px); }
.cine-from-bl { opacity:0; transform:translate(-26px, 26px); }
.cine-from-br { opacity:0; transform:translate( 26px, 26px); }
.slide.active .cine-from-tl,
.slide.active .cine-from-tr,
.slide.active .cine-from-bl,
.slide.active .cine-from-br {
  animation: cineCorner 1.1s var(--cine-ease) forwards;
  animation-delay: var(--cd, .25s);
}
@keyframes cineCorner {
  to { opacity:1; transform: translate(0,0); }
}

/* ============================================================
   6 · Ambient floats — very subtle drift for jungle/cover frames
   on the Promise / MV statement slides, layered atop the leaf
   motif already provided by leaves.css.
   ============================================================ */
.slide-promise .promise-line,
.slide-mv .mv-block p {
  /* slight breathing on the headline once revealed */
}

/* Reduced motion: kill every cinematic flourish */
@media (prefers-reduced-motion:reduce) {
  .cine-words .cine-w,
  .cine-track,
  .cine-mask,
  .cine-pop,
  .cine-from-tl, .cine-from-tr, .cine-from-bl, .cine-from-br {
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    letter-spacing:inherit !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    animation:none !important;
    text-shadow:none !important;
  }
}

/* ------------------------------------------------------------
   <em> color inheritance for split words
   The splitter replaces <em> with <span class="cine-em">; these
   rules mirror each original `em` color rule onto .cine-em so the
   honey emphasis still carries through after splitting.
   ------------------------------------------------------------ */
.cover-slogan .cine-em,
.promise-line .cine-em,
.closing-slogan .cine-em,
.mv-card p .cine-em,
.mv-solo .mv-block p .cine-em {
  font-style:normal; font-weight:700; color:var(--honey);
}
.mv-card.vision p .cine-em { color:var(--honey-dk); }
.slide-title .cine-em { font-style:normal; font-weight:700; color:var(--honey-dk); }
.slide.dark .slide-title .cine-em,
.slide.jungle .slide-title .cine-em { color:var(--honey); }

/* ============================================================
   7 · Kinetic typography — HARD & SHARP.
   Each word punches in big with overshoot, slams to size, and
   exits with a hard scale-out before the next word enters.
   No overlap, no soft blur — sharp on, sharp off.
   ============================================================ */
.cine-kinetic {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:1.4em;
  text-align:center;
  font-family:var(--font-serif);
  font-weight:900;
  font-size:clamp(80px, 11vw, 150px);
  line-height:1;
  letter-spacing:-.035em;
}
.cine-kinetic br { display:none; }
.cine-kinetic .cine-w {
  position:absolute;
  left:50%; top:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.32);
  white-space:nowrap;
  will-change:transform, opacity;
  /* no blur — hard, crisp text */
}
/* timing: slightly slower — each word lingers a touch longer + a bit more
   gap between words so the kinetic count/label cadence reads as a beat. */
.slide.active .cine-kinetic .cine-w {
  animation: cineKineticBang 1.15s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--w,0) * .98s + var(--cd, .25s));
}
.slide.active .cine-kinetic .cine-w:last-child {
  animation: cineKineticBang 1.15s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--w,0) * .98s + var(--cd, .25s));
}
/* SOFTER kinetic — no overshoot/dip, gentle scale-in, fade-out without burst */
@keyframes cineKineticBang {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.78); }
  28%  { opacity:1; transform:translate(-50%,-50%) scale(1); }      /* land smoothly */
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1); }      /* hold */
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.08); }   /* gentle fade-out */
}
/* honey emphasis still applies */
.cine-kinetic .cine-w.cine-em { color:var(--honey); }
.slide:not(.dark):not(.jungle) .cine-kinetic .cine-w.cine-em { color:var(--honey-dk); }

@media (prefers-reduced-motion:reduce) {
  .cine-kinetic .cine-w { animation:none !important; opacity:1 !important; position:static; transform:none !important; display:inline-block; margin-right:.3em; }
}

/* ============================================================
   Kinetic stage v2 — sequence punches out; rest line fades in.
   Two siblings stacked on top of each other in the stage.
   The kinetic sequence is aria-hidden (decorative); the
   .kinetic-rest is the readable final state.
   ============================================================ */
.kinetic-stage {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height:2.4em;
  width:100%;
}
.kinetic-stage > * { width:100%; }

/* The animated sequence sits as an overlay; the rest is the in-flow line. */
.kinetic-sequence { position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); margin:0; }
.kinetic-rest     { position:relative; opacity:0; }

/* Final-line entrance: BANG AND THUD with a breather.
   Sequence math: 10 words × 0.55s stagger + 0.50s anim + 0.25s cd → last
   word ends at ~5.70s. We then leave a 0.65s breather of empty stage so
   "in." has completely cleared, then SLAM the full line in.
   Adjusts automatically per slide: set --kr-delay on the .kinetic-stage
   to override (e.g. for slides with different word counts). */
.kinetic-stage { --kr-delay: 6.35s; }
.slide.active .kinetic-rest {
  animation: kineticRestBang .55s cubic-bezier(.22,1,.36,1) both;
  animation-delay: var(--kr-delay, 6.35s);
}
@keyframes kineticRestBang {
  0%   { opacity:0; transform:scale(1.10); }    /* small scale, no big bang */
  60%  { opacity:1; transform:scale(1.01); }    /* gentle settle */
  100% { opacity:1; transform:scale(1); }       /* land */
}

/* The .kinetic-rest paragraph carries the same brand-line styling. */
.slide-promise .kinetic-rest {
  text-align:center;
  font-family:var(--font-serif);
  font-weight:800;
  font-size:60px;
  line-height:1.15;
  letter-spacing:-1px;
  color:var(--on-dark);
  max-width:1100px;
  margin:0 auto;
}
.slide-promise .kinetic-rest em {
  font-style:normal;
  color:var(--honey);
  font-weight:800;
}

@media (prefers-reduced-motion:reduce) {
  .kinetic-sequence { display:none; }
  .kinetic-rest { opacity:1 !important; animation:none !important; }
}

/* ============================================================
   Promise slide — choreography overrides
   1. Eyebrow appears slowly first (1.55s settle, full beat to itself)
   2. Kinetic sequence starts AFTER eyebrow lands (--cd:1.80s)
   3. Kinetic words rendered in CAPITALS for added punch
   4. Final readable sentence stays in mixed case
   ============================================================ */
.slide.active .promise-eyebrow {
  animation-duration: 1.55s;        /* slower settle, more presence */
  letter-spacing:.45em;              /* preserved from .cine-track */
  font-size:13px;                    /* tiny bit larger for visibility */
}
.kinetic-sequence.cine-kinetic {
  text-transform: uppercase;
  letter-spacing: -.02em;            /* slightly tighter caps */
}
/* final readable line — also CAPS, matching the kinetic voice */
.kinetic-rest {
  text-transform: uppercase;
  letter-spacing: -.025em;
}
.slide-promise .kinetic-rest { font-size: 56px; }   /* nudge down so the all-caps line fits on two lines */