/* ==========================================================
   SCREEN GATE
   Below 1024px the site is not reachable: the viewport is the
   video and nothing else.

   Width is the rule, not pointer/touch detection. `max-width` is
   the one media feature that behaves identically everywhere, it
   re-evaluates for free when the window changes, and it can be
   verified at any size. `pointer: coarse` describes the primary
   input rather than the device, and misreports on touchscreen
   laptops and on detachables when the keyboard comes off.

   This file is linked LAST so these rules win the cascade.
   ========================================================== */
#screen-gate { display: none; }

@media (max-width: 1023px) {
    /* Everything the site is made of, not just the desk: the start
       screen, the Safari shell, the terminal, all of it. */
    body > *:not(#screen-gate) { display: none !important; }

    html, body {
        margin: 0;
        height: 100%;
        overflow: hidden;            /* nothing scrolls behind it */
        overscroll-behavior: none;   /* and no rubber-band reveals an edge */
        background: #000;
    }

    #screen-gate {
        position: fixed;
        inset: 0;
        z-index: 2147483647;         /* above every z-index in the project */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #000;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    #screen-gate video {
        width: 100%;
        height: 100%;
        /* contain, not cover. The clip is 552x480 and a phone is far
           taller: cover would scale it to 933x812 on a 375px screen and
           crop 60% of the width away, which would destroy the edit. */
        object-fit: contain;
        background: #000;
        pointer-events: none;        /* the tap belongs to the gate */
    }

    /* ---- sound ----
       Browsers refuse to autoplay audio without a gesture, so the clip
       starts muted and the first tap anywhere turns sound on. */
    .gate-sound {
        position: absolute;
        left: 50%;
        bottom: max(28px, env(safe-area-inset-bottom));
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 11px 18px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.10);
        border: 1px solid rgba(255, 255, 255, 0.26);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        font-family: 'SF Pro Rounded', ui-rounded, -apple-system, sans-serif;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.92);
        pointer-events: none;        /* the whole screen is the target */
        user-select: none;
        white-space: nowrap;
        animation: gateSoundPulse 2.6s ease-in-out infinite;
    }

    /* once sound is on it stops asking and just reports */
    .gate-sound.on {
        animation: none;
        opacity: 0.55;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.14);
    }

    @keyframes gateSoundPulse {
        0%, 100% { opacity: 0.62; }
        50%      { opacity: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
        .gate-sound { animation: none; opacity: 1; }
    }
}