/* =============================================================================
   InvestProp — Free Prop hero visual
   -----------------------------------------------------------------------------
   Used by `site/free-prop.blade.php`. One object, nothing else: the InvestProp
   mark rendered as a solid, machined body (three.js, driven by GSAP — see
   `site/assets/js/brand-emblem.js`).

   Scoped to `.fh-stage`, the visual's own root — NOT to the page body class —
   so it can be reused on another page (same rule as atlas.css / versus.css /
   bento.css). The hero copy, buttons and trust chips keep their `fp-` styles.

   Two renderings, best first
   -------------------------
     1. `.fh-stage.is-live` — WebGL is up and the emblem is being rendered.
     2. `.fh-still` — no WebGL, no module support, or a blocked script: the same
        mark as a flat SVG. Same artwork either way, because both come from
        `images/main/logo-mark.svg`.
   ========================================================================== */

.fh-stage {
    --fh-primary: #007BFF;
    --fh-cyan: #5ED2EC;
    --fh-halo: rgba(0, 123, 255, .26);

    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: 480px;
    height: 340px;
}

html:not(.dark) .fh-stage {
    --fh-halo: rgba(0, 110, 220, .16);
}

/* --- the light the object stands in --------------------------------------- */
.fh-stage::before {
    content: "";
    position: absolute;
    inset: 8% 6% 4%;
    background: radial-gradient(60% 52% at 50% 46%, var(--fh-halo), transparent 72%);
    filter: blur(26px);
    pointer-events: none;
}

.fh-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

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

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

.fh-still img {
    width: 46%;
    max-width: 230px;
    height: auto;
    opacity: .92;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .55));
}

html:not(.dark) .fh-still img { filter: drop-shadow(0 16px 36px rgba(16, 40, 80, .28)); }

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

/* --- the two chips floating over the emblem ------------------------------
   Their look lives in free-prop.css with the rest of the page; only their
   placement around the object belongs here. */
.fh-stage .fx-hero__chip {
    z-index: 2;
    animation-duration: 9s;
}

.fh-stage .fx-hero__chip--1 {
    top: 15%;
    left: 0;
}

.fh-stage .fx-hero__chip--2 {
    bottom: 13%;
    right: 0;
}

@media (width >= 48rem) {
    .fh-stage { height: 420px; }

    /* the emblem fills most of the stage now, so the chips sit just outside it
       — the stage does not clip, and the page's container has the room */
    .fh-stage .fx-hero__chip--1 { top: 8%; left: -3%; }
    .fh-stage .fx-hero__chip--2 { bottom: 6%; right: -3%; }
}

@media (width >= 80rem) {
    .fh-stage {
        height: 480px;
        max-width: 560px;
    }

    .fh-stage .fx-hero__chip--1 { top: 10%; left: -4%; }
    .fh-stage .fx-hero__chip--2 { bottom: 8%; right: -4%; }
}

@media (width < 48rem) {
    .fh-stage .fx-hero__chip--1 { top: 2%; left: 0; }
    .fh-stage .fx-hero__chip--2 { bottom: 2%; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-stage .fx-hero__chip { animation: none; }
}