/* ============================================================
   BTE VIDEO SECTION
   ============================================================ */

/* ---- Section ---- */
.bte-video-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-color: var(--bte-navy);
}

/* ---- Background ---- */
.bte-video-section__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.bte-video-section__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
    filter: saturate(0.6) brightness(0.5);
}

.bte-video-section__bg-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(7, 9, 58, 0.6) 0%,
            rgba(7, 9, 58, 0.35) 50%,
            rgba(7, 9, 58, 0.75) 100%
        );
}

/* Separate layer for the scroll-linked darkening, rather than
   animating the gradient overlay above directly — that overlay's
   own opacity is already at its designed resting value, so there'd
   be no room to make it "more" dark via opacity alone (1 is the
   ceiling). This sits on top of it, starts invisible, and fades in
   as the pinned section scrolls through (see bte-video.js). */
.bte-video-section__scroll-darken {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--bte-navy);
    opacity: 0;
    pointer-events: none;
}

/* ---- Two-line converging heading ---- */
.bte-video-section__heading-wrap {
    position: absolute;
    inset: 0;
    z-index: 3;                /* above the video window (z-index:2 inner) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15em;
    pointer-events: none;
    overflow: hidden;
}

.bte-video-section__heading {
    display: contents; /* wrapper only — each line lays out independently */
}

.bte-video-section__heading-line {
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    color: var(--bte-white);
    white-space: nowrap;
    line-height: 1;
    mix-blend-mode: difference;
    opacity: 0.92;
    will-change: transform, opacity;
}

/* ---- Inner layout — window is now the only child, so it centres
   truly independently of the tagline, which is positioned separately
   below rather than sharing this flex row (the tagline's own width
   was previously pulling the row's centred midpoint away from the
   window's actual centre). ---- */
.bte-video-section__inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: clamp(var(--space-20), 12vh, var(--space-32)) var(--gutter);
}

/* ---- Tagline — positioned independently, bottom-right corner ---- */
.bte-video-section__tagline {
    display: none;
    position: absolute;
    right: var(--gutter);
    bottom: clamp(var(--space-16), 10vh, var(--space-24));
    z-index: 4;
    align-items: flex-start;
    gap: var(--space-4);
    max-width: 240px;
}

/* 2026-07-15 — product page video section only: product-video.php now
   forces a line break after "meet" so the standard tagline reads as 2
   lines (see the PHP comment there), but at the shared 240px max-width
   even the longer half ("excellent service and customer care.") would
   still wrap a second time and produce 3 lines overall. Scoped to
   #bte-product-video-section only, so the general/homepage version of
   this section (template-parts/sections/video.php) is untouched. */
#bte-product-video-section .bte-video-section__tagline {
    max-width: 340px;
}

@media (min-width: 1024px) {
    .bte-video-section__tagline { display: flex; }
}

.bte-video-section__tagline p {
    font-size: var(--text-md);
    line-height: 1.6;
    color: rgba(255,255,255,0.8);
}

.bte-video-section__tagline-divider {
    display: block;
    width: 3px;
    min-height: 56px;
    background-color: var(--bte-red);
    flex-shrink: 0;
    border-radius: 2px;
}

/* Mobile tagline — shown below video, back in normal flow */
@media (max-width: 1023px) {
    .bte-video-section__tagline {
        display: flex;
        position: relative;
        right: auto;
        bottom: auto;
        max-width: 100%;
        margin-top: var(--space-8);
        padding: 0 var(--gutter);
    }
    .bte-video-section__tagline-divider { display: none; }
}

/* ---- Video window (floating card) ---- */
.bte-video-section__window {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* No aspect-ratio here deliberately — the box is always full-
       section size (and the section is full-viewport while pinned).
       Growth is done via transform:scale (see bte-video.js), not
       clip-path or width/height — scale with the default centred
       transform-origin is mathematically guaranteed to expand
       symmetrically from the middle, avoiding the off-center growth
       that persisted across several clip-path-based fix attempts, and
       it's GPU-accelerated so it stays smooth on every scroll frame,
       unlike animating width/height/top/left directly. */
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    z-index: 5;

    /* will-change added (2026-07-12 perf fix) — this is the exact
       element GSAP scales via the pinned scroll animation (see
       bte-video.js). Without this hint the browser doesn't reliably
       promote it to its own compositor layer ahead of time, so the
       first few scaled frames can stutter while it catches up. */
    will-change: transform;

    /* Solid fallback tint for the rare case there's genuinely no
       poster/capture video at all. backdrop-filter: blur() used to
       sit here too ("glassmorphism-lite") but was removed (2026-07-12
       perf fix) — it sits BEHIND the poster/capture video (z-index 0
       vs this element's own background), so it was invisible in every
       normal case, yet still cost a real repaint on every frame this
       element's border-radius changed during the grow animation —
       part of what made the grow look jerky.
       */
    background-color: rgba(13, 18, 87, 0.7);

    box-shadow: var(--shadow-lg), var(--glow-teal);
    transition: box-shadow var(--dur-mid) var(--ease-out);
}

.bte-video-section__window:hover {
    /* transform removed — the scroll-linked grow effect (bte-video.js)
       now owns this element's transform via GSAP scrub; a CSS hover
       rule setting a different transform value would fight it */
    box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 60px rgba(0, 175, 255, 0.25);
}

/* ---- Poster image inside window ---- */
.bte-video-section__poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-mid);
}

.bte-video-section__window:hover .bte-video-section__poster {
    transform: scale(1.04);
    filter: brightness(0.75);
}

/* ---- Silent capture video — muted, looping, plays inline as the
   box grows during the pinned scroll (see bte-video.js). Sits behind
   the play button, which stays visible on top throughout so "Watch
   Full Video" remains available as an option, not forced. ---- */
.bte-video-section__capture {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---- Play button overlay ---- */
.bte-video-section__play-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: clamp(var(--space-12), 10vh, var(--space-24));
    gap: var(--space-4);
    background: transparent;
    color: var(--bte-white);
    cursor: pointer;
    transition: background-color var(--dur-mid);
}

.bte-video-section__play-btn::before {
    /* Dark vignette over poster for CTA legibility */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.5) 0%,
        rgba(0,0,0,0.15) 70%,
        transparent 100%
    );
    transition: opacity var(--dur-mid);
}

.bte-video-section__window:hover .bte-video-section__play-btn::before {
    opacity: 0.7;
}

.bte-video-section__play-icon {
    position: relative;
    z-index: 1;
    width: clamp(50px, 8vw, 80px);
    color: var(--bte-white);
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
    transition: transform var(--dur-mid) var(--ease-spring);
}

.bte-video-section__window:hover .bte-video-section__play-icon {
    transform: scale(1.12);
}

.bte-video-section__play-label {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bte-white);

    /* Skewed parallelogram, matching the standard bte_btn() shape,
       rather than the pill this used before */
    background-color: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 0.5em 1.4em 0.5em 1em;
    border-radius: var(--btn-radius, 6px);
    transform: skewX(calc(var(--btn-skew-deg, 12deg) * -1));

    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.bte-video-section__play-label-inner,
.bte-video-section__play-label::before {
    /* Counter-skew cancels the parent's skew exactly, same technique
       as .bte-btn__inner */
    display: inline-block;
    transform: skewX(var(--btn-skew-deg, 12deg));
}

.bte-video-section__play-label::before {
    content: '>';
    font-weight: 900;
    font-size: 1.35em;
    line-height: 1;
}

.bte-video-section__window:hover .bte-video-section__play-label {
    background-color: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
}

/* ---- Scroll indicator ---- */
.bte-video-section__scroll {
    position: absolute;
    bottom: var(--space-8);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* ============================================================
   VIDEO MODAL
   ============================================================ */

.bte-video-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.bte-video-modal[hidden] { display: none; }

/* Animate in */
.bte-video-modal.is-open .bte-video-modal__inner {
    animation: bte-modal-in 0.45s var(--ease-out) forwards;
}

@keyframes bte-modal-in {
    from { opacity: 0; transform: scale(0.94) translateY(16px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Backdrop */
.bte-video-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: -1;
    cursor: pointer;
}

/* Inner container */
.bte-video-modal__inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    background-color: var(--bte-navy);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    z-index: 1;
}

/* Close button */
.bte-video-modal__close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 10;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--bte-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}

.bte-video-modal__close:hover {
    background-color: var(--bte-red);
    transform: rotate(90deg);
}

/* Player wrap */
.bte-video-modal__player-wrap {
    position: relative;
    width: 100%;
}

/* Native video */
.bte-video-modal__video {
    width: 100%;
    display: block;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

/* YouTube / Vimeo iframe */
.bte-video-modal__iframe-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

.bte-video-modal__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- Custom controls (native video only) ---- */
.bte-video-modal__controls {
    background-color: var(--bte-navy);
    padding: 0 var(--space-6) var(--space-4);
}

/* Progress / scrubber */
.bte-video-modal__progress-wrap {
    position: relative;
    padding-block: var(--space-2);
    cursor: pointer;
}

.bte-video-modal__progress-bg {
    height: 3px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.bte-video-modal__progress-fill {
    height: 100%;
    background-color: var(--bte-red);
    width: 0%;
    border-radius: 2px;
    pointer-events: none;
    transition: width 0.1s linear;
}

.bte-video-modal__scrubber {
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    height: 100%;
}

/* Controls bar */
.bte-video-modal__controls-bar {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-2);
}

.bte-video-modal__ctrl-btn {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bte-white);
    opacity: 0.7;
    transition: opacity var(--dur-fast);
    padding: 0;
}

.bte-video-modal__ctrl-btn:hover { opacity: 1; }

.bte-video-modal__time {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.5);
    flex: 1;
    text-align: center;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .bte-video-section__window { transition: none; }
    .bte-video-section__poster { transition: none; }
    .bte-video-section__play-icon { transition: none; }
    .bte-video-modal.is-open .bte-video-modal__inner { animation: none; }
}


/* ============================================================
   INLINE SOUND TOGGLE (2026-07-19)
   Videos now play inline on the page and clicking toggles sound;
   this little speaker button sits in the corner and reflects the
   current muted/unmuted state (also togglable by clicking the video
   itself). Replaces the old "Watch Full Video" popup for MP4s.
   ============================================================ */
.bte-video-section__sound {
    position: absolute;
    right: clamp(var(--space-4), 2vw, var(--space-8));
    bottom: clamp(var(--space-4), 2vw, var(--space-8));
    z-index: 7;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: rgba(7, 9, 58, 0.45);
    color: var(--bte-white);
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background-color var(--dur-fast, 0.2s), transform var(--dur-fast, 0.2s), border-color var(--dur-fast, 0.2s);
}

.bte-video-section__sound:hover {
    background: var(--bte-red);
    border-color: var(--bte-red);
    transform: scale(1.06);
}

.bte-video-section__sound-icon { display: none; }
/* Muted (default): show the crossed-out speaker. */
.bte-video-section__sound-icon--off { display: block; }
/* Unmuted: swap to the sound-waves speaker. */
.is-sound-on .bte-video-section__sound-icon--off { display: none; }
.is-sound-on .bte-video-section__sound-icon--on { display: block; }


/* Inline play button (2026-07-19) — reuses the previous text-button
   design (.bte-video-section__play-btn), shown once the box is LOCKED
   full screen; restarts the video from the start with sound, on the
   page (no popup). Fades away again once it's playing with sound. */
.bte-video-section__replay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s var(--ease-out, ease);
}

.is-fullwidth .bte-video-section__replay {
    opacity: 1;
    pointer-events: auto;
}

.is-sound-on .bte-video-section__replay {
    opacity: 0;
    pointer-events: none;
}