/* ============================================================
   LeanScale Design System — DECK  (v2.0)
   Requires: ls-foundations.css

   A 1280×720 fixed-stage presentation engine. Slides are plain
   <section> elements; the stage scales to any viewport and
   letterboxes. Keyboard, click, swipe, hash-routing and a chapter
   nav come from ls-deck.js.

   Markup:
     <deck-stage>
       <section data-label="Cover" data-theme="dark"
                data-speaker-notes="...">…</section>
       <section data-label="The Two Dials" data-theme="light">…</section>
     </deck-stage>

   Slide grammar (non-negotiable — it's what makes a deck read as ours):
     · Cover            → data-theme="dark"
     · Section divider  → data-theme="dark",  data-label="§ Chapter Name"
     · Content          → data-theme="light"
     · Close / CTA      → data-theme="dark"
   ============================================================ */

html, body { height: 100%; }
body { margin: 0; background: var(--ls-near-black); overflow: hidden; }

/* ---------- The stage ----------
   Fixed 1280×720, centered, scaled by ls-deck.js. */
deck-stage {
  display: block; position: fixed; left: 50%; top: 50%;
  width: 1280px; height: 720px;
  margin-left: -640px; margin-top: -360px;
  transform-origin: center center;
}

deck-stage > section {
  position: absolute !important; inset: 0;
  width: 1280px; height: 720px;
  opacity: 0; pointer-events: none; z-index: 1;
  transition: opacity var(--dur-slow) var(--ease);
  font-family: var(--font-sans);
  box-sizing: border-box;
  overflow: hidden;
  isolation: isolate;
}
deck-stage > section[data-deck-active] { opacity: 1; pointer-events: auto; z-index: 2; }

/* ---------- Slide themes ----------
   Set the field; the slide supplies its own padding/layout. */
deck-stage > section[data-theme="light"] {
  background: var(--m-surface); color: var(--fg-primary);
  padding: 56px 88px 52px;
  display: flex; flex-direction: column;
}
deck-stage > section[data-theme="dark"] {
  background: var(--m-grad-hero); color: var(--fg-on-dark);
  padding: 60px 88px 52px;
  display: flex; flex-direction: column;
}

/* Grain on every slide — the film texture. */
deck-stage > section::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: 180px 180px; opacity: 0.05; mix-blend-mode: overlay;
}

/* Pointer-tracked lime spotlight on dark slides. Driven by ls-deck.js. */
deck-stage > section[data-theme="dark"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(460px circle at var(--mx,78%) var(--my,16%),
              rgba(200,232,158,0.13), rgba(200,232,158,0) 62%);
}
deck-stage > section[data-theme="light"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx,84%) var(--my,10%),
              rgba(100,37,133,0.05), rgba(100,37,133,0) 64%);
}

/* ============================================================
   ENTRANCE CHOREOGRAPHY
   Direct children of the active slide rise in sequence. Keep a
   slide to ≤6 top-level children so the stagger stays crisp.
   ============================================================ */
@keyframes dsRise {
  from { opacity: 0; transform: translateY(34px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
deck-stage > section[data-deck-active] > * {
  animation: dsRise 640ms var(--ease-rise) both;
}
deck-stage > section[data-deck-active] > *:nth-child(2) { animation-delay: 90ms; }
deck-stage > section[data-deck-active] > *:nth-child(3) { animation-delay: 180ms; }
deck-stage > section[data-deck-active] > *:nth-child(4) { animation-delay: 270ms; }
deck-stage > section[data-deck-active] > *:nth-child(5) { animation-delay: 360ms; }
deck-stage > section[data-deck-active] > *:nth-child(6) { animation-delay: 430ms; }
deck-stage > section:not([data-deck-active]) > * { animation: none; }

/* Decorative layers must NOT be part of the stagger. */
deck-stage > section > .ls-aura,
deck-stage > section > .ls-orbit,
deck-stage > section > .ls-decor { animation: none !important; }
deck-stage > section > .ls-orbit { animation: lsSpin 120s linear infinite !important; }

/* ============================================================
   DATA-ENTRANCE HOOKS
   Add these classes to chart elements and they animate in when
   their slide becomes active — and reset when it leaves.
   ============================================================ */
@keyframes lsGrowY { from { transform: scaleY(0.04); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes lsGrowX { from { transform: scaleX(0); } }
@keyframes lsDash  { to { stroke-dashoffset: 0; } }
@keyframes lsFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes lsDrift { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,26px) scale(1.08); } }
@keyframes lsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Vertical bar — grows from its base. */
deck-stage > section[data-deck-active] .ls-bar {
  transform-origin: bottom; animation: lsGrowY 880ms cubic-bezier(0.22,1,0.36,1) both;
}
/* Horizontal bar — grows from the left. */
deck-stage > section[data-deck-active] .ls-hbar {
  transform-origin: left center; animation: lsGrowX 900ms var(--ease) both;
}
/* Line path — draws itself. Set stroke-dasharray to the path length. */
deck-stage > section[data-deck-active] .ls-line {
  stroke-dasharray: 620; stroke-dashoffset: 620;
  animation: lsDash 1.6s 0.5s var(--ease) forwards;
}
/* Grid cell / matrix tile — rises with the stagger. */
deck-stage > section[data-deck-active] .ls-cell {
  animation: dsRise 560ms cubic-bezier(0.22,1,0.36,1) both;
}
/* Ambient float / drift for diagram nodes. */
deck-stage > section > .ls-drift { animation: lsDrift 18s ease-in-out infinite !important; }
deck-stage > section[data-deck-active] .ls-node { animation: lsFloat 6s ease-in-out infinite; }
/* Logo marquee. Duplicate the track twice inside for a seamless loop. */
.ls-ticker { animation: lsMarquee 30s linear infinite; }

/* Everything resets off-slide so a revisit replays cleanly. */
deck-stage > section:not([data-deck-active]) .ls-bar,
deck-stage > section:not([data-deck-active]) .ls-hbar,
deck-stage > section:not([data-deck-active]) .ls-cell,
deck-stage > section:not([data-deck-active]) .ls-node,
deck-stage > section:not([data-deck-active]) .ls-ticker { animation: none; }
deck-stage > section:not([data-deck-active]) .ls-line { animation: none; stroke-dashoffset: 620; }

/* ============================================================
   SLIDE FURNITURE
   ============================================================ */

/* Header row: logo left, context right. Every content slide. */
.ds-head {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; flex-shrink: 0;
}
.ds-head img { height: 28px; width: auto; object-fit: contain; }
.ds-head-meta {
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--fg-on-dark-3);
}
section[data-theme="light"] .ds-head-meta { color: var(--fg-faint); }

/* Slide title block. */
.ds-title { font-size: 40px; font-weight: var(--fw-bold); letter-spacing: var(--tracking-xtight); line-height: 1.04; }
.ds-sub   { font-size: 16px; line-height: var(--lh-loose); color: var(--fg-secondary); max-width: 660px; }
section[data-theme="dark"] .ds-sub { color: var(--fg-on-dark-2); }

/* Section-divider slide: one huge number + chapter name. */
.ds-divider-num {
  font-size: 120px; font-weight: var(--fw-heavy);
  letter-spacing: -0.05em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(232,255,207,0.35);
}
.ds-divider-title { font-size: 62px; font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1.02; }

/* Slide body fills the space between head and footer. */
.ds-body { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; }

/* Footer note — sources, caveats, page context. */
.ds-foot {
  flex-shrink: 0; font-size: 11px; color: var(--fg-faint);
  display: flex; justify-content: space-between; align-items: center;
}
section[data-theme="dark"] .ds-foot { color: var(--fg-on-dark-3); }

/* Card on a slide — tighter than the web card, no hover lift needed. */
.ds-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
section[data-theme="dark"] .ds-card {
  background: rgba(251,248,252,0.05); border-color: var(--border-on-dark);
  backdrop-filter: blur(8px); color: var(--fg-on-dark);
}

/* Big stat on a slide. */
.ds-stat-n { font-size: 46px; font-weight: var(--fw-bold); letter-spacing: -0.035em; line-height: 1; }
.ds-stat-l { font-size: 12px; color: var(--fg-secondary); margin-top: 6px; line-height: 1.4; }
section[data-theme="dark"] .ds-stat-l { color: var(--fg-on-dark-2); }

/* ============================================================
   PRINT / PDF EXPORT
   Chrome → Print → Landscape, margins None, Background graphics ON.
   Every slide becomes one page.
   ============================================================ */
@media print {
  @page { size: 1280px 720px landscape; margin: 0; }
  html, body { overflow: visible; background: #fff; }
  #lsnav, #lsnotes { display: none !important; }
  deck-stage { position: static; width: auto; height: auto; margin: 0; transform: none !important; }
  deck-stage > section {
    position: relative !important; opacity: 1 !important; pointer-events: auto;
    page-break-after: always; break-after: page;
    width: 1280px; height: 720px; animation: none !important;
  }
  deck-stage > section > * { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}