/**
 * HAC Explainer — Threshold Sequence Styles
 *
 * Covers the intro (door-frame crossfade + Ken-Burns scale) and outro
 * (frame 05 fade-in/hold/fade-out) sequences. All transitions use the
 * two atmospheric easing curves defined below.
 *
 * Layer order inside .hac-explainer-root (z-index ascending):
 *   .hac-explainer-backdrop         (existing; opacity 0 during threshold)
 *   .hac-explainer-threshold        (this file; sits above backdrop)
 *   .hac-explainer-shell-mount      (existing; above threshold during stage 4)
 */

/* ── Design tokens ──────────────────────────────────────────────────────────── */

:root {
    /* Easing curves */
    --ease-atmosphere:    cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-threshold:     cubic-bezier(0.33, 0.0, 0.67, 1);

    /* Threshold palette — reserved for future use; no active rules in v1 */
    --threshold-black:      #000;
    --threshold-warm-deep:  #4a3a18;
    --threshold-warm-mid:   #b08a3a;
    --threshold-warm-glow:  #f5dc8e;
}

/* ── Threshold container ────────────────────────────────────────────────────── */

.hac-explainer-threshold {
    position:         fixed;
    inset:            0;
    z-index:          10;           /* Above backdrop (z:1), below shell-mount (z:20) */
    pointer-events:   none;
    transform-origin: 50% 55%;     /* Slightly below center — floor recedes */
    transform:        scale(1);
    transition:       transform 400ms var(--ease-threshold);
    will-change:      transform;
}

/* ── Black hold layer ───────────────────────────────────────────────────────── */

.hac-threshold-black {
    position:         absolute;
    inset:            0;
    background:       var(--threshold-black);
    opacity:          1;
    transition:       opacity 400ms var(--ease-atmosphere);
    z-index:          1;
}

.hac-threshold-black--fading-out {
    opacity: 0;
    pointer-events: none;
}

/* ── Frame layers ───────────────────────────────────────────────────────────── */

.hac-threshold-frame {
    position:            absolute;
    inset:               0;
    background-size:     cover;
    background-position: center 55%;
    background-repeat:   no-repeat;
    opacity:             0;
    transition:          opacity 80ms linear;
    z-index:             2;
}

/* Hidden — not participating */
.hac-threshold-frame--hidden {
    opacity:        0;
    pointer-events: none;
}

/* Fading in — opacity 0 → 1 over 80ms */
.hac-threshold-frame--fading-in {
    opacity: 1;
}

/* Fully visible */
.hac-threshold-frame--current {
    opacity: 1;
}

/* Fading out — opacity 1 → 0 */
.hac-threshold-frame--fading-out {
    opacity: 0;
}

/* ── Outro-specific frame states (frame 05 only) ────────────────────────────── */

/* Outro entering: fades from 0 to 0.6 over 500ms */
.hac-threshold-frame--outro-entering {
    opacity:    0.6;
    transition: opacity 500ms var(--ease-atmosphere);
}

/* Outro at full opacity */
.hac-threshold-frame--outro-full {
    opacity:    1;
    transition: opacity 300ms var(--ease-atmosphere);
}

/* Outro exiting: fades from 1 to 0 over 700ms */
.hac-threshold-frame--outro-exiting {
    opacity:    0;
    transition: opacity 700ms var(--ease-atmosphere);
}

/* Reduced-motion fade variant: simple 200ms fade-in */
.hac-threshold-frame--reduced-motion-fade {
    opacity:    1;
    transition: opacity 200ms linear;
}

/* ── Intro video ────────────────────────────────────────────────────────────── */

/* The threshold intro plays as a single <video> element. Sits beneath the
   black layer (z-index 0) so the black covers it until the 'playing' event
   triggers the black fade-out. object-fit:cover matches the door imagery
   to the full container regardless of aspect-ratio mismatch.            */
.hac-threshold-video {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    object-position: center 55%;
    z-index:    0;
    background: var(--threshold-black);
    /* Disable user controls / interaction; the video is decorative */
    pointer-events: none;
}

/* Fade-out class applied after the 'ended' event so the slide can emerge
   without the final frame popping away abruptly. */
.hac-threshold-video--fading-out {
    opacity:    0;
    transition: opacity 400ms var(--ease-atmosphere);
}

/* ── Reduced-motion overrides ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .hac-explainer-threshold {
        transition: none;
    }

    .hac-threshold-black {
        transition: opacity 400ms linear;
    }

    .hac-threshold-frame {
        transition: opacity 400ms linear;
    }

    .hac-threshold-frame--outro-entering,
    .hac-threshold-frame--outro-full,
    .hac-threshold-frame--outro-exiting {
        transition: opacity 200ms linear;
    }
}

/* ── Shell visibility during threshold ──────────────────────────────────────── */
/*
   The shell-mount (and its dark-card child) must be invisible during the intro
   so the door-frame sequence plays against the dimmed APC, not against a blank
   dark card. The body class .hac-explainer-state-threshold-opening is applied
   by explainer-root.js for the full duration of the intro; removing it (when
   the state transitions to active_narrative) lets the shell fade in naturally.
*/

/* Shell starts hidden whenever the explainer is active but not yet
   in narrative mode. Covers initializing, threshold-opening, teardown. */
.hac-explainer-active .hac-explainer-shell-mount {
    opacity:        0;
    pointer-events: none;
    transition:     opacity 500ms var(--ease-atmosphere);
    will-change:    opacity;
}

/* Fade the shell in when narrative state is reached. The transition
   is already declared above; adding opacity: 1 triggers it. */
.hac-explainer-state-active-narrative .hac-explainer-shell-mount {
    opacity:        1;
    pointer-events: auto;
}

/* Fade the shell out at the start of outro so frame 05 can take over. */
.hac-explainer-state-exploration-release .hac-explainer-shell-mount {
    opacity:        0;
    pointer-events: none;
    transition:     opacity 500ms var(--ease-atmosphere);
}

/* ── Exploration-release: suppress root fade-out during outro ────────────────── */
/*
   explainer-atmosphere.css applies hac-explainer-fade-out (500ms) to
   .hac-explainer-root on exploration-release. That would fade out the entire
   overlay — including the threshold container — at the same time as the outro
   is trying to show frame 05. Suppress it here; runOutro()'s callback calls
   close() when the outro is done, and close() moves to teardown which has its
   own fade-out via the teardown body class.
*/
.hac-explainer-state-exploration-release .hac-explainer-root {
    animation: none !important;
    opacity:   1    !important;
}