/* ============================================================
   BEINC — CRT Bounce (Component CSS)
   Brand element bouncing around a box like a CRT screensaver.
   Used by the homepage hero and the mega-menu preview.
   Driven by js/components/crt-bounce.js
   Depends on: global.css (colour tokens)

   NOTE: .crt deliberately sets no `position`. The host context owns
   that — .hero-video is already absolute, .mm-preview__crt sets its
   own — which avoids a specificity fight between this file and the
   section stylesheets.
   ============================================================ */

.crt {
    overflow: hidden;
    isolation: isolate;   /* keeps the overlays inside — they must not
                             paint over sibling content */
    background: var(--color-black2);
}

.crt__screen {
    position: absolute;
    inset: 0;
    /* makes cqw/cqh resolve against this box, so the mark size and the
       bounce area track the host through any resize or transition */
    container-type: size;
    overflow: hidden;
}

.crt__mark {
    position: absolute;
    top: 0;
    left: 0;
    /* 88cqh cap: the element rotates freely, so its worst-case footprint
       is its diagonal — 1.1015x its width at this 2.1655:1 aspect. Without
       the cap a short box is physically too small to contain it and the
       element escapes. No effect at normal heights; 17cqw wins there. */
    --mw: min(clamp(84px, 17cqw, 300px), 88cqh);
    --mh: calc(var(--mw) / 2.1655);   /* brand element viewBox 278.05 / 128.4 */
    width: var(--mw);
    height: var(--mh);
    transform-origin: 50% 50%;
    will-change: transform;
    color: var(--color-white);        /* flat brand cream, no tint, no glow */
}

.crt__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* bars scale about their own centres — crt-bounce.js writes the transform */
.crt__svg rect {
    transform-box: fill-box;
    transform-origin: center;
}

/* ── CRT DRESSING — all static, all compositor-friendly ── */

.crt__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* scanlines multiply so they only darken — an additive line would grey
   out the whole panel against --color-black2 */
.crt__fx--scan {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, .30) 0 1px,
        rgba(0, 0, 0, 0) 1px 3px);
    mix-blend-mode: multiply;
}

/* aperture-grille triads, kept very low: 'screen' adds light, and
   anything stronger lifts the blacks into a visible plaid */
.crt__fx--grille {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 0, 0, .018) 0 1px,
        rgba(0, 255, 0, .018) 1px 2px,
        rgba(0, 80, 255, .018) 2px 3px);
    mix-blend-mode: screen;
}

.crt__fx--vignette {
    background: radial-gradient(120% 120% at 50% 50%,
        rgba(0, 0, 0, 0) 42%,
        rgba(0, 0, 0, .28) 74%,
        rgba(0, 0, 0, .66) 100%);
    box-shadow: inset 0 0 90px rgba(0, 0, 0, .55);
}

/* slow rolling refresh bar — transform-only, stays on the compositor */
.crt__fx--roll {
    height: 26%;
    background: linear-gradient(to bottom,
        rgba(255, 251, 240, 0) 0%,
        rgba(255, 251, 240, .018) 45%,
        rgba(255, 251, 240, .028) 55%,
        rgba(255, 251, 240, 0) 100%);
    animation: crtRoll 8s linear infinite;
    will-change: transform;
}

@keyframes crtRoll {
    from { transform: translateY(-120%); }
    to   { transform: translateY(480%); }
}

@media (prefers-reduced-motion: reduce) {
    .crt__fx--roll { animation: none; }
}