/* ============================================================
   BG VIDEO SWITCHER — bg-video.css  (HARDENED)
   Styles for the dual-layer crossfade system managed by bg-video.js.
   Keep this file isolated so video styles never bleed into site.css.

   v2 — May 2026 — comprehensive play-button suppression
   ────────────────────────────────────────────────────────────
   The browser play button / "tap to play" overlay was appearing on
   some devices (notably iOS Safari with Low Power Mode, Chrome on
   Android with Data Saver, and older WebViews). The fixes below
   cover every known surface where a browser draws media chrome:

     1. Native controls — every vendor prefix, every browser
     2. Picture-in-picture / AirPlay / cast button overlays
     3. The big centred "play" overlay that iOS draws when
        autoplay is denied (we suppress pointer events AND visuals)
     4. Poster fallback styled to match the video (so if all else
        fails the user sees a clean image, not a broken-video icon)
     5. A `.bg-video-fallback` solid-colour layer guaranteed to
        always render, so the section never looks empty even if
        the video is fully blocked
   ============================================================ */

/* ── 1. CONTAINER & LAYOUT ─────────────────────────────────── */

/*
 * Both video elements sit in the same stacking context, below
 * all UI chrome (z-index -2). bg-video.js controls opacity
 * transitions in JS for precise timing control; the base styles
 * here are the fallback / initial state before JS hydrates.
 */
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    opacity: 1;
    /* Smooth crossfade — duration matches FADE_MS in bg-video.js */
    transition: opacity 280ms ease;
    /* GPU-accelerated layer for zero-jank compositing */
    will-change: opacity;
    transform: translateZ(0); /* force compositor layer */
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* Prevent any interaction or selection bleeding through.
       This is the FIRST line of defence against play overlays —
       even if a control button is rendered, it cannot be tapped. */
    pointer-events: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    /* Eliminate sub-pixel gaps on some browsers */
    display: block;
    /* Background colour acts as a soft fallback in the brief
       window before the first frame paints. Picked to match
       residential.mp4's dominant tone — adjust if your videos
       have a different palette. */
    background-color: #1a2332;
}

    /*
 * The inactive (incoming) clone starts transparent.
 * bg-video.js sets opacity: 1 to trigger the fade-in.
 */
    .bg-video[data-role="inactive"] {
        opacity: 0;
        z-index: -3; /* sits below the active layer */
    }


    /* ── 2. KILL EVERY NATIVE CONTROL OVERLAY ──────────────────── */

    /*
 * The browser draws a play button when:
 *   a) autoplay is blocked
 *   b) the element gains focus and `controls` is implied
 *   c) iOS shows its centred "tap to play" glyph
 *
 * We hide the controls in CSS as a belt-and-braces defence on
 * top of the JS guarantee that the `controls` attribute is
 * never set. The vendor-prefixed pseudo-elements below cover
 * every Chromium, WebKit and Gecko surface.
 */

    /* WebKit / Chromium / Edge — every individual control */
    .bg-video::-webkit-media-controls,
    .bg-video::-webkit-media-controls-panel,
    .bg-video::-webkit-media-controls-play-button,
    .bg-video::-webkit-media-controls-start-playback-button,
    .bg-video::-webkit-media-controls-overlay-play-button,
    .bg-video::-webkit-media-controls-overlay-enclosure,
    .bg-video::-webkit-media-controls-enclosure,
    .bg-video::-webkit-media-controls-timeline,
    .bg-video::-webkit-media-controls-current-time-display,
    .bg-video::-webkit-media-controls-time-remaining-display,
    .bg-video::-webkit-media-controls-mute-button,
    .bg-video::-webkit-media-controls-volume-slider,
    .bg-video::-webkit-media-controls-fullscreen-button,
    .bg-video::-webkit-media-controls-toggle-closed-captions-button,
    .bg-video::-webkit-media-controls-picture-in-picture-button {
        display: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* iOS Safari — the big centred "play" overlay specifically.
   This is THE overlay that triggers your bug. iOS draws it at
   the centre of the video when autoplay is denied. The
   shadow-DOM pseudo-elements below blank it completely. */
    .bg-video::-webkit-media-controls-start-playback-button,
    .bg-video::-webkit-media-controls-overlay-play-button {
        display: none !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        opacity: 0 !important;
    }

    /* iOS-specific: the inline-playback "play" glyph that appears
   over a paused video on Safari 14+ when controls are disabled. */
    .bg-video::-webkit-media-text-track-container,
    .bg-video::-internal-media-controls-overflow-button,
    .bg-video::-webkit-media-controls-overflow-menu-button {
        display: none !important;
    }

    /* Firefox — Gecko exposes a different shadow tree */
    .bg-video::-moz-media-controls,
    .bg-video::-moz-media-controls-panel {
        display: none !important;
        opacity: 0 !important;
    }

    /* Belt-and-braces: any descendant inside the video's shadow root */
    .bg-video > * {
        display: none !important;
    }


    /* ── 3. POSTER FALLBACK STYLING ────────────────────────────── */

    /*
 * If autoplay is fully blocked AND the video element falls back
 * to its poster image, style the poster so it fills the panel
 * the same way the video would. This avoids the "broken video"
 * look entirely.
 *
 * We do NOT set a `poster` attribute in the HTML by default —
 * but if you ever decide to (recommended for low-bandwidth
 * users), this rule ensures it scales correctly.
 */
    .bg-video[poster] {
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }


/* ── 4. SOLID-COLOUR FALLBACK LAYER ────────────────────────── */

/*
 * .bg-video-fallback is rendered by bg-video.js as a sibling to
 * the video elements. It's a CSS-painted gradient that ALWAYS
 * shows — so even if every video file fails, autoplay is
 * blocked, AND prefers-reduced-motion is on, the user still
 * sees a beautiful background, never an empty grey rectangle.
 *
 * Sits at z-index -4: below both video layers but above any
 * default panel background.
 */
.bg-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -4;
    pointer-events: none;
    /* Multi-stop gradient evoking the "warm interior + sky"
       palette of the residential video. Replace with brand
       colours if you have them. */
    background: radial-gradient(circle at 20% 30%, rgba(255, 200, 130, 0.18) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(120, 180, 255, 0.15) 0%, transparent 55%), linear-gradient(135deg, #1a2332 0%, #2a3548 50%, #1a2332 100%);
    background-size: 200% 200%;
    /* Subtle ambient drift — the same look people expect from
       a video, even though it's just a CSS animation. Costs
       nothing on the GPU. */
    animation: bgVideoFallbackDrift 24s ease-in-out infinite alternate;
}

@keyframes bgVideoFallbackDrift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* ── 5. ACCESSIBILITY & USER-PREFERENCE OVERRIDES ──────────── */

/*
 * Reduce-motion: respect the user's preference. Cut instead of
 * crossfade. Also kill the fallback gradient drift animation.
 *
 * Note: we do NOT hide the video here. Modern browsers honour
 * prefers-reduced-motion at the element level when they want to,
 * and a slowly-looping landscape clip is rarely the kind of
 * motion that triggers vestibular issues. But if you want to
 * disable video entirely under reduced-motion, uncomment the
 * `display: none` rule.
 */
@media (prefers-reduced-motion: reduce) {
    .bg-video {
        transition: none !important;
    }

    .bg-video-fallback {
        animation: none !important;
    }
    /* Uncomment to disable autoplay video entirely under
       reduced-motion. The fallback gradient will show instead.
    .bg-video { display: none !important; }
    */
}


/* ── 6. SAVE-DATA / LOW-BANDWIDTH SUPPORT ──────────────────── */

/*
 * When the user has Data Saver / Save-Data on, hide the video
 * and show the gradient fallback. The video is decorative, so
 * not loading 5-10 MB of MP4 is the right call.
 *
 * Note: prefers-reduced-data is supported in Chrome 85+ behind
 * a flag and Firefox 119+. For browsers without support, the
 * Save-Data HTTP request hint is also checked server-side
 * (your CDN can set a class on <html>). Both paths handled.
 */
@media (prefers-reduced-data: reduce) {
    .bg-video {
        display: none !important;
    }
}

html.save-data .bg-video {
    display: none !important;
}


/* ── 7. PRINT — never include the video ────────────────────── */
@media print {
    .bg-video,
    .bg-video-fallback {
        display: none !important;
    }
}