/* Immersify – Home banner
   The copy sits over a full-bleed scene: the WebGL canvas (banner.js) with a
   CSS neon floor under it, so the floor is there from first paint and the
   canvas only adds to it. .banner__stage marks where the 3D logo goes. */

.banner {
    position:   relative;
    overflow:   hidden;
    isolation:  isolate;
    min-height: calc(100svh - var(--header-height));
    display:    flex;
    align-items: center;
}

/* ── Scene ───────────────────────────────────────────────── */
.banner__scene {
    position: absolute;
    inset:    0;
    z-index:  -1;
}

.banner__canvas {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    opacity:    0;
    transition: opacity 1.2s ease;

    .banner.is-live & {
        opacity: 1;
    }
}

/* A synthwave floor in plain CSS – a perspective grid fading to the horizon.
   The 3D scene draws its own animated floor and this one steps aside. */
.banner__floor {
    position:   absolute;
    inset:      55% -50% 0;
    background:
        linear-gradient(to bottom, var(--color-black) 0%, transparent 35%),
        repeating-linear-gradient(90deg, rgb(196 94 255 / 45%) 0 1px, transparent 1px 60px),
        repeating-linear-gradient(0deg, rgb(0 191 255 / 40%) 0 1px, transparent 1px 40px);
    transform:        perspective(400px) rotateX(62deg);
    transform-origin: top center;
    transition:       opacity 1.2s ease;

    .banner.is-live & {
        opacity: 0;
    }
}

/* ── Layout ──────────────────────────────────────────────── */
.banner__inner {
    width:          100%;
    max-width:      calc(var(--container-width) + 2 * var(--gutter));
    margin-inline:  auto;
    padding:        var(--space-xl) var(--gutter) var(--space-3xl);
    display:        grid;
    gap:            var(--space-lg);
    align-items:    center;

    @media (min-width: 992px) {
        grid-template-columns: 1.15fr 1fr;
        gap:                   var(--space-xl);
        padding-block:         var(--space-2xl) var(--space-3xl);
    }
}

.banner__copy {
    position: relative;
    order:    2;

    @media (min-width: 992px) {
        order: 1;
    }
}

.banner__stage {
    order:        1;
    width:        min(52vw, 220px);
    aspect-ratio: 690 / 607;
    margin-inline: auto;
    display:      grid;
    place-items:  center;

    @media (min-width: 992px) {
        order: 2;
        width: min(100%, 420px);
    }
}

/* The SVG stand-in – gone once the 3D logo has taken its place */
.banner__logo {
    width:      100%;
    transition: opacity .6s ease;

    .banner.is-live & {
        opacity: 0;
    }
}

/* ── Copy ────────────────────────────────────────────────── */
.banner__eyebrow {
    margin-bottom: var(--space-lg);
}

.banner__title {
    margin-bottom: var(--space-md);
}

.banner__title-glitch {
    display: inline-block;
}

.banner__intro {
    max-width:     480px;
    margin-bottom: var(--space-lg);
}

.banner__start {
    margin:         var(--space-xl) 0 0;
    font:           var(--text-10pr);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--color-cyan);
    text-shadow:    0 0 8px rgb(0 191 255 / 70%);
}