/*!
 * CSF Cinema 1.0.0 — engine visuals (Client Site Factory, owned).
 *
 * Theming contract:
 *   - Every color and duration is a CSS custom property with a fallback.
 *   - Blocksy palette tokens (var(--theme-palette-color-N)) feed the
 *     defaults, so a Tier-1 child theme recolors the cinema for free.
 *
 * PRISM contract:
 *   - NOTHING in this file applies until the engine adds html.csf-cinema-on
 *     (which only happens after capability checks pass). With JS disabled
 *     the page is a plain scrolling document — no rules below match.
 *   - Scene copy is hidden with opacity + visibility, NEVER display:none
 *     and never removed from the DOM (crawlers must see every word).
 */

:root {
  /* layering */
  --csf-cinema-z: 40;
  --csf-shop-z: 60;

  /* motion */
  --csf-fade-ms: 480ms;
  --csf-fade-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --csf-shop-slide-ms: 640ms;
  --csf-scene-shift: 4vh;            /* vertical drift of copy as it enters/leaves */

  /* palette (Blocksy tokens -> fallbacks) */
  --csf-stage-bg: var(--theme-palette-color-4, #0c1320);
  --csf-copy-color: var(--theme-palette-color-8, #f4f7fb);
  --csf-copy-accent: var(--theme-palette-color-1, #46a8ff);
  --csf-shop-bg: var(--theme-palette-color-7, #ffffff);
  --csf-scene-overlay: rgba(4, 10, 20, 0.35); /* legibility scrim over rest art */
}

/* ---------------------------------------------------------------- *
 * Scroll lock — present from boot until destroy()                   *
 * ---------------------------------------------------------------- */
html.csf-cinema-lock,
html.csf-cinema-lock body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

/* ---------------------------------------------------------------- *
 * Stage                                                             *
 * ---------------------------------------------------------------- */
html.csf-cinema-on .csf-cinema {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--csf-stage-bg);
  z-index: var(--csf-cinema-z);
}

/* Engine-created media layers (<video>/<canvas> only — never content). */
html.csf-cinema-on .csf-cinema-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transition: opacity calc(var(--csf-fade-ms) * 0.6) var(--csf-fade-ease);
}
html.csf-cinema-on .csf-cinema-layer--showing { opacity: 1; }

/* ---------------------------------------------------------------- *
 * Scenes — server-rendered copy blocks, crossfaded by class          *
 * (opacity + visibility ONLY; the delayed visibility flip lets the   *
 * fade finish before the element leaves the paint tree)              *
 * ---------------------------------------------------------------- */
html.csf-cinema-on .csf-scene {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--csf-copy-color);
  background-size: cover;          /* rest image painted here by the engine */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--csf-scene-shift));
  transition:
    opacity var(--csf-fade-ms) var(--csf-fade-ease),
    transform var(--csf-fade-ms) var(--csf-fade-ease),
    visibility 0s linear var(--csf-fade-ms);
}
html.csf-cinema-on .csf-scene--active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--csf-fade-ms) var(--csf-fade-ease),
    transform var(--csf-fade-ms) var(--csf-fade-ease),
    visibility 0s;
}
html.csf-cinema-on .csf-scene--before {
  transform: translateY(calc(var(--csf-scene-shift) * -1));
}
/* .csf-scene--after keeps the base (downward) offset. */

/* Optional legibility scrim between the rest art and the copy. */
html.csf-cinema-on .csf-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--csf-scene-overlay);
  pointer-events: none;
}
html.csf-cinema-on .csf-scene > * { position: relative; }

/* ---------------------------------------------------------------- *
 * Shop — the normal page content, presented as a slide-up sheet      *
 * while the cinema is active; plain flow without JS                  *
 * ---------------------------------------------------------------- */
html.csf-cinema-on .csf-cinema-shop {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--csf-shop-bg);
  z-index: var(--csf-shop-z);
  transform: translateY(102%);
  transition: transform var(--csf-shop-slide-ms) var(--csf-fade-ease);
}
html.csf-cinema-open .csf-cinema-shop { transform: translateY(0); }

/* ---------------------------------------------------------------- *
 * Reduced motion — instant swaps, no drift, no slides                *
 *                                                                    *
 * transform:none is scoped to scenes/layers ONLY. The shop's         *
 * translateY positions are its hidden/shown STATES, not decoration — *
 * flattening them would park the opaque shop sheet over the cinema   *
 * from boot. The shop keeps its transform toggle (instant, since     *
 * transitions are off) plus a visibility backstop on the closed      *
 * state so no other override can ever surface it early.              *
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.csf-cinema-on .csf-scene,
  html.csf-cinema-on .csf-cinema-layer {
    transition: none !important;
    transform: none !important;
  }
  html.csf-cinema-on .csf-cinema-shop {
    transition: none !important;
  }
  html.csf-cinema-on:not(.csf-cinema-open) .csf-cinema-shop {
    visibility: hidden;
  }
}