/* =============================================================================
   InvestProp — home hero visual
   -----------------------------------------------------------------------------
   The stage the home page's 3D object stands in (three.js + GSAP, see
   `site/assets/js/hero-core.js`): a glass account slab in a chrome bezel, a
   range of candles behind it and a lit equity curve threading through.

   Scoped to `.hc-stage`, the visual's own root — NOT to the page body class —
   so it can be lifted onto another page (same rule as atlas.css / bento.css /
   free-hero.css). The hero copy, buttons and floating chips keep their `hx-`
   styles from home.css.

   Two renderings, best first
   -------------------------
     1. `.hc-stage.is-live` — WebGL is up and the scene is being rendered.
     2. `.hc-still` — no WebGL, no module support or a blocked script: the flat
        hero artwork the admin uploaded, exactly as the page shipped before.

   The light pooled behind the object is CSS, not WebGL: a canvas glow would
   have to be pixels the GPU keeps re-blending every frame, and this one never
   changes.
   ========================================================================== */

.hc-stage {
    --hc-blue: rgba(0, 123, 255, .42);
    --hc-cyan: rgba(94, 210, 236, .26);
    --hc-floor: rgba(0, 90, 190, .30);

    position: relative;
    display: block;
    width: 100%;
    max-width: 580px;
    height: 300px;
    margin-inline: auto;
    /* the canvas is transparent, so nothing here clips the object's own glow */
    overflow: visible;
}

html:not(.dark) .hc-stage {
    --hc-blue: rgba(0, 110, 220, .20);
    --hc-cyan: rgba(94, 210, 236, .18);
    --hc-floor: rgba(0, 80, 170, .14);
}

/* --- the light the object stands in --------------------------------------
   Two washes and a floor pool. Every stop fades to the SAME hue at zero alpha:
   fading a coloured radial to bare `transparent` drags the midpoint through
   grey and the whole gradient reads muddy. */
.hc-stage::before,
.hc-stage::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hc-stage::before {
    inset: -6% -4% 6%;
    background:
        radial-gradient(46% 42% at 42% 38%, var(--hc-blue), rgba(0, 123, 255, 0) 70%),
        radial-gradient(34% 34% at 72% 62%, var(--hc-cyan), rgba(94, 210, 236, 0) 72%);
    filter: blur(22px);
}

/* the pool the object stands on, under the contact shadow */
.hc-stage::after {
    inset-inline: 12%;
    bottom: 8%;
    height: 86px;
    background: radial-gradient(50% 50% at 50% 50%, var(--hc-floor), rgba(0, 90, 190, 0) 72%);
    filter: blur(16px);
}

.hc-canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.1s ease;
}

.hc-stage.is-live .hc-canvas { opacity: 1; }

/* --- static fallback: the flat hero artwork ------------------------------- */
.hc-still {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.hc-stage.is-live .hc-still { display: none; }

/* --- stage size ----------------------------------------------------------
   The object is fitted to the canvas by the module (it scales the whole
   composition against the frame), so the only thing these sizes decide is how
   much room it gets — and, crucially, its ASPECT. The composition is about 1.6
   times as wide as it is tall; give the stage a squarer box than that and the
   object is still fitted to the width while the extra height becomes dead space
   under it. So every step here stays close to that ratio. */
@media (min-width: 576px) {
    .hc-stage { height: 350px; }
}

@media (min-width: 992px) {
    .hc-stage {
        height: 420px;
        max-width: 680px;
    }

/* No negative margin here, tempting as it is. The hero's container keeps only a
   ~12px gutter, so bleeding the stage "outward" by anything useful pushes it
   past the viewport edge — where `.hx-hero { overflow: hidden }` quietly clips
   the canvas, and with it the corner of the object that was fitted to fill it.
   Room for the object comes from the stage's ASPECT, not from stealing margin.
*/
}

@media (min-width: 1400px) {
    .hc-stage {
        height: 450px;
        max-width: 720px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hc-canvas { transition: none; }
}