/* ============================================================
   Bestie landing — VSL gate
   ------------------------------------------------------------
   The video-sales-letter stage that sits ON TOP of the landing
   page at `/`. While it is locked the rest of the page does not
   exist for the visitor: no scroll, no header, no hero. At the
   watch threshold the page unlocks and the phone shrinks into a
   floating mini-player so the VSL keeps playing while she reads.

   Loaded ONLY on the control page (never on /p2…/p5), so every
   selector here is inert everywhere else. Everything is prefixed
   `vsl-` and lives in its own file on purpose: landing.css and
   landing_base.css collide at equal specificity (base loads
   last), and this feature has no business joining that fight.

   Ported from the reference build (Igor Fagundes, 2026-08-24),
   re-skinned onto our own design tokens.
   ============================================================ */

/* Stage-local tokens. The palette deliberately reuses landing.css
   values where they exist — --rose and --plum are identical in
   both files — but this sheet must also stand alone if it ever
   loads first, so the fallbacks are spelled out. */
:root {
    --vsl-bg: #1B1017;          /* stage backdrop, darker than --plum-dark */
    --vsl-bg-lift: #35202C;     /* radial lift behind the phone */
    --vsl-rose: var(--rose, #A35E65);
    --vsl-rose-deep: var(--rose-deep, #8E4F56);
    --vsl-blush: var(--blush, #F0E4E0);
    --vsl-plum: var(--plum, #3A2330);
    --vsl-cream: var(--cream, #F9F4F2);
}

/* ── The lock ────────────────────────────────────────────────
   Server-rendered on <body>, removed by JS at the threshold.
   Two jobs: freeze the page, and hide everything that isn't the
   video. `hidden` on the wrapper would do the same, but a class
   keeps the decision in one place and lets <noscript> undo it. */
body.vsl-locked {
    overflow: hidden;
    height: 100%;
    overscroll-behavior: none;
}
body.vsl-locked .vsl-conteudo { display: none; }
/* The page behind the locked stage: iOS shows it in the rubber-band
   overscroll and under its own bars, so it must not flash white. */
body.vsl-locked { background: var(--vsl-bg); }
body.vsl-locked.vsl-tocando { background: #000; }
/* No JS means no gate — base.html carries a <noscript> block that
   undoes all three of the rules above, so the page is never a dead
   end for a crawler or a scripting-disabled browser. */

/* The stage toggles its own parts with the `hidden` attribute, and
   several of them declare display:flex further down — which would beat
   the browser's default `hidden` styling and leave the pause overlay
   and the nudges stacked on top of the video from the first frame. */
#vsl-palco [hidden] { display: none !important; }

/* ── Stage ───────────────────────────────────────────────── */

#vsl-palco {
    position: relative;
    z-index: 200;              /* over the sticky header (100) */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: max(16px, env(safe-area-inset-top)) 16px
             max(16px, env(safe-area-inset-bottom));
    background:
        radial-gradient(120% 90% at 50% 0%, var(--vsl-bg-lift) 0%, var(--vsl-bg) 62%),
        var(--vsl-bg);
}

/* ── Phone mockup ────────────────────────────────────────── */

.vsl-mockup {
    /* Width follows the viewport HEIGHT: 9/16 of 84% of the
       visible height, so the whole phone always fits without
       scrolling — which matters when scrolling is disabled. */
    width: min(94vw, calc(84dvh * 9 / 16), 430px);
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.vsl-moldura {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    padding: 11px;
    border-radius: 50px;
    background: linear-gradient(160deg, #2B2126 0%, #0B0709 46%, #241A20 100%);
    box-shadow:
        0 0 0 1.5px rgba(255, 255, 255, .10),
        0 30px 70px rgba(0, 0, 0, .55),
        0 0 90px rgba(163, 94, 101, .18);
}

/* Side buttons on the "handset" — pure decoration. */
.vsl-moldura::before,
.vsl-moldura::after {
    content: '';
    position: absolute;
    right: -2.5px;
    width: 2.5px;
    border-radius: 0 3px 3px 0;
    background: rgba(255, 255, 255, .16);
}
.vsl-moldura::before { top: 21%; height: 9%; }
.vsl-moldura::after  { top: 33%; height: 5%; }

.vsl-ilha {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 27%;
    height: 20px;
    border-radius: 20px;
    background: #050305;
    z-index: 3;
    pointer-events: none;
}

.vsl-tela {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

#vsl-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}

/* ── Cover, before the first play ────────────────────────── */

.vsl-capa {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px 22px;
    text-align: center;
    color: #fff;
    /* Opaque on purpose: the first frame of the VSL already has
       type on it, and letting it show through put two competing
       headlines on screen at once. */
    background-color: var(--vsl-bg);
    background-image:
        radial-gradient(88% 58% at 50% 26%, rgba(240, 228, 224, .16), transparent 68%),
        linear-gradient(180deg, #301E2A 0%, var(--vsl-bg) 52%, #140B10 100%);
    transition: opacity .5s ease, visibility .5s;
}
.vsl-capa.escondida { opacity: 0; visibility: hidden; }

.vsl-capa-logo { width: 108px; opacity: .95; margin-bottom: 6px; }

.vsl-capa-chamada {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(23px, 5.6vw, 30px);
    line-height: 1.18;
    margin: 0;
    letter-spacing: .2px;
    text-wrap: balance;        /* no orphan last line */
}

.vsl-btn-play {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 17px 30px;
    min-height: 60px;
    border: 0;
    border-radius: 100px;
    background: var(--vsl-rose);
    color: #fff;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;       /* the phone is narrow; never break the label */
    cursor: pointer;
    box-shadow: 0 12px 34px rgba(163, 94, 101, .45);
    transition: transform .15s ease, background .2s ease;
}
.vsl-btn-play:hover { background: var(--vsl-rose-deep); }
.vsl-btn-play:active { transform: scale(.97); }

.vsl-btn-play-icone {
    width: 0; height: 0;
    border-left: 15px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    margin-left: 3px;
}

/* Secondary "continue from 4:12" button, injected by JS. */
.vsl-btn-retomar {
    background: transparent;
    box-shadow: none;
    border: 1.5px solid rgba(255, 255, 255, .45);
    font-size: 14px;
    padding: 12px 22px;
    min-height: 48px;
    margin-top: 2px;
}
.vsl-btn-retomar:hover { background: rgba(255, 255, 255, .08); }

.vsl-capa-som {
    margin: 4px 0 0;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .62);
}

/* ── Tap layer + pause state ─────────────────────────────── */

.vsl-toque {
    position: absolute;
    inset: 0;
    z-index: 2;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.vsl-pausa {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: rgba(11, 7, 9, .55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    color: #fff;
    pointer-events: none;
    animation: vsl-aparecer .2s ease;
}
.vsl-pausa-icone {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    border: 2px solid rgba(255, 255, 255, .75);
}
.vsl-pausa-icone::after {
    content: '';
    position: absolute;
    top: 50%; left: 54%;
    transform: translate(-50%, -50%);
    border-left: 22px solid #fff;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
}
.vsl-pausa-texto {
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
}

@keyframes vsl-aparecer { from { opacity: 0 } to { opacity: 1 } }

/* ── Progress ring: traces the whole phone outline ───────── */

.vsl-anel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease;
}
.vsl-anel.visivel { opacity: 1; }

/* Two identical rects: one is the track, one is the progress. */
.vsl-anel rect {
    x: 3.5px;
    y: 3.5px;
    width: calc(100% - 7px);
    height: calc(100% - 7px);
    rx: 46.5px;
    ry: 46.5px;
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
}
.vsl-anel-trilho { stroke: rgba(255, 255, 255, .13); }
.vsl-anel-linha {
    stroke: var(--vsl-blush);
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: drop-shadow(0 0 5px rgba(240, 228, 224, .55));
}

/* ── Hint + "almost there" nudge ─────────────────────────── */

.vsl-dica {
    margin: 0;
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .40);
    text-transform: lowercase;
}

.vsl-quase {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 240;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 100px;
    background: rgba(249, 244, 242, .94);
    color: var(--vsl-plum);
    font-family: 'Montserrat', system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.vsl-quase span {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--vsl-rose);
    animation: vsl-pulsar 1.6s ease-in-out infinite;
}
@keyframes vsl-pulsar { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ── Phones: the video fills the screen once it is playing ──
   The handset mockup is the cover's stage. From the first play the
   frame goes away and the video takes the whole viewport: on a phone
   the bezel was only shrinking a 9:16 video that is already the shape
   of the screen. The tap layer, pause overlay and progress ring are
   children of the frame, so they come along unchanged. Done in CSS,
   not with the fullscreen API: iOS hands a fullscreen video to its own
   player, with a scrubber, which is exactly the control the gate must
   not offer.

   `:not(.flutuando)` everywhere, because the mini-player must still
   shrink the same element back into the corner after the unlock. */
@media (max-width: 640px) {
    /* Plain black behind the playing video: the bands above and below
       it should read as the video's own letterbox, not as the stage. */
    #vsl-palco.vsl-tocando { padding: 0; gap: 0; background: #000; }
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) {
        width: 100vw;
        max-width: none;
    }
    /* Anchored on the WIDTH: the video spans the screen edge to edge and
       keeps its 9:16 shape, so nothing is cropped off the sides — the
       captions sit right at the edges of the frame. On a taller phone
       that leaves a dark band above and below, which the stage's
       centring absorbs. */
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-moldura {
        padding: 0;
        border-radius: 0;
        box-shadow: none;
    }
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-moldura::before,
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-moldura::after,
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-ilha { display: none; }
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-tela { border-radius: 0; }
    /* The ring now runs along the screen edge instead of the bezel. */
    #vsl-palco.vsl-tocando .vsl-mockup:not(.flutuando) .vsl-anel rect {
        x: 2px; y: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        rx: 0; ry: 0;
    }
    /* No room below a full-screen video for the hint. */
    #vsl-palco.vsl-tocando .vsl-dica { display: none; }
}

/* ── Mini-player: after unlocking, on scroll ─────────────── */

.vsl-mockup.flutuando {
    position: fixed;
    right: 16px;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 260;
    width: 141px;
}
.vsl-mockup.flutuando .vsl-moldura { padding: 5px; border-radius: 26px; }
.vsl-mockup.flutuando .vsl-tela { border-radius: 22px; }
.vsl-mockup.flutuando .vsl-ilha { display: none; }
.vsl-mockup.flutuando .vsl-anel rect {
    x: 2px; y: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    rx: 24px; ry: 24px;
    stroke-width: 2.5;
}

.vsl-fechar {
    position: absolute;
    top: -10px; right: -10px;
    z-index: 5;
    width: 32px; height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--vsl-cream);
    color: var(--vsl-plum);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

/* Once the stage has done its job it must not keep a full screen
   of dark background between the mini-player and the page. */
#vsl-palco.vsl-recolhido {
    min-height: 0;
    padding: 0;
    background: none;
}

/* The page slides up over the stage as it is revealed. */
.vsl-conteudo { position: relative; z-index: 10; }
body.vsl-destravou .vsl-conteudo { animation: vsl-subir .7s cubic-bezier(.22, .61, .36, 1); }

@keyframes vsl-subir {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .vsl-mockup,
    .vsl-capa,
    .vsl-anel { transition: none; }
    body.vsl-destravou .vsl-conteudo { animation: none; }
    .vsl-quase span { animation: none; }
}