/* ============================================
   Riviant — Letter Storm

   A full-width band of loose letters that fly
   into formation, hold a line, then burst into
   the pixels they were drawn from. Drawn on a
   single <canvas> by js/letter-storm.js.

   Light by design: it sits between two pale
   sections on the homepage, so a dark slab would
   read as a hole in the page. Ink on near-white,
   same as the rest of the site.
   ============================================ */

.ls-band {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* The type colours live here, not in the script — JS reads them off this
       element so the palette stays in CSS where it belongs. */
    --ls-ink: 23, 23, 23;
    --ls-accent: var(--accent-blue-rgb);

    background: linear-gradient(180deg, #FFFFFF 0%, #F7F7F8 45%, #FFFFFF 100%);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 84px 24px;
    min-height: min(56vh, 440px);
    display: grid;
    place-items: center;
    text-align: center;
}

/* A whisper of light and brand colour so the band isn't a flat white box. */
.ls-band::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(58% 60% at 20% 25%, rgba(0, 0, 0, 0.035), transparent 70%),
        radial-gradient(52% 55% at 82% 78%, rgba(var(--accent-blue-rgb), 0.07), transparent 70%);
}

/* The canvas covers the whole band — letters drift across all of it, then
   converge on the slot below. It never takes clicks. */
.ls-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ls-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--container-max);
    pointer-events: none;
}

/* Empty on purpose: it reserves the line's space in the normal flow, and JS
   reads its box to know where on the canvas to draw. */
.ls-slot {
    height: clamp(74px, 11vw, 122px);
}

/* Screen readers get the whole idea as one static line. */
.ls-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .ls-band {
        min-height: min(46vh, 340px);
        padding: 60px 18px;
    }
}