/* vs-spline-hero — responsive Spline hero: the 3D scene's gray gradient stays
 * full-bleed at every viewport while vs-spline-hero.js re-frames the model
 * (orthographic camera zoom + y) into the free zone ABOVE the headline, so the
 * donut and the text never overlap. Injected on the homepage only by
 * inject_spline_hero.py. Debug escape hatch: /?spline=stock skips the JS layer.
 */

/* never let a short viewport crush the section below what the text needs;
 * the canvas is sized to the container (+96px watermark crop) so the gradient
 * keeps covering whatever the section resolves to */
.spline-container {
    min-height: 560px;
}

/* the scene stays hidden from the moment our JS arms the boot class until the
 * first successful camera layout, so visitors never see the stock (overlapping)
 * framing. If the JS never runs, the boot class is never added and the scene
 * shows exactly as before. */
.spline-container.vs-sh-boot spline-viewer {
    opacity: 0;
}

.spline-container.vs-sh-ready spline-viewer {
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* text block: keep it bottom-anchored but let the offset breathe with the
 * viewport (was a fixed 140px) — shorter screens give the model more room.
 * !important beats the inline bottom:140px fallback kept in the markup. */
.spline-container .spline-hero-content {
    bottom: clamp(28px, 9vh, 120px) !important;
}

/* phones: the text block alone nearly fills the section, which would leave no
 * band for the model. Drop the overlay anchoring — text flows below a reserved
 * model band and the section may grow past the viewport (the canvas tracks the
 * container, so the gradient still covers all of it). The JS measures the same
 * rects either way and frames the model into the reserved band. */
@media (max-width: 767px) {
    .spline-container {
        height: auto !important;
        min-height: calc(100vh - 80px);
    }

    /* relative, not static: it must keep painting above the z-index:1 canvas
     * (the inline z-index:10 only applies to positioned boxes); left/bottom
     * are forced to auto so the inline overlay offsets don't shift it */
    .spline-container .spline-hero-content {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: clamp(140px, 34vh, 300px) auto clamp(24px, 5vh, 60px) !important;
    }
}