/* ============================================================
   AR Player Controls Bar — Card A
   Auto-hide bottom bar, MUI-style fade transition.
   ============================================================ */

/* v60 CANVAS STYLING: Three.js renderer.domElement appended to body has no
   default size/position. On desktop, the canvas would render at default
   300x150px and sit in document flow (NOT visible because <body> is black).
   On Quest 3 (XR session), the canvas displays the stereo video domes —
   visible and full-screen.
   v60 default: HIDE the canvas on desktop (display:none), show only when
   XR session is active (body.xr-mode class added by player.js).
   On desktop, the user sees the <video> element directly. */

canvas {
    display: none;
}
body.xr-mode canvas {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 5;
}

/* v60 VIDEO ELEMENT: visible on desktop (above the controls bar), hidden
   when XR session takes over. The video element is the texture source for
   the Three.js domes, but on desktop we just show it directly. */
.sbs-video {
    display: block;
    /* v83.2 (2026-09-25): position absolute (was fixed). Fixed made the
       video follow scroll past the player wrapper on real post pages —
       nice for /test/ (short page, no scroll) but jarring on production.
       Absolute pins the video inside .ar-player-wrapper so it scrolls
       normally with the rest of the content. top:50%/left:50%/
       translate(-50%,-50%) still centers it inside the wrapper. */
    position: absolute;
    top: 50%;
    left: 50%;
    /* v65 (2026-09-25): element box is 1:1, object-fit: cover scales the
       2:1 SBS source to fill the box (zooms 2x horizontally), object-position:
       left aligns to the left edge so the left half of the source is visible.
       Result: left 1:1 SBS half shown at viewport center.

       v82 (2026-09-25): removed the clip-path belt-and-suspenders — applying
       clip-path on top of the already-square element cropped the box in half
       vertically (square minus right 50% = tall rectangle), making the video
       look stretched. object-fit+object-position alone render the correct
       square SBS half. Tested on /test/test-video-1-alpha.html (still using
       pre-v66 CSS) and confirmed: clean square, no double-crop. */
    transform: translate(-50%, -50%);
    /* v83 (2026-09-25): shrink player further 60vh → 45vh. After v82
       fixed the clip-path double-crop, Scott still wanted it smaller —
       45vh is a comfortable size that leaves plenty of viewport for
       related-posts and sidebar content below. Still 1:1 (aspect-ratio)
       so the SBS-half crop stays correct. */
    width: min(45vh, 90vw);
    height: min(45vh, 90vw);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: left center;
    background: #000;
    z-index: 1;
}

/* v83.6 (2026-09-25): in fullscreen mode, keep the SBS-half layout
   (1:1 square centered, left half of the source visible) but scale
   UP to fill the fullscreen window. v83.6.1 (same session, minutes
   later): Scott clarified "still half the screen centerd like how it
   is normally on desktop, I just want it to scale up to whatever the
   full screen size is" — i.e. preserve the layout, just raise the
   size cap. Switch the cap from min(45vh, 90vw) → min(100vh, 100vw)
   so the 1:1 square grows as large as the fullscreen window allows
   (on a 1920×1080 fullscreen that becomes a 1080×1080 square centered
   in the window with letterbox bars on the left+right edges). The
   1:1 aspect-ratio, object-fit:cover, and object-position:left-center
   rules stay identical to normal mode — so the SBS-left-half crop,
   centering, and cover-fit are exactly preserved, just bigger. */
:fullscreen .sbs-video,
.webkit-full-screen .sbs-video,
:-webkit-full-screen .sbs-video {
    width: min(100vh, 100vw);
    height: min(100vh, 100vw);
}

body.xr-mode .sbs-video {
    display: none;
}

/* Debug panel — permanently visible in /test/, large readable text.
   Shows session state, error messages, pointer pose, etc. */
#debug {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-height: 45vh;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.92);
    color: #00ff88;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 1.4rem;
    line-height: 1.4;
    padding: 0.75rem 1rem;
    white-space: pre-wrap;
    word-break: break-word;
    z-index: 9999;
    pointer-events: none;
    border-bottom: 3px solid #00ff88;
}
#debug .err { color: #ff5252; font-weight: bold; }
#debug .warn { color: #ffb84d; }


.ar-player-wrapper {
    position: relative;
    width: 100%;
    /* FIX (2026-09-23): wrapper needs explicit min-height or it collapses
       to 0 (no in-flow children with intrinsic height), which pins the
       position:absolute controls bar to the top of the page on Quest.
       v83 (2026-09-25): 100vh → 70vh → 55vh. The video element is
       position:fixed so it overlays regardless, but the wrapper still
       sizes the in-page layout space (where the controls bar and poster
       live). 55vh leaves ~45vh for related-posts / sidebar while keeping
       the controls bar within the viewport. */
    min-height: 55vh;
    display: block;
}

.ar-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;          /* v59: 20% (was 0.75) */
    padding: 0.9rem 1.2rem; /* v59: 20% (was 0.75/1.0) */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.14rem;   /* v59: 20% (was 0.95) */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    z-index: 10;
    box-sizing: border-box;
}

/* Auto-hide disabled during testing (re-enable when shipping).
   The .visible class is still respected as a no-op for compatibility. */
.ar-controls.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.ar-controls button {
    background: transparent;
    border: none;
    color: #fff;
    padding: 0.30rem 0.54rem;  /* v59: scaled 20% (was 0.25/0.45) */
    border-radius: 0.36rem;    /* v59: 20% (was 0.3) */
    cursor: pointer;
    font-size: 0.9rem;         /* v59: 20% (was 0.75) */
    line-height: 1;
    transition: background 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ar-controls button:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* v58 SVG button icons: <img class="btn-icon"> inside each button.
   v59: scaled 20% larger per Scott (28px -> 34px). */
.ar-controls .btn-icon {
    width: 34px;   /* v59: 20% larger (was 28px) */
    height: 34px;
    display: block;
    pointer-events: none;  /* let click fall through to the button */
}

/* v58 PROGRESS BAR: <input type="range">. v58 removed max-width so it fills
   remaining space. v59: bar + thumb scaled 20% per Scott. */
.ar-controls .ar-progress {
    flex: 1 1 auto;
    min-width: 60px;
    height: 7px;     /* v59: 20% larger (was 6px) */
    margin: 0 0.6rem;  /* v59: 20% (was 0.5) */
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;  /* v59: 20% (was 3) */
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.ar-controls .ar-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 17px;     /* v59: 20% (was 14px) */
    height: 17px;
    border-radius: 50%;
    background: #9C5BBA;
    cursor: pointer;
    border: none;
}
.ar-controls .ar-progress::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #9C5BBA;
    cursor: pointer;
    border: none;
}
.ar-controls .ar-progress:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ar-controls button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ar-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ar-controls button.primary {
    background: #00ba2c;          /* v59: green per Scott (was #e74e6c red) */
    border-color: #00ba2c;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1.0rem;       /* v59: 20% (was 0.42/0.85) */
    font-size: 0.96rem;           /* v59: 20% (was 0.8) */
}

.ar-controls button.primary:hover {
    background: #00a327;           /* v59: darker green on hover */
}

.ar-controls .ar-time {
    font-variant-numeric: tabular-nums;
    font-size: 0.84rem;           /* v59: 20% (was 0.7) */
    opacity: 0.85;
    min-width: 5rem;              /* v59: 20% (was 4) */
}

/* Card B stub: projection toggle visible only in immersive mode */
.ar-controls button.projection-toggle {
    display: none;
}

/* v58: removed the DOM Exit AR button entirely. Desktop has no XR to exit,
   and the existing XR session-end handler still cleans up properly. */
.ar-controls button.exit-ar {
    display: none;
}

/* v52 IMMERSIVE MODE: in XR, drop the stop/projection button (does nothing useful).
   Per Scott: play/pause toggle + X (exit AR) is enough inside XR. */
.ar-controls.immersive-mode button.stop-btn,
.ar-controls.immersive-mode button.proj-btn {
    display: none;
}

/* Mobile: tighter button spacing so progress bar can be longer */
@media (max-width: 600px) {
    .ar-controls {
        padding: 0.55rem 0.7rem;     /* v63: trim from 0.6/0.8 */
        gap: 0.32rem;                /* v63: tighter (was 0.48) */
        font-size: 1.02rem;          /* v59: 20% (was 0.85) */
    }
    .ar-controls button {
        padding: 0.28rem 0.5rem;     /* v63: trim horizontal padding (was 0.34/0.6) */
        font-size: 0.84rem;          /* v59: 20% (was 0.7) */
    }
    .ar-controls button.primary {   /* v63: Enter AR — trim padding, keep on one line */
        padding: 0.28rem 0.55rem;
        font-size: 0.78rem;
        white-space: nowrap;
    }
    .ar-controls .ar-progress {
        min-width: 50px;
        max-width: none;
        flex: 1 1 auto;              /* v63: let it grab the extra room */
        margin: 0 0.3rem;            /* v63: tighter (was 0.6rem) */
        height: 6px;                 /* v63: trim thumb height to match tighter bar */
    }
    .ar-controls .ar-time {
        min-width: 3.5rem;           /* v63: shrink slightly (was 5rem desktop) */
        font-size: 0.78rem;
    }
    .ar-controls #btnFs {
        display: none;               /* v63.8: hide fullscreen on mobile — iOS
                                       Safari doesn't support requestFullscreen
                                       on divs anyway, and the button eats
                                       ~27px we can give to the progress bar */
    }
}

/* v62.2 DEBUG OVERRIDE: make sure .sbs-video CSS is applied — force
   width: 50vw with !important and explicit object-position. If the user
   is still seeing both halves, it's a browser cache or the video element
   is rendering before CSS loads. */

/* ============================================================
   AR Player Thumbnail Poster (v64, 2026-09-25)
   Cover-style poster shown before user clicks play. Reads data-poster
   from .ar-player-wrapper (set by PHP from WP Featured Image).
   ============================================================ */
.ar-player-wrapper .ar-poster-overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 5;            /* above .sbs-video (no z-index), below .ar-controls (z-index: 10) */
    transition: opacity 0.4s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ar-player-wrapper .ar-poster-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* v80.1: purple SVG play icon overlaid on the poster. When the JS inserts
   an <img class="poster-play-icon"> we hide the CSS triangle (::after) so
   the brand-purple SVG icon is the only play button shown. Size matches
   a thumb-friendly tap target (72px circle) — the svg itself is 128px
   but rendered at 72px here. */
.ar-player-wrapper .ar-poster-overlay:has(.poster-play-icon)::after {
    display: none;
}

.ar-player-wrapper .ar-poster-overlay .poster-play-icon {
    width: 72px;
    height: 72px;
    pointer-events: none;  /* let click fall through to the overlay */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
    transition: transform 0.2s ease-out;
}

.ar-player-wrapper .ar-poster-overlay:hover .poster-play-icon {
    transform: scale(1.08);
}

/* Fallback for legacy wrappers without data-theme-url (no <img> injected):
   keep the original pink circle + white triangle. */
.ar-player-wrapper .ar-poster-overlay::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 22px 0 22px 36px;
    border-color: transparent transparent transparent #fff;
    padding: 1.1rem 1.4rem;
    border-radius: 50%;
    background-color: rgba(231, 78, 108, 0.95);
    background-clip: padding-box;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease-out, background-color 0.2s ease-out;
}

.ar-player-wrapper .ar-poster-overlay:hover::after {
    transform: scale(1.08);
    background-color: rgba(231, 78, 108, 1);
}

/* When XR session is active, hide the poster (XR mode shows the domes instead) */
body.xr-mode .ar-poster-overlay {
    display: none;
}
