/* ============================================================================
   impact.css — Esmeralda Noir impact layer (v1, 2026-07-01)
   3D hero canvas + poster fallback, scroll reveals, jackpot tilt/sheen,
   gold particle field, press states. Additive on top of main.css + elevate.css.
   Companion JS: /js/hero3d.js (home only) + /js/impact.js (sitewide).
   ========================================================================== */

/* ---- 3D hero: canvas + generated poster fallback ---- */
.hero { position: relative; }

/* Static poster (cfimage 3D render) — the no-JS / no-WebGL / mobile visual.
   Masked into the right side so the copy column keeps full contrast. */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url('/images/gen/hero3d-poster.jpg') right center / cover no-repeat;
    opacity: .30;
    -webkit-mask-image: radial-gradient(110% 130% at 78% 42%, #000 30%, transparent 72%);
            mask-image: radial-gradient(110% 130% at 78% 42%, #000 30%, transparent 72%);
    transition: opacity .9s ease;
}
/* live 3D took over -> retire the poster */
.hero.h3d-on::after { opacity: 0; }

#hero3d {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s ease .15s;
}
#hero3d.on { opacity: 1; }

/* content above the atmosphere layers */
.hero .wrap { position: relative; z-index: 2; }

/* Light theme keeps its clean pale wash — noir renders would clash. */
[data-theme="light"] .hero::after,
[data-theme="light"] #hero3d { display: none; }

/* ---- Scroll reveals (armed by impact.js only when motion is allowed) ---- */
.rv-armed [data-rv] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity .7s cubic-bezier(.16, 1, .3, 1) var(--rvd, 0ms),
        transform .7s cubic-bezier(.16, 1, .3, 1) var(--rvd, 0ms);
}
.rv-armed [data-rv].rv-in {
    opacity: 1;
    transform: none;
}

/* ---- Jackpot card: 3D tilt + gold specular sheen ---- */
.mb-jackpot.jk-3d {
    transform-style: preserve-3d;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
    position: relative;
}
.mb-jackpot.jk-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--shx, 50%) var(--shy, 50%),
                rgba(244, 201, 91, .13), transparent 62%);
    opacity: 0;
    transition: opacity .35s ease;
}
.mb-jackpot.jk-live { transition: transform .06s linear; }
.mb-jackpot.jk-live::after { opacity: 1; }

/* ---- Final CTA gold particle canvas ---- */
.final-cta { position: relative; overflow: hidden; }
.cta-sparks {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.final-cta .wrap { position: relative; z-index: 1; }

/* ---- Blog card thumbs: lift the noir photo pool out of near-black ----
   The curated heroes are intentionally dark; at card size several read as
   voids (audit + QA 2026-07-02). Brightness lift sits UNDER the emerald
   grade (.blog-card-thumb::after) so palette unity is preserved. */
.blog-card-thumb img,
.blog-preview-grid .blog-card img {
    filter: brightness(1.38) saturate(1.12) contrast(.96);
}

/* ---- Tactile press states (buttons everywhere) ---- */
.mb-btn:active { transform: translateY(1px) scale(.985); }

/* ---- Guard rail: motion off -> everything is simply visible & static ---- */
@media (prefers-reduced-motion: reduce) {
    .rv-armed [data-rv] { opacity: 1; transform: none; transition: none; }
    .hero::after { transition: none; }
    #hero3d { display: none; }
}