/**
 * HAC Explainer — Atmosphere & APC Continuity
 *
 * Body-class-driven treatments that affect the live configurator beneath
 * the explainer overlay. Per Phase 0 audit Decision 8:
 *   - configurator stays mounted in the DOM at all times
 *   - while the explainer is active, configurator is dimmed/blurred
 *     and pointer-events are removed (clicks go to overlay, not APC)
 *   - while exploration_release is active, configurator re-emerges
 *     (filter eases toward normal as the overlay fades)
 *   - the body class is removed entirely on teardown, restoring full state.
 *
 * Body classes set by explainer-root.js:
 *   .hac-explainer-active                          — present whenever explainer is mounted
 *   .hac-explainer-state-initializing
 *   .hac-explainer-state-threshold-opening
 *   .hac-explainer-state-active-narrative
 *   .hac-explainer-state-deep-dive
 *   .hac-explainer-state-exploration-release
 *   .hac-explainer-state-teardown
 */

/* ---------------------------------------------------------------------------
 * Configurator dimming — applied while the explainer is active.
 *
 * Uses CSS filter for a cheap, GPU-accelerated effect. Decision 8 notes
 * the mobile blur fallback (dark scrim instead of blur) is deferred until
 * staging reveals a problem.
 * ------------------------------------------------------------------------- */

body.hac-explainer-active #hac-configurator {
    filter:         blur( 2px ) brightness( 0.45 );
    pointer-events: none;
    user-select:    none;
    transition:     filter 600ms ease;
}

/* During exploration_release, the configurator re-emerges as the overlay
   fades. The shell will be torn down; the configurator should be visually
   ready to be the user's destination by the time the overlay is gone. */
body.hac-explainer-active.hac-explainer-state-exploration-release #hac-configurator {
    filter: blur( 0 ) brightness( 0.85 );
}

/* During teardown, allow the configurator's filter to ease back to fully
   normal as the overlay disappears. Active class is removed shortly after
   teardown begins; this rule is mostly defensive in case the body class
   removal is delayed. */
body.hac-explainer-active.hac-explainer-state-teardown #hac-configurator {
    filter: blur( 0 ) brightness( 1 );
}

/* ---------------------------------------------------------------------------
 * Scroll lock
 *
 * Mirrors the existing body.hac-slideshow-open pattern.
 * ------------------------------------------------------------------------- */

/* Lock body scroll only — do NOT lock html overflow. Locking html overflow
   forces the browser to snap scroll position to 0, which causes the page
   to jump to the top of the page (rather than staying at the top of the
   APC) when the explainer mounts. body-only lock prevents user scrolling
   without resetting the current scroll position. */
body.hac-explainer-active {
    overflow:   hidden !important;
    max-width:  100vw  !important;
    max-height: 100vh  !important;
}

/* ---------------------------------------------------------------------------
 * Overlay fade — applied to .hac-explainer-root
 *
 * The root mounts at full opacity by default. State-driven transitions
 * could vary this in v1.5 for the cinematic threshold sequence; for Phase 1
 * the fade is uniform on open (CSS animation) and the close is handled by
 * unmount.
 * ------------------------------------------------------------------------- */

.hac-explainer-root {
    animation: hac-explainer-fade-in 600ms ease both;
}

body.hac-explainer-state-exploration-release .hac-explainer-root,
body.hac-explainer-state-teardown            .hac-explainer-root {
    animation: hac-explainer-fade-out 500ms ease both;
}

@keyframes hac-explainer-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hac-explainer-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * Reduced-motion respect
 * ------------------------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
    body.hac-explainer-active #hac-configurator,
    body.hac-explainer-active.hac-explainer-state-exploration-release #hac-configurator,
    body.hac-explainer-active.hac-explainer-state-teardown #hac-configurator {
        transition: none;
    }
    .hac-explainer-root {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
 * backgroundMode — per-slide APC dimming intensity (§13)
 *
 * The renderer sets data-background-mode on .hac-explainer-root each slide.
 * These rules override the default dim level applied by
 * body.hac-explainer-active #hac-configurator above.
 *
 * visible-context  → 35–50% opacity, 2–6px blur
 * dimmed           → 18–30% opacity, 6–10px blur   (default)
 * suppressed       → 8–18%  opacity, 10–18px blur
 * hidden           → 0% opacity
 * ------------------------------------------------------------------------- */

body.hac-explainer-active:has( .hac-explainer-root[data-background-mode="visible-context"] ) #hac-configurator {
    filter: blur( 4px ) brightness( 0.45 );
}

body.hac-explainer-active:has( .hac-explainer-root[data-background-mode="dimmed"] ) #hac-configurator {
    filter: blur( 8px ) brightness( 0.28 );
}

body.hac-explainer-active:has( .hac-explainer-root[data-background-mode="suppressed"] ) #hac-configurator {
    filter: blur( 14px ) brightness( 0.14 );
}

body.hac-explainer-active:has( .hac-explainer-root[data-background-mode="hidden"] ) #hac-configurator {
    filter: blur( 0 ) brightness( 0 );
    opacity: 0;
}

/* ---------------------------------------------------------------------------
 * Tawk.to widget suppression
 *
 * Hide the chat widget while the Explainer is active so it doesn't obscure
 * the Continue button, particularly on mobile. Tawk.to injects the widget
 * inside an iframe and wraps it in a fixed-position container.
 * CSS cannot reach inside the iframe, but hiding the outer wrapper is enough.
 *
 * When the Explainer closes, body.hac-explainer-active is removed and the
 * widget reappears automatically — no JS needed.
 *
 * Tawk.to outer container IDs (confirmed as of 2024; may change on updates):
 *   #tawk-bubble-container  — minimized bubble
 *   #tawkchat-minified-box  — alternate minimized state
 *   .tawk-min-container     — another wrapper class Tawk uses
 *   #tawkchat-container     — expanded chat panel
 * ------------------------------------------------------------------------- */

body.hac-explainer-active #tawk-bubble-container,
body.hac-explainer-active #tawkchat-minified-box,
body.hac-explainer-active .tawk-min-container,
body.hac-explainer-active #tawkchat-container {
    display:    none !important;
    visibility: hidden !important;
}

/* ---------------------------------------------------------------------------
 * Launch button — the configurator's drawer-trigger row injects this.
 *
 * Uses the same .hac-drawer-trigger class as the other triggers (Filters,
 * Discover, Slideshow) for visual consistency, plus a modifier class
 * (.hac-tour-trigger) for any explainer-specific styling.
 *
 * Phase 1 ships with no extra styling — it inherits drawer-trigger
 * appearance entirely, which keeps it visually integrated. Adjust here
 * if the museum tone suggests differentiation later.
 * ------------------------------------------------------------------------- */

.hac-tour-trigger {
    /* Reserved for future visual differentiation. Currently inherits
       .hac-drawer-trigger styles from configurator.css. */
}