/* ============================================================================
   cinema.css — "Esmeralda Noir — Cinematic" hero layer (v1, 2026-07-12)
   The film-title-sequence pass for the marketing FRONT PAGE. Loads LAST
   (after main → elevate → impact → showcase); additive only. Scoped to
   body.is-home except the generic .cine-reveal machinery.

   Layer order inside .hero (isolation:isolate, overflow:hidden):
     z:-1  .hero::before        atmosphere.png wash        (elevate — kept, hidden
                                                            behind the new backdrop)
     z:0   .hero-cine           silk-ribbon backdrop + scrim + grain   (NEW)
     z:0   .hero-motes          drifting gold light motes              (NEW)
     z:0   .mb-aurora/.mb-dots  living emerald light       (restored — see note)
     z:0   .hero::after         3D poster fallback         (impact — softened)
     z:0   #hero3d              live glass-sphere canvas   (hero3d.js, appended
                                                            last → paints above)
     z:2   .hero .wrap          content                    (impact)

   NOTE (aurora restore): elevate's `.hero > * { position:relative }` demoted
   .mb-aurora/.mb-dots from absolute to relative (equal specificity, later
   file), collapsing them to 0-height — the glow was silently dead on home.
   The higher-specificity rules below give them their geometry back.

   Motion doctrine: transform / opacity / filter only. Everything animated
   sits under prefers-reduced-motion: no-preference, plus an explicit reduce
   kill-switch at the end. One deliberate exception: the headline <em> sheen
   sweeps background-position across ONE clipped word (~200px of paint every
   other frame at 9s period) — requested effect, negligible cost.
   Companion JS: /js/cinema.js (scroll reveals + band parallax).
   Revert: drop the two layout.php includes + this file.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FULL-BLEED CINEMATIC BACKDROP
   /images/gen/cine-hero-a.png — emerald+gold silk ribbons rising from the
   bottom-right, deep black negative space top-left (behind the headline).
   --------------------------------------------------------------------------- */
.is-home .hero .hero-cine {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  /* melt the film frame into the page ink above and below */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 80%, transparent 100%);
}

/* the image plate — bled 4% past the frame so the Ken Burns drift never
   exposes an edge */
.is-home .hero .hero-cine::before {
  content: ""; position: absolute; inset: -4%;
  background: url("/images/gen/cine-hero-a.png") 72% 32% / cover no-repeat;
  filter: brightness(.94) saturate(1.05);
  transform: translate3d(0, 0, 0);
}

/* scrim stack (top layer first): fine grain → vignette → top-left legibility
   wedge under the headline → top-edge blend into the header ink */
.is-home .hero .hero-cine::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.3px),
    radial-gradient(135% 115% at 78% 55%, transparent 42%, rgba(5,10,8,.46) 96%),
    linear-gradient(108deg, rgba(8,13,11,.90) 0%, rgba(8,13,11,.72) 30%, rgba(8,13,11,.34) 56%, rgba(8,13,11,.06) 80%, transparent 100%),
    linear-gradient(180deg, rgba(8,13,11,.60) 0%, transparent 30%);
  background-size: 3px 3px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}

/* slow breathing drift — a luxury Ken Burns, GPU-only */
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero .hero-cine::before {
    animation: cineDrift 28s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes cineDrift {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.07) translate3d(-1.2%, -1.4%, 0); }
}

/* the living emerald light plays ON TOP of the film plate — restored geometry
   (see header note), retuned so it grades the ribbons instead of washing them */
.is-home .hero > .mb-aurora,
.is-home .hero > .mb-dots { position: absolute; inset: 0; z-index: 0; }
.is-home .hero .mb-aurora::before { opacity: .48; }
.is-home .hero .mb-aurora::after  { opacity: .22; }

/* the static 3D poster now double-exposes over the ribbons — pull it back to a
   ghost (the live canvas, when it arrives, still fades it to 0) */
.is-home .hero:not(.h3d-on)::after { opacity: .16; }

/* portrait / stacked hero: crop toward the ribbons, run the scrim vertically
   (headline on top, jackpot card standing on the lit silk below) */
@media (max-width: 860px) {
  .is-home .hero .hero-cine::before { background-position: 74% 32%; }
  .is-home .hero .hero-cine::after {
    background:
      radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.3px),
      radial-gradient(140% 100% at 50% 72%, transparent 40%, rgba(5,10,8,.5) 100%),
      linear-gradient(180deg, rgba(8,13,11,.92) 0%, rgba(8,13,11,.62) 42%, rgba(8,13,11,.28) 70%, rgba(8,13,11,.06) 100%);
    background-size: 3px 3px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
  }
}

/* ---- light theme: silk behind frosted glass — soft, intentional, legible ---- */
[data-theme="light"] .is-home .hero .hero-cine::before {
  opacity: .42; filter: brightness(1.08) saturate(.9);
}
[data-theme="light"] .is-home .hero .hero-cine::after {
  background:
    linear-gradient(108deg, rgba(241,245,242,.95) 0%, rgba(241,245,242,.80) 38%, rgba(241,245,242,.46) 64%, rgba(241,245,242,.20) 100%),
    linear-gradient(180deg, rgba(241,245,242,.72) 0%, rgba(241,245,242,.12) 42%, rgba(241,245,242,.5) 100%);
  background-size: auto, auto;
  background-repeat: no-repeat, no-repeat;
}
@media (max-width: 860px) {
  [data-theme="light"] .is-home .hero .hero-cine::after {
    background:
      linear-gradient(180deg, rgba(241,245,242,.94) 0%, rgba(241,245,242,.66) 45%, rgba(241,245,242,.30) 75%, rgba(241,245,242,.55) 100%);
    background-size: auto;
    background-repeat: no-repeat;
  }
}

/* ---------------------------------------------------------------------------
   2. FLOATING GOLD MOTES — a handful of soft lights rising through the frame.
   Two pattern plates (200% tall, tiled every 50%) loop on pure translateY;
   softness is baked into the radial stops (no per-frame filter cost).
   Decorative only: they simply don't exist under reduced motion.
   --------------------------------------------------------------------------- */
.is-home .hero .hero-motes {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero .hero-motes::before,
  .is-home .hero .hero-motes::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200%;
    background-repeat: repeat;
    background-size: 100% 50%;
    will-change: transform;
  }
  /* near plate — four crisp motes, 36s ascent */
  .is-home .hero .hero-motes::before {
    background-image:
      radial-gradient(circle 3px at 16% 82%, rgba(255,224,138,.6) 0%, rgba(244,201,91,.22) 45%, transparent 100%),
      radial-gradient(circle 2px at 38% 34%, rgba(244,201,91,.55) 0%, rgba(244,201,91,.2) 50%, transparent 100%),
      radial-gradient(circle 4px at 64% 62%, rgba(255,224,138,.42) 0%, rgba(244,201,91,.16) 45%, transparent 100%),
      radial-gradient(circle 2px at 87% 18%, rgba(244,201,91,.5) 0%, rgba(244,201,91,.18) 50%, transparent 100%);
    animation: cineMotes 36s linear infinite;
  }
  /* far plate — three big blurred-glow motes, 56s ascent */
  .is-home .hero .hero-motes::after {
    background-image:
      radial-gradient(circle 9px at 26% 58%, rgba(244,201,91,.16) 0%, rgba(244,201,91,.06) 55%, transparent 100%),
      radial-gradient(circle 7px at 55% 12%, rgba(255,224,138,.14) 0%, rgba(244,201,91,.05) 55%, transparent 100%),
      radial-gradient(circle 11px at 81% 78%, rgba(244,201,91,.13) 0%, rgba(244,201,91,.05) 55%, transparent 100%);
    animation: cineMotes 56s linear infinite;
  }
  /* the whole field breathes, slowly */
  .is-home .hero .hero-motes { animation: cineTwinkle 9s ease-in-out infinite alternate; }
}
@keyframes cineMotes {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -50%, 0); }
}
@keyframes cineTwinkle {
  from { opacity: .65; }
  to   { opacity: 1; }
}
@media (max-width: 700px) {
  .is-home .hero .hero-motes::after { display: none; } /* half the field on small screens */
}
[data-theme="light"] .is-home .hero .hero-motes {
  filter: brightness(.55) saturate(.85); /* gold reads as deep ochre on cream */
}

/* ---------------------------------------------------------------------------
   3. ENTRANCE CHOREOGRAPHY — one orchestrated page-load reveal.
   Pure CSS (runs with or without JS); `backwards` fill only, so NOTHING is
   pinned after the animation ends — impact.js's pointer tilt on the jackpot
   card keeps full control of `transform` once the card has arrived.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .is-home .cine-in { animation: cineRise .85s cubic-bezier(.16, 1, .3, 1) backwards; }
  .is-home .cine-in--1 { animation-delay: .08s; }  /* eyebrow   */
  .is-home .cine-in--2 { animation-delay: .20s; }  /* headline  */
  .is-home .cine-in--3 { animation-delay: .34s; }  /* subhead   */
  .is-home .cine-in--4 { animation-delay: .48s; }  /* CTAs      */
  .is-home .cine-in--5 { animation-delay: .62s; }  /* trust row */

  /* the jackpot card ARRIVES: rise + settle-scale with a gold glow bloom,
     then hands off to an endless soft halo breath (delays chained so the
     filter never snaps: cardIn ends at .5s+.95s = 1.45s = halo start) */
  .is-home .hero .mb-jackpot {
    animation:
      cineCardIn .95s cubic-bezier(.16, 1, .3, 1) .5s backwards,
      cineHalo 8s ease-in-out 1.45s infinite alternate;
  }

  /* the drawn balls cascade in after the card lands */
  .is-home .mb-jackpot .mb-draw > .mb-ball {
    animation: cineBallPop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
  }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(1) { animation-delay: 1.00s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(2) { animation-delay: 1.07s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(3) { animation-delay: 1.14s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(4) { animation-delay: 1.21s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(5) { animation-delay: 1.28s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(6) { animation-delay: 1.35s; }
  .is-home .mb-jackpot .mb-draw > .mb-ball:nth-child(8) { animation-delay: 1.48s; } /* adicional (7 = sep) */
}
@keyframes cineRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes cineCardIn {
  from { opacity: 0; transform: translateY(30px) scale(.96);
         filter: drop-shadow(0 0 0 rgba(244,201,91,0)); }
  55%  { filter: drop-shadow(0 6px 32px rgba(244,201,91,.26)); }
  to   { opacity: 1; transform: none;
         filter: drop-shadow(0 4px 16px rgba(244,201,91,.10)); }
}
@keyframes cineHalo {
  from { filter: drop-shadow(0 4px 16px rgba(244,201,91,.10)); }
  to   { filter: drop-shadow(0 6px 26px rgba(244,201,91,.20)); }
}
@keyframes cineBallPop {
  from { opacity: 0; transform: translateY(10px) scale(.4); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.08); }
  to   { opacity: 1; transform: none; }
}

/* persistent presence lift for the card (static — no paint cost): deeper noir
   shadow + a whisper of gold rim-light on the existing hairline border */
.is-home .hero .mb-jackpot {
  border-color: rgba(244,201,91,.20);
  box-shadow:
    var(--noir-edge),
    0 30px 90px -28px rgba(0,0,0,.85),
    0 0 46px -10px rgba(244,201,91,.13);
}
[data-theme="light"] .is-home .hero .mb-jackpot {
  border-color: rgba(176,128,24,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 24px 60px -28px rgba(14,19,17,.28),
    0 0 38px -10px rgba(176,128,24,.14);
}
/* visual-QA find: the bolsa's bright gold-grad (elevate) washes out on the
   white card — restate it in the established light golds (same family as the
   trust-record + goldline fixes). Scoped to the home hero card only. */
[data-theme="light"] .is-home .hero .mb-jackpot__amount {
  background: linear-gradient(135deg, #b08018 0%, #8a6410 55%, #6d4f0d 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

/* ---------------------------------------------------------------------------
   4. HEADLINE <em> — molten-gold sheen. The accent word turns gold (the one
   deliberate gold moment in the copy) with a slow moving light band.
   --------------------------------------------------------------------------- */
.is-home .hero__title em {
  color: var(--gold); /* fallback when background-clip:text is unsupported */
  background: linear-gradient(110deg,
    #E0A93B 0%, var(--gold) 28%, var(--gold-bright) 42%,
    var(--gold) 56%, #E0A93B 78%, var(--gold) 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero__title em { animation: cineSheen 9s ease-in-out infinite alternate; }
}
@keyframes cineSheen {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
/* light theme: bright gold is invisible on cream — use the established light
   golds (see elevate stage-3 legibility set) */
[data-theme="light"] .is-home .hero__title em {
  color: #8a6410;
  background: linear-gradient(110deg,
    #6d4f0d 0%, #8a6410 30%, #b08018 46%, #8a6410 62%, #6d4f0d 100%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------------------------------------------------------------------------
   5. CINEMATIC SCROLL REVEALS — armed by cinema.js (html.cine-armed), which
   also takes ownership of these nodes from impact.js's data-rv system.
   Hidden state exists ONLY while armed and not yet .is-in (no-JS safe);
   cinema.js removes both classes after settle so component-level transitions
   (e.g. the .step hover lift) return untouched.
   --------------------------------------------------------------------------- */
html.cine-armed .cine-reveal {
  opacity: 0;
  transform: translateY(24px);
}
html.cine-armed .cine-reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1) var(--cd, 0ms),
    transform .9s cubic-bezier(.16, 1, .3, 1) var(--cd, 0ms);
}

/* ---------------------------------------------------------------------------
   6. PHOTO BANDS — gentle depth: the plates render slightly oversized and
   cinema.js pans them (transform-only) against the scroll. Static oversize
   is harmless if JS never runs; under reduced motion it doesn't apply at all.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .is-home .band .mb-media > img { transform: scale(1.1); will-change: transform; }
}

/* ---------------------------------------------------------------------------
   7. REDUCED-MOTION KILL-SWITCH — the film at rest: everything visible,
   nothing transformed, nothing drifting. (The animated rules above already
   live under no-preference; this block is the belt to those braces.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .is-home .cine-in,
  .is-home .hero .mb-jackpot,
  .is-home .mb-jackpot .mb-draw > .mb-ball,
  .is-home .hero__title em,
  .is-home .hero .hero-cine::before,
  .is-home .hero .hero-motes { animation: none; }
  html.cine-armed .cine-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================================
   v2 INTENSIFICATIONS (2026-07-12) — "one notch up in WOW". Additive append:
   nothing above this line changed. New home.php hooks: .hero-cine__mesh
   (child of .hero-cine — inherits its mask/clip and its parallax) and
   .hero-bloom (front light plane, z:1 — above the z:0 backdrop stack, below
   .wrap at z:2). Companion cinema.js v2 adds the hero depth parallax
   (pointer + scroll on .hero-cine / .hero-motes / .hero-bloom) and takes
   ownership of the bolsa count-up from impact.js. Same doctrine as v1:
   transform / opacity / filter only, all motion gated on reduced-motion,
   section 12 is the v2 belt to those braces.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   8. LIVING COLOR — a slow emerald→teal→gold gradient mesh breathing over the
   film plate (between .hero-cine::before and the grain/scrim ::after, so the
   scrims keep grading it). Screen-blended at whisper opacity: it colors the
   silk, it is not a shape. ~38s drift loop: transform + a small hue-rotate.
   --------------------------------------------------------------------------- */
.is-home .hero .hero-cine__mesh {
  position: absolute; inset: -22%;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .16;
  background:
    radial-gradient(46% 38% at 24% 32%, rgba(52,200,146,.50), transparent 70%),
    radial-gradient(40% 34% at 74% 62%, rgba(24,146,158,.44), transparent 70%),
    radial-gradient(32% 28% at 56% 88%, rgba(244,201,91,.30), transparent 72%);
}
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero .hero-cine__mesh {
    animation: cineMeshDrift 38s ease-in-out infinite alternate;
    will-change: transform;
  }
}
@keyframes cineMeshDrift {
  from { transform: translate3d(-2.5%, -1.5%, 0) rotate(-2deg) scale(1);
         filter: hue-rotate(-10deg); }
  50%  { transform: translate3d(1.5%, 1%, 0) rotate(1deg) scale(1.05);
         filter: hue-rotate(5deg); }
  to   { transform: translate3d(3%, -2%, 0) rotate(3deg) scale(1.02);
         filter: hue-rotate(14deg); }
}
/* light: the frosted scrim above already tames it — just pull it back a hair */
[data-theme="light"] .is-home .hero .hero-cine__mesh { opacity: .12; }

/* aurora bloom, nudged slightly richer (was .48/.22 in section 1) */
.is-home .hero .mb-aurora::before { opacity: .55; }
.is-home .hero .mb-aurora::after  { opacity: .27; }

/* ---------------------------------------------------------------------------
   9. FRONT LIGHT-BLOOM PLANE + ON-LOAD SWEEP — .hero-bloom is the nearest
   parallax plane (cinema.js moves it the most): ::before is a soft standing
   gold/emerald bloom with a slow breath; ::after is the one-shot diagonal
   specular sweep (~1.25s, starts at .9s — just as the headline settles),
   base opacity 0 so it can never linger.
   --------------------------------------------------------------------------- */
.is-home .hero .hero-bloom {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
}
.is-home .hero .hero-bloom::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(38% 32% at 70% 24%, rgba(255,224,138,.085), transparent 72%),
    radial-gradient(30% 26% at 22% 76%, rgba(52,200,146,.06), transparent 72%);
}
.is-home .hero .hero-bloom::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0;
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(255,224,138,.07) 46%,
    rgba(255,246,214,.18) 50%,
    rgba(255,224,138,.07) 54%,
    transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero .hero-bloom::before {
    animation: cineBloomBreath 11s ease-in-out infinite alternate;
  }
  .is-home .hero .hero-bloom::after {
    animation: cineSweep 1.25s cubic-bezier(.55, .08, .28, 1) .9s 1 both;
  }
}
@keyframes cineBloomBreath {
  from { opacity: .7; }
  to   { opacity: 1; }
}
@keyframes cineSweep {
  from { transform: translate3d(-100%, 0, 0); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  to   { transform: translate3d(100%, 0, 0); opacity: 0; }
}
/* light: white specular is invisible on cream — restate both pseudos in the
   established deep golds, faint enough that the white card stays legible */
[data-theme="light"] .is-home .hero .hero-bloom::before {
  background:
    radial-gradient(38% 32% at 70% 24%, rgba(176,128,24,.05), transparent 72%),
    radial-gradient(30% 26% at 22% 76%, rgba(14,159,110,.04), transparent 72%);
}
[data-theme="light"] .is-home .hero .hero-bloom::after {
  background: linear-gradient(105deg,
    transparent 40%,
    rgba(176,128,24,.045) 46%,
    rgba(176,128,24,.10) 50%,
    rgba(176,128,24,.045) 54%,
    transparent 60%);
}

/* ---------------------------------------------------------------------------
   10. JACKPOT CARD — idle micro-float + bolsa glow-pulse.
   The float animates the standalone `translate` property, NOT `transform`:
   impact.js's pointer tilt writes an inline transform and both must compose
   (a transform keyframe here would override the tilt for good). The card's
   `animation` shorthand is restated verbatim from section 3 with the float
   appended (same 1.45s start as the halo, so nothing snaps mid-entrance).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .is-home .hero .mb-jackpot {
    animation:
      cineCardIn .95s cubic-bezier(.16, 1, .3, 1) .5s backwards,
      cineHalo 8s ease-in-out 1.45s infinite alternate,
      cineCardFloat 9s ease-in-out 1.45s infinite;
  }
  .is-home .hero .mb-jackpot__amount {
    animation: cineAmtGlow 5s ease-in-out 1.6s infinite alternate;
  }
  [data-theme="light"] .is-home .hero .mb-jackpot__amount {
    animation-name: cineAmtGlowLight; /* deep-gold breath on the white card */
  }
}
@keyframes cineCardFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -5px; }
}
@keyframes cineAmtGlow {
  from { filter: drop-shadow(0 0 6px rgba(244,201,91,.10)); }
  to   { filter: drop-shadow(0 0 15px rgba(244,201,91,.26)); }
}
@keyframes cineAmtGlowLight {
  from { filter: drop-shadow(0 0 5px rgba(176,128,24,.05)); }
  to   { filter: drop-shadow(0 0 10px rgba(176,128,24,.12)); }
}

/* ---------------------------------------------------------------------------
   11. BALL CASCADE, UPGRADED — the pop becomes a quick 3D coin-flip with a
   brief gold flash as each ball lands. Overrides only the shorthand from
   section 3 (same selector, later cascade); the per-ball :nth-child delays
   there are more specific, so the existing stagger timing still applies.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .is-home .mb-jackpot .mb-draw > .mb-ball {
    animation: cineBallFlip .6s cubic-bezier(.22, .9, .34, 1.08) backwards;
  }
}
@keyframes cineBallFlip {
  from { opacity: 0;
         transform: perspective(420px) translateY(12px) rotateY(-88deg) scale(.6);
         filter: none; }
  55%  { opacity: 1;
         transform: perspective(420px) translateY(-3px) rotateY(10deg) scale(1.1);
         filter: drop-shadow(0 2px 9px rgba(244,201,91,.38)) brightness(1.22); }
  82%  { transform: perspective(420px) translateY(0) rotateY(-3deg) scale(.98);
         filter: drop-shadow(0 1px 4px rgba(244,201,91,.12)) brightness(1.04); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* ---------------------------------------------------------------------------
   12. v2 REDUCED-MOTION BELT — everything new, at rest. (All v2 animation
   rules already live under no-preference; the card/ball selectors are also
   covered by the section-7 kill-switch. The bloom's standing glow and the
   mesh's static tint remain as still light — visible, not drifting.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .is-home .hero .hero-cine__mesh,
  .is-home .hero .hero-bloom::before,
  .is-home .hero .hero-bloom::after,
  .is-home .hero .mb-jackpot__amount { animation: none; }
}

/* ============================================================================
   v3 AURORA VIVA (2026-07-12) — the living hero. Additive append: nothing
   above this line changed. /js/hero-aurora.js (home only) paints a bespoke
   WebGL liquid-light field — domain-warped emerald→molten-gold flow on ink,
   cursor-reactive — on a <canvas class="hero-aurora"> placed INSIDE
   .hero-cine, so it inherits the frame's top/bottom melt mask, rides the
   cinema.js depth-parallax plane, and keeps the legibility scrim + grain
   (.hero-cine::after) ABOVE it. First painted frame -> .hero.aurora-on:
   the static silk plate and color mesh bow out (crossfade), and they RETURN
   the instant the class drops (context lost / reduced-motion change).
   Poster contract after v3: the ONLY hero backdrop is the aurora canvas, or
   the silk plate when the shader may not run. hero3d.js (glass spheres) is
   retired from home.php; its impact.css poster ghost is removed below.
   Revert: restore the hero3d include in home.php, delete this block.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   13. THE AURORA CANVAS — fades in only once the first frame has painted.
   --------------------------------------------------------------------------- */
.is-home .hero .hero-aurora {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease .05s;
}
.is-home .hero .hero-aurora.on { opacity: 1; }

/* silk plate + living-color mesh hand the stage to the shader (the canvas is
   opaque above them — fading them fully also stops their animation cost) */
.is-home .hero .hero-cine::before { transition: opacity 1.4s ease; }
.is-home .hero.aurora-on .hero-cine::before,
[data-theme="light"] .is-home .hero.aurora-on .hero-cine::before {
  opacity: 0; animation: none;
}
.is-home .hero.aurora-on .hero-cine__mesh,
[data-theme="light"] .is-home .hero.aurora-on .hero-cine__mesh {
  opacity: 0; animation: none;
}

/* the CSS emerald glow becomes a whisper over the live field (it stays the
   full-strength grade on the static poster path) */
.is-home .hero.aurora-on .mb-aurora::before { opacity: .26; }
.is-home .hero.aurora-on .mb-aurora::after  { opacity: .13; }

/* deeper legibility wedge while the molten field is live (dark theme only —
   light keeps its frost scrim from section 1) */
html:not([data-theme="light"]) .is-home .hero.aurora-on .hero-cine::after {
  background:
    radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.3px),
    radial-gradient(135% 115% at 78% 55%, transparent 40%, rgba(4,9,7,.52) 96%),
    linear-gradient(108deg, rgba(6,11,9,.93) 0%, rgba(6,11,9,.78) 30%, rgba(6,11,9,.40) 56%, rgba(6,11,9,.08) 80%, transparent 100%),
    linear-gradient(180deg, rgba(6,11,9,.62) 0%, transparent 30%);
  background-size: 3px 3px, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
}
@media (max-width: 860px) {
  /* stacked hero: the copy column (headline -> CTAs -> trust row) runs down
     ~2/3 of the frame, so the ink hold has to reach further before the field
     is allowed to blaze around the jackpot card at the bottom */
  html:not([data-theme="light"]) .is-home .hero.aurora-on .hero-cine::after {
    background:
      radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.3px),
      radial-gradient(140% 100% at 50% 78%, transparent 38%, rgba(4,9,7,.55) 100%),
      linear-gradient(180deg, rgba(6,11,9,.94) 0%, rgba(6,11,9,.78) 45%, rgba(6,11,9,.55) 68%, rgba(6,11,9,.18) 86%, rgba(6,11,9,.06) 100%);
    background-size: 3px 3px, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat;
  }
}

/* ---------------------------------------------------------------------------
   14. HERO3D RETIREMENT — the glass-spheres engine no longer loads on home,
   so its impact.css poster (.hero::after, hero3d-poster.jpg) would sit as a
   permanent ghost ABOVE the aurora (pseudo ::after paints after the child
   layers). Remove it outright on home; other pages are untouched.
   --------------------------------------------------------------------------- */
.is-home .hero::after { content: none; }

/* ---------------------------------------------------------------------------
   15. IMMERSIVE SCALE — the same composition the client approved, one octave
   grander: near-full-viewport hero and a more confident display headline on
   desktop. Vertical centering absorbs the extra room (grid already centers);
   mobile keeps its proven stacked proportions.
   --------------------------------------------------------------------------- */
@media (min-width: 861px) {
  .is-home .hero__in {
    min-height: clamp(600px, 88vh, 940px);
    padding: 64px 0 76px;
  }
  .is-home .hero__title { font-size: clamp(46px, 6vw, 78px); }
  .is-home .hero__sub   { font-size: 19px; max-width: 520px; }
}

/* ---------------------------------------------------------------------------
   16. v3 REDUCED-MOTION BELT — hero-aurora.js already refuses to start (and
   self-kills on a live setting change); this hides the canvas even if a race
   ever left one behind. Poster resting state = silk plate + static scrims.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .is-home .hero .hero-aurora { display: none; }
}

/* ============================================================================
   v4 VUELO (2026-07-12) — hero3d.js returns, reborn as FLIGHT. Additive
   append: nothing above this line changed. Supersedes the v3 header NOTE
   about hero3d's retirement: the impact.css poster stays dead on home
   (section 14 — the aurora is the base and only backdrop), but the ENGINE
   is back in home.php as /js/hero3d.js?v=3 — the live draw's seven glass
   spheres flying looping 3D paths OVER the aurora.

   Layer contract inside .hero-cine (z-index-pinned, so the two engines'
   append order can never hide one behind the other — the aurora canvas is
   OPAQUE):
     ::before  silk poster plate        (z auto — bows out on .aurora-on)
     .hero-aurora  liquid-light shader  (z 0)
     #hero3d       flying spheres       (z 1  — transparent, composites over)
     ::after       legibility scrim + grain (z 2 — ABOVE the balls: a near
                   pass across the copy is dimmed by the wedge, always)
     .hero .wrap   headline / jackpot card  (z 2 on .hero — a later stacking
                   context, paints above the whole cine frame)
   Riding inside .hero-cine also gives the flight the frame's top/bottom
   melt mask and cinema.js's depth-parallax plane for free.
   Revert: drop the hero3d include in home.php, delete this block.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   17. THE FLIGHT CANVAS — impact.css still owns the base look (opacity fade
   via #hero3d.on, display:none under reduced motion; as of v4.1 the LIGHT
   theme no longer hides it — see section 19); these rules only pin geometry
   + stacking for its new home inside the cine frame.
   --------------------------------------------------------------------------- */
.is-home .hero .hero-cine > #hero3d {
  position: absolute; inset: 0; z-index: 1;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
}
.is-home .hero .hero-cine::after { z-index: 2; } /* scrim/grain stay on top */

/* engine gate is >=900px at load — if the viewport is later resized under
   it, retire the flight rather than fly over the stacked (full-width) copy */
@media (max-width: 899px) {
  .is-home .hero .hero-cine > #hero3d { display: none; }
}

/* ---------------------------------------------------------------------------
   18. LEGIBILITY, STRENGTHENED (never weakened): while the flight is live
   over the aurora, the headline wedge gains one extra stop of ink so even a
   dramatic near-camera pass never fights the copy. Dark theme only — the
   engine doesn't run on light.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) { /* the flight only exists >=900px — below that the
                               v3 stacked wedge must keep winning */
  html:not([data-theme="light"]) .is-home .hero.aurora-on.h3d-on .hero-cine::after {
    background:
      radial-gradient(rgba(255,255,255,.026) 1px, transparent 1.3px),
      radial-gradient(135% 115% at 78% 55%, transparent 40%, rgba(4,9,7,.54) 96%),
      linear-gradient(108deg, rgba(6,11,9,.95) 0%, rgba(6,11,9,.82) 30%, rgba(6,11,9,.46) 56%, rgba(6,11,9,.10) 80%, transparent 100%),
      linear-gradient(180deg, rgba(6,11,9,.64) 0%, transparent 30%);
    background-size: 3px 3px, auto, auto, auto;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  }
}

/* ============================================================================
   v4.1 VUELO IN DAYLIGHT (2026-07-31) — hero3d.js no longer bails on the
   light theme: it re-lights its palette (pale-mint fog, deeper emerald/gold
   bodies, dark contact-shadow halos instead of additive glow) and flies on
   the pearl stage too. Additive append: nothing above this line changed.

   The section-18 note "dark theme only — the engine doesn't run on light" is
   superseded; section 19 gives light the same treatment in its own idiom.
   Revert: re-add `[data-theme="light"] #hero3d { display:none }` in
   impact.css and delete this block.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   19. LEGIBILITY ON THE PALE STAGE, STRENGTHENED (never weakened): the frost
   scrim (section 1's light block) already sits ABOVE #hero3d, so a ball can
   only ever ghost THROUGH it. While the flight is live the COPY SIDE gains
   one extra stop of pearl, exactly mirroring what section 18 does with ink on
   noir — so a dramatic near-camera pass never fights the headline.

   Deliberately unchanged from section 1: the far/right stops (108deg 100%,
   and the whole 180deg top/bottom blend). That band is the flight zone, it is
   already washing the balls by ~50%, and hero3d.js's light palette is graded
   against exactly these numbers — pushing them up here would grey the flight
   out. Legibility is bought where the words are, not across the whole frame.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) { /* the flight only exists >=900px */
  [data-theme="light"] .is-home .hero.aurora-on.h3d-on .hero-cine::after {
    background:
      linear-gradient(108deg, rgba(241,245,242,.98) 0%, rgba(241,245,242,.88) 38%, rgba(241,245,242,.52) 64%, rgba(241,245,242,.20) 100%),
      linear-gradient(180deg, rgba(241,245,242,.74) 0%, rgba(241,245,242,.12) 42%, rgba(241,245,242,.50) 100%);
    background-size: auto, auto;
    background-repeat: no-repeat, no-repeat;
  }
}