/* Deck · core — stage letterbox, slide engine, step mechanics + design tokens (look lives in css/book.css). */
:root {
  /* ===== tokens · "Sách cổ": an old leather-bound book, aged paper, oxblood ink, gilt on the cover ===== */
  --leather: #23352b;
  --leather-hi: #34503f;
  --leather-deep: #16231c;
  --gilt: #c9a862;
  --gilt-hi: #efdba0;
  --gilt-lo: #8f7034;
  --paper: #efe3c6;
  --paper-age: #d9c49a;
  --edge-a: #e3d2ab;
  --edge-b: #b89f70;
  --edge-c: #a88e60;
  --ink: #2a2019;
  --ink-soft: #5e4f3e;
  --oxblood: #7a1f2b;
  --oxblood-deep: #5e1520;
  /* one colour per work: left page = Vợ nhặt (rơm, straw), right page = Vợ chồng A Phủ (chàm, indigo) */
  --vn: #94570f;
  --vn-soft: rgba(214, 156, 52, 0.42);
  --vn-tint: rgba(214, 156, 52, 0.14);
  --ap: #2b3a7a;
  --ap-soft: rgba(110, 132, 222, 0.36);
  --ap-tint: rgba(110, 132, 222, 0.12);

  --font-display: "Cormorant Garamond", "Literata", serif;
  --font-body: "Literata", "Times New Roman", serif;
  --font-sans: "Be Vietnam Pro", system-ui, sans-serif;
  --font-serif: var(--font-display);

  /* type scale — rem is 22 design px; nothing on a slide goes below --t-xs */
  --t-xs: 1.2rem;
  --t-sm: 1.35rem;
  --t-md: 1.6rem;
  --t-lg: 2.2rem;
  --t-xl: 4rem;
  --t-title: 5.2rem;
  --t-hero: 7.6rem;

  /* spacing */
  --s-1: calc(8 * var(--px));
  --s-2: calc(16 * var(--px));
  --s-3: calc(24 * var(--px));
  --s-4: calc(36 * var(--px));
  --s-5: calc(52 * var(--px));

  /* motion */
  --m-fade: 0.6s;
  --m-open: 1.6s; /* cover → spread; data-in-ms on that slide must cover it plus the ribbon's drop (0.7s) */
  --m-turn: 1s; /* page turn between spreads; keep in sync with TURN_MS in js/book.js */
  --m-close: 1.8s; /* last spread → back cover; keep in sync with data-in-ms on that slide */
  --m-burn: 1s; /* burn-and-replace panel */
  --m-erode: 1.1s; /* .swap.erode: erosion-glow burn is 1.3s; the next panel shows near its end */
  --ease-flip: cubic-bezier(0.6, 0.04, 0.3, 1);

  /* Stage: the 1440×900 design, letterboxed to the largest 16:10 box that fits. Size everything with
     rem, --vw/--vh (1% of the stage) or --px (one design pixel) — never raw vw/vh. */
  --sw: min(100vw, 160dvh);
  --sh: calc(var(--sw) / 1.6);
  --sx: calc((100vw - var(--sw)) / 2);
  --sy: calc((100dvh - var(--sh)) / 2);
  --vw: calc(var(--sw) / 100);
  --vh: calc(var(--sh) / 100);
  --px: calc(var(--sw) / 1440);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--paper);
  font-family: var(--font-sans);
  /* Audience sits far from the projector — keep type large everywhere */
  font-size: calc(22 * var(--px));
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Black bars around the stage */
body::after {
  content: "";
  position: fixed;
  inset: var(--sy) var(--sx);
  z-index: 1000;
  box-shadow: 0 0 0 100vmax #000;
  pointer-events: none;
}
@media (max-aspect-ratio: 1/1) {
  body::before {
    content: "↻  Xoay ngang màn hình để xem rõ hơn";
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--sy) / 2);
    z-index: 1001;
    transform: translateY(50%);
    font-size: 14px;
    text-align: center;
    color: #888;
    pointer-events: none;
  }
}

/* ===== slide engine — never animate opacity/visibility on .slide itself (blank frames in Electron) ===== */
.deck { position: fixed; inset: var(--sy) var(--sx); outline: none; z-index: 10; background: var(--ink); }

.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem calc(6 * var(--vw));
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  z-index: 1;
}
.slide.active { opacity: 1; visibility: visible; z-index: 2; }
.slide.is-leaving { opacity: 1; visibility: visible; z-index: 3; pointer-events: none; }

/* ===== steps (driven by deck.js) =====
   .stepper[data-reveal]: later steps stay hidden until reached.
   plain .stepper: every step visible, the current one is lit, the rest dim (click a step to jump).
   Transitions, not animations: a step animation would replay when the slide's entrance animation ends. */
[data-reveal] .step { visibility: hidden; opacity: 0; transition: opacity 0.5s, visibility 0.5s; }
[data-reveal] .step.is-on { visibility: visible; opacity: 1; }
.stepper:not([data-reveal]) .step { transition: opacity 0.4s; cursor: pointer; }
.stepper.has-current:not([data-reveal]) .step:not(.is-current) { opacity: 0.4; }

/* ===== type defaults ===== */
h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: 1; }
h1 { font-size: var(--t-title); }
h2 { font-size: var(--t-xl); }
p, li { font-family: var(--font-body); font-size: var(--t-sm); line-height: 1.45; }