/* ==========================================================================
   deck-1.css — shared "slide deck" engine chrome (version 1). Pairs with
   deck-1.js.

   Owns ONLY the presentation machinery that is identical across every deck:
   the fixed 1600x900 canvas, its scale-to-fit letterboxing on black, single-
   slide visibility, the fragment reveal baseline, the progress bar and the
   slide counter. It hardcodes no content and no brand look: per-deck styling
   (fonts, colours, slide layouts, charts) lives in each page's own <style>.

   Markup contract: a `.deck-root` containing a single `.deck-stage`, whose
   children are `.deck-slide` sections. Fragments are `[data-frag]` elements
   inside a slide. deck-1.js discovers this structure, injects the progress bar
   and counter, and toggles classes (`.active` on the live slide, `.on` on a
   revealed fragment); this file turns those class changes into pixels.

   Progressive enhancement: with JS off, `.deck-ready` is never set, so slides
   render stacked and scrollable and every fragment is visible. deck-1.js adds
   `.deck-ready` to opt the page into the scaled single-slide canvas.

   The one overridable token is --deck-accent (the progress-bar fill), so the
   peach ramp stays out of this file. Behaviour changes ship as deck-2.
   ========================================================================== */

.deck-root {
  --deck-accent: #e8a87c;               /* progress fill; override per deck */
  --deck-accent-2: #fbeede;
  --deck-muted: rgba(245, 240, 232, 0.55);
}

/* --- JS-off baseline: stacked, readable, everything visible --------------- */
.deck-stage { margin: 0 auto; }
.deck-slide { position: relative; box-sizing: border-box; }

/* --- JS-on: the scaled 1600x900 canvas, letterboxed on black -------------- */
.deck-ready {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
}

/* The stage is authored at a fixed 1600x900 and scaled as one unit, so a slide
   looks pixel-identical on any screen or projector. deck-1.js sets the scale
   factor via the --deck-scale custom property on resize; centring is done here
   so the letterbox bars are symmetric. */
.deck-ready .deck-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1600px;
  height: 900px;
  margin: 0;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
}

/* One slide visible at a time. Inactive slides stay in the DOM (so the enter
   animation has something to transition from) but are inert and invisible. */
.deck-ready .deck-slide {
  position: absolute;
  inset: 0;
  width: 1600px;
  height: 900px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.deck-ready .deck-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Fragment baseline: hidden until the engine adds `.on`. Per-deck CSS layers
   the motion (rise/fade) on top; this only guarantees they start hidden. */
.deck-ready .deck-slide [data-frag] { opacity: 0; }
.deck-ready .deck-slide [data-frag].on { opacity: 1; }

/* --- progress bar (engine-injected) --------------------------------------- */
.deck-progress {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(245, 240, 232, 0.12);
  z-index: 10;
}
.deck-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--deck-accent) 0%, var(--deck-accent-2) 100%);
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- slide counter (engine-injected) -------------------------------------- */
.deck-counter {
  position: fixed;
  right: 26px;
  bottom: 20px;
  z-index: 10;
  font: 500 15px/1 "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.04em;
  color: var(--deck-muted);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .deck-progress-fill { transition: none; }
}