/* ============================================================================
   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 on light theme + reduced motion); 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;
  }
}