/* ═══════════════════════════════════════════
   now-streaming — beat 6: still-watching (The Check-in)

   The service pauses to ask whether the recipient is still here. Two
   answers, both yes; either one opens the director's note, a midnight
   sheet of gold script written in line by line. Then "Roll the credits",
   a fold, black, and one warm point of light.

   Layers inside the container (all position: absolute over the stage box):
     .still-watching-frame   the paused frame: the last photo, dimmed 70%
     .still-watching-card    the check-in card (kicker, question, answers, reply)
     .still-watching-band    the note sheet's band (top clear of the mute pill,
                             bottom clear of the button and the badge band)
     .still-watching-roll    "Roll the credits", 92 px above the bottom edge
     .still-watching-exit    black, and the warm point of light

   Play-state classes live on #still-watching-container (still-watching--*),
   toggled by the beat's cues; boot never recreates the elements they style.
   No filter, no backdrop-filter, no mix-blend-mode.
   ═══════════════════════════════════════════ */

.still-watching-container {
    position: absolute;
    inset: 0;
    color: var(--text-primary);
    font-family: var(--font-body);
    pointer-events: none;
}

/* Entry states are applied instantly (prepare on goto), never animated in. */
.still-watching-instant,
.still-watching-instant *,
.still-watching-instant *::before,
.still-watching-instant *::after {
    transition: none !important;
    animation: none !important;
}

/* ───── 1. The paused frame ─────
   Overscanned so the camera's step back (z -40) never shows an edge. */
.still-watching-frame {
    position: absolute;
    inset: -8%;
    background: var(--screen-bg);
    background-color: var(--void);
}

.still-watching-still {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.still-watching-still-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.still-watching-dim {
    position: absolute;
    inset: 0;
    background: var(--void);
    opacity: 0;
    transition: opacity 1.4s var(--ease-silk);
}

.still-watching-container.still-watching--arrived .still-watching-dim {
    opacity: 0.7;
}

/* While the note is read the room goes a little quieter still. */
.still-watching-container.still-watching--sheet .still-watching-dim {
    opacity: 0.78;
    transition-duration: 2s;
}

/* ───── 2. The check-in card ───── */
.still-watching-card {
    position: absolute;
    left: 50%;
    top: 47%;
    width: min(86vw, 24rem);
    box-sizing: border-box;
    padding: 28px 20px 22px;
    border: 1px solid var(--gilt-line);
    border-radius: 18px;
    background: var(--plaque-fill);
    box-shadow: var(--plaque-inset);
    text-align: center;
    transform: translate(-50%, -50%);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.45s var(--ease-silk),
        transform 1s var(--ease-silk),
        visibility 0s linear 1s;
}

.still-watching-container.still-watching--card .still-watching-card {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.45s var(--ease-silk),
        transform 1s var(--ease-silk),
        visibility 0s;
}

/* 8.0 s: the card exhales into the sheet (a plain cross-fade). */
.still-watching-container.still-watching--sheet .still-watching-card {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.97);
    transition:
        opacity 1s var(--ease-silk),
        transform 1.2s var(--ease-silk),
        visibility 0s linear 1.2s;
}

/* The card's breath: a glow under its edge, opacity only (5.0 s on). */
.still-watching-card-glow {
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: 0 0 36px rgba(232, 168, 124, 0.22), inset 0 0 0 1px var(--gilt-line-strong);
    opacity: 0;
    pointer-events: none;
}

.still-watching-container.still-watching--breathing .still-watching-card-glow {
    animation: still-watching-breathe 4s var(--ease-breath) infinite alternate;
}

/* Parked once the card is gone. */
.still-watching-container.still-watching--sheet .still-watching-card-glow {
    animation: none;
    opacity: 0;
}

@keyframes still-watching-breathe {
    from { opacity: 0.25; }
    to { opacity: 0.85; }
}

.still-watching-head {
    position: relative;
    opacity: 0;
    transition: opacity 0.3s var(--ease-silk);
}

.still-watching-container.still-watching--card .still-watching-head {
    opacity: 1;
}

.still-watching-kicker {
    margin: 0 0 14px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.74rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.still-watching-question {
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 6.4vw, 1.8rem);
    line-height: 1.3;
    color: var(--text-primary);
    overflow-wrap: break-word;
}

.still-watching-label {
    color: var(--accent-warm-bright);
}

/* The answers: equal in weight, both gilt-outlined, neither filled. */
.still-watching-answers {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.still-watching-answer {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 56px;
    padding: 0 10px;
    border: 1px solid var(--btn-ghost-border);
    border-radius: 999px;
    background: var(--btn-ghost-fill);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.86rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.3s var(--ease-silk),
        background-color 0.18s var(--ease-snap),
        border-color 0.18s var(--ease-snap),
        color 0.18s var(--ease-snap),
        box-shadow 0.18s var(--ease-snap);
}

/* Inert until the hold `answer` (6 s): disabled, but drawn the same. */
.still-watching-answer:disabled {
    cursor: default;
}

.still-watching-container.still-watching--answer-1 .still-watching-answer-a,
.still-watching-container.still-watching--answer-2 .still-watching-answer-b {
    opacity: 1;
    visibility: visible;
}

.still-watching-container.still-watching--armed .still-watching-answer {
    pointer-events: auto;
}

.still-watching-answer:focus-visible,
.still-watching-roll:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* The pressed answer lights (snap); the other dims. */
.still-watching-answer.still-watching-answer--picked {
    border-color: var(--gilt-line-strong);
    background-color: rgba(232, 168, 124, 0.2);
    color: var(--accent-warm-bright);
    box-shadow: 0 0 26px rgba(232, 168, 124, 0.35), inset 0 0 0 1px rgba(242, 196, 160, 0.4);
}

.still-watching-container .still-watching-answer.still-watching-answer--dimmed {
    opacity: 0.32;
    transition: opacity 0.4s var(--ease-silk);
}

.still-watching-reply {
    min-height: 1.4em;
    margin: 18px 0 0;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.1rem, 4.8vw, 1.3rem);
    line-height: 1.35;
    color: var(--accent-warm-bright);
    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity 0.6s var(--ease-silk),
        transform 0.8s var(--ease-expo-out);
}

/* 0.2 s after the release. */
.still-watching-container.still-watching--answered .still-watching-reply {
    opacity: 1;
    transform: none;
    transition-delay: 0.2s;
}

/* ───── The ghost drop-in: two echoes converge on the real element ─────
   Clones made at the cue (aria-hidden, ids and data-config stripped),
   removed on animationend. Transform and opacity only. */
.still-watching-echo {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.still-watching-echo.still-watching-echo-1 {
    animation: still-watching-ghost-1 var(--ghost-ms, 600ms) var(--ease-expo-out) forwards;
}

.still-watching-echo.still-watching-echo-2 {
    animation: still-watching-ghost-2 var(--ghost-ms, 600ms) var(--ease-expo-out) forwards;
}

.still-watching-answer .still-watching-echo {
    display: flex;
    align-items: center;
    justify-content: center;
    inset: -1px;
    border: 1px solid var(--btn-ghost-border);
    border-radius: inherit;
}

@keyframes still-watching-ghost-1 {
    0% { transform: translateY(var(--ghost-offset-1, -9px)); opacity: var(--ghost-alpha-1, 0.34); }
    75% { opacity: var(--ghost-alpha-1, 0.34); }
    100% { transform: none; opacity: 0; }
}

@keyframes still-watching-ghost-2 {
    0% { transform: translateY(var(--ghost-offset-2, -18px)); opacity: var(--ghost-alpha-2, 0.16); }
    75% { opacity: var(--ghost-alpha-2, 0.16); }
    100% { transform: none; opacity: 0; }
}

/* ───── 3. The note from the director ─────
   The band keeps the sheet clear of the mute pill above and of "Roll the
   credits" and the badge band below. The sheet's height follows its text
   (40vh at the least, the band at the most); it is centred in the band,
   or set at its top when the writing would otherwise pass 62%. */
.still-watching-band {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(max(60px, 8.5%) + env(safe-area-inset-top, 0px));
    bottom: calc(164px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.still-watching-container.still-watching--top .still-watching-band {
    justify-content: flex-start;
}

.still-watching-sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(92vw, 30rem);
    min-height: min(40vh, 100%);
    max-height: 100%;
    box-sizing: border-box;
    padding: 18px 0 6px;
    border: 1px solid var(--note-edge);
    border-radius: 18px;
    background: var(--note-fill);
    box-shadow: 0 24px 60px rgba(5, 5, 17, 0.6), inset 0 1px 0 rgba(242, 196, 160, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(36px);
    transform-origin: 50% 100%;
    pointer-events: none;
    transition:
        opacity 1.2s var(--ease-silk),
        transform 1.4s var(--ease-expo-out),
        visibility 0s linear 1.4s;
}

/* 8.0 s: the sheet rises. */
.still-watching-container.still-watching--sheet .still-watching-sheet {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition:
        opacity 1.2s var(--ease-silk),
        transform 1.4s var(--ease-expo-out),
        visibility 0s;
}

/* The roll: the sheet folds down and dims (1.8 s). */
.still-watching-container.still-watching--rolled .still-watching-sheet {
    opacity: 0.12;
    transform: perspective(900px) translateY(10%) rotateX(64deg) scaleY(0.92);
    pointer-events: none;
    transition:
        opacity 1.8s var(--ease-silk),
        transform 1.8s var(--ease-stage);
}

.still-watching-sheet-head {
    flex: none;
    padding: 0 22px 12px;
    text-align: center;
    border-bottom: 1px solid var(--gilt-line);
}

.still-watching-sheet-kicker,
.still-watching-sheet-name {
    margin: 0;
    font-family: var(--font-body);
    text-transform: uppercase;
}

.still-watching-sheet-kicker {
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--text-secondary);
}

.still-watching-sheet-name {
    margin-top: 6px;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    color: var(--accent-warm-bright);
    overflow-wrap: anywhere;
}

/* The writing window: hidden overflow (the module scrolls it) until the
   note is written, then a real scroller, pan-y only. */
.still-watching-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}

.still-watching-container.still-watching--reading .still-watching-scroll {
    overflow-y: auto;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

.still-watching-page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    box-sizing: border-box;
    padding: 16px 24px 14px;
}

.still-watching-container.still-watching--top .still-watching-page {
    justify-content: flex-start;
}

.still-watching-body {
    flex: none;
    font-family: var(--font-script);
    font-weight: 400;
    font-size: clamp(1.45rem, 6.2vw, 1.9rem);
    line-height: 1.55;
    color: var(--note-ink);
    text-shadow: 0 0 14px var(--note-ink-glow);
    text-align: left;
    overflow-wrap: anywhere;
}

/* A one-line note sits centred. */
.still-watching-body.still-watching-body--short {
    text-align: center;
}

.still-watching-para + .still-watching-para {
    margin-top: 0.5em;
}

/* The layout pass's measuring rig: each word (and each glyph of a long
   one) on its own, in the body's font, invisible, removed straight after. */
.still-watching-measure {
    position: absolute;
    left: 0;
    top: 0;
    visibility: hidden;
    pointer-events: none;
}

.still-watching-meas {
    display: inline-block;
    white-space: pre;
}

/* Before the layout pass: the buyer's hard lines, wrapping freely. */
.still-watching-hard {
    display: block;
}

/* After it: one laid-out line each, never re-wrapped. */
.still-watching-line {
    display: block;
    min-height: 1.55em;
    white-space: nowrap;
}

/* Unwritten: clipped away to the left edge. The wipe (a Web Animation,
   no per-frame style writes) opens it left to right; a written line rests
   on the attribute. The insets overhang so Pinyon's flourishes are never cut. */
.still-watching-ink {
    display: inline-block;
    clip-path: inset(-0.6em calc(100% + 0.8em) -0.6em -0.8em);
}

.still-watching-line[data-ink="done"] .still-watching-ink {
    clip-path: none;
}

/* Blank paper under the last line, so it too can rise to 62%. */
.still-watching-tail {
    display: block;
    flex: none;
    height: var(--still-watching-tail, 0px);
}

/* ───── 4. Roll the credits ───── */
.still-watching-roll {
    position: absolute;
    left: 50%;
    bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    min-height: 56px;
    max-width: calc(100% - 48px);
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: var(--btn-fill);
    color: var(--btn-ink);
    box-shadow: var(--btn-shadow);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition:
        opacity 0.8s var(--ease-silk),
        transform 0.9s var(--ease-expo-out),
        visibility 0s linear 0.9s;
}

/* The pill's rounded corners are hit-tested as outside it; an invisible
   square layer makes its whole box the button's (a tap on a corner is a
   tap on the button, never on the screen behind). It follows the button's
   pointer-events, so it takes nothing until the hold `roll`. */
.still-watching-roll::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: transparent;
}

.still-watching-container.still-watching--roll .still-watching-roll {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition:
        opacity 0.8s var(--ease-silk),
        transform 0.9s var(--ease-expo-out),
        visibility 0s;
}

.still-watching-container.still-watching--rolled .still-watching-roll {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-snap);
}

/* ───── 5. The exit: black, and a warm point of light ───── */
.still-watching-exit {
    position: absolute;
    inset: -10%;
    pointer-events: none;
}

.still-watching-black {
    position: absolute;
    inset: 0;
    background: var(--void);
    opacity: 0;
    transition: opacity 1.5s var(--ease-silk);
}

.still-watching-container.still-watching--black .still-watching-black {
    opacity: 1;
}

.still-watching-point {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--light-core) 0%, var(--accent-warm-bright) 38%, rgba(232, 168, 124, 0) 72%);
    box-shadow: 0 0 28px 10px var(--halo), 0 0 90px 34px var(--halo-far);
    opacity: 0;
    transform: scale(0.3);
    transition:
        opacity 1s var(--ease-silk),
        transform 1.2s var(--ease-expo-out);
}

.still-watching-container.still-watching--light .still-watching-point {
    opacity: 1;
    transform: none;
}

/* ───── Reduced motion: every step still plays, calmly ─────
   The ghost is a fade, the reply and the sheet cross-fade, each line fades
   in whole (0.4 s, from the module) with no wipe, nothing breathes, and
   the roll dims the sheet in place. The camera no-ops by itself. */
@media (prefers-reduced-motion: reduce) {
    .still-watching-echo {
        display: none;
    }

    .still-watching-head,
    .still-watching-answer {
        transition-duration: 0.6s;
    }

    .still-watching-container.still-watching--breathing .still-watching-card-glow {
        animation: none;
        opacity: 0.5;
    }

    .still-watching-reply,
    .still-watching-container.still-watching--answered .still-watching-reply {
        transform: none;
    }

    .still-watching-card,
    .still-watching-container.still-watching--sheet .still-watching-card {
        transform: translate(-50%, -50%);
    }

    .still-watching-sheet,
    .still-watching-container.still-watching--sheet .still-watching-sheet,
    .still-watching-container.still-watching--rolled .still-watching-sheet {
        transform: none;
    }

    .still-watching-roll,
    .still-watching-container.still-watching--roll .still-watching-roll {
        transform: translate(-50%, 0);
    }

    .still-watching-point,
    .still-watching-container.still-watching--light .still-watching-point {
        transform: none;
    }

    .still-watching-ink {
        clip-path: none;
        opacity: 0;
    }

    .still-watching-line[data-ink="done"] .still-watching-ink {
        opacity: 1;
    }
}