/* ============================================================================
   deck.css — shell for the standalone keynote.
   Slides are authored on a fixed 1920x1080 canvas (inherited from the export)
   and scaled to the viewport by deck.js. Content markup keeps its inline
   styles; this file owns the stage, slide switching, paper layers, and the
   progressive UI (rail, fragments).
   ========================================================================== */

:root {
  --ink: #09111F;
  --paper: #FAF7F1;
  --emerald: #0B8F7A;
  --forest: #1F4A42;
  --altiplano: #4DA7A1;
  --lagoon: #163B74;
  --sand: #D8C8A4;
  --sage: #6F7F5A;
  --clay: #C8643A;
  --gold: #E8B400;
}

html, body {
  margin: 0;
  height: 100%;
  background: #0c0d10;                 /* letterbox behind the stage */
  overflow: hidden;
}

#stage {
  position: fixed;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;               /* deck.js sets translate+scale */
}

#stage > section {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
}
#stage > section.is-active { visibility: visible; }

/* injected paper background host — always the first child, paints below the
   content because content comes later in DOM order */
.paper-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.paper-bg svg { position: absolute; inset: 0; overflow: visible; }

/* fragments: hidden until revealed by click (deck.js). In ?static mode or
   reduced motion everything is force-shown. */
.deck-animatable [data-frag] { opacity: 0; }
.frag-revealed[data-frag], .deck-static [data-frag] { opacity: 1 !important; }


/* ============ paper ground (researched recipe, all static) ============
   stack: base cream -> mottle (soft-light) -> [wave sheets] -> fiber ticks
   (overlay) -> directional light -> warm vignette. Dark pages re-polarize:
   screen-blend noise, rim-light lift, inverted vignette. Nothing animates. */
.paper-clouds {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221100%22%20height%3D%221100%22%3E%3Cfilter%20id%3D%22m%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.011%200.015%22%20numOctaves%3D%223%22%20seed%3D%2211%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.45%200%200%200%200%200.42%200%200%200%200%200.36%200%200%200%200.95%200%22/%3E%3C/filter%3E%3Crect%20width%3D%221100%22%20height%3D%221100%22%20filter%3D%22url%28%23m%29%22/%3E%3C/svg%3E");
  background-size: 1100px 1100px;
  opacity: 0.20;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.paper-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22340%22%20height%3D%22340%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.62%200.042%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.28%200%200%200%200%200.24%200%200%200%200%200.18%200%200%200%200.9%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22340%22%20height%3D%22340%22%20filter%3D%22url%28%23f%29%22/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.38;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.paper-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 120% 90% at 20% 10%,
      rgba(255,252,245,0.55) 0%, rgba(255,252,245,0.22) 35%, rgba(255,252,245,0) 60%),
    linear-gradient(165deg,
      rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 30%,
      rgba(0,0,0,0) 70%, rgba(60,45,30,0.05) 100%);
  pointer-events: none;
}
.paper-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 140% 130% at 50% 45%,
    rgba(0,0,0,0) 55%, rgba(35,25,15,0.09) 82%, rgba(35,25,15,0.20) 100%);
  pointer-events: none;
}
/* three light paper stocks — pages variate like sheets in a real book.
   t1 = fiber-led (the dark pages' 450px streak structure, adapted to cream)
   t2 = pulp-led   t3 = balanced (base). Seeded tile offsets come from paper.js. */
.paper-var-t1 .paper-grain  { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22450%22%20height%3D%22450%22%3E%3Cfilter%20id%3D%22f%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.47%200.032%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22/%3E%3CfeColorMatrix%20type%3D%22matrix%22%20values%3D%220%200%200%200%200.26%200%200%200%200%200.22%200%200%200%200%200.16%200%200%200%200.95%200%22/%3E%3C/filter%3E%3Crect%20width%3D%22450%22%20height%3D%22450%22%20filter%3D%22url%28%23f%29%22/%3E%3C/svg%3E"); background-size: 450px 450px; opacity: 0.45; }
.paper-var-t1 .paper-clouds { opacity: 0.18; }
.paper-var-t2 .paper-grain  { background-size: 225px 225px; opacity: 0.30; }
.paper-var-t2 .paper-clouds { opacity: 0.20; }

/* dark pages: multiply dies on near-black -> screen/soft-light; light becomes
   a cool rim lift; vignette inverts (lit center, corners fall to true black) */
.paper-bg--dark .paper-clouds  { opacity: 0.18; mix-blend-mode: soft-light; }
.paper-bg--dark .paper-grain   { opacity: 0.106; background-size: 450px 450px; mix-blend-mode: screen; }
.paper-bg--dark .paper-light   { background:
  radial-gradient(ellipse 90% 70% at 22% 18%, rgba(255,255,255,0.05), rgba(255,255,255,0) 55%); }
.paper-bg--dark .paper-vignette{ background:
  radial-gradient(ellipse 120% 110% at 50% 45%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 48%),
  radial-gradient(ellipse 140% 130% at 50% 50%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.20) 100%); }

/* top grain veil: unifies ground, sheets AND content cards under one paper
   tooth (real paper-cut art is photographed — grain covers everything) */
.paper-bg--top { position: absolute; inset: 0; pointer-events: none; }
.paper-bg--top .paper-grain { opacity: 0.088; mix-blend-mode: multiply; }

/* ---- deck nav: chevrons + dots, paper-chip treatment (readable everywhere) */
#deck-nav {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 20;
  background: rgba(250, 247, 241, 0.90);
  border-radius: 999px;
  padding: 6px 12px;
  box-shadow: 0 6px 20px rgba(9, 17, 31, 0.14);
}
.deck-nav__btn {
  border: 0;
  background: none;
  font: 700 26px/1 'Bricolage Grotesque', sans-serif;
  color: var(--ink);
  cursor: pointer;
  padding: 0 6px;
  opacity: 0.65;
}
.deck-nav__btn:hover { opacity: 1; }
.deck-nav__dots { display: flex; gap: 8px; align-items: center; }
.deck-nav__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(9, 17, 31, 0.25);
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease;
}
.deck-nav__dot:hover { background: rgba(9, 17, 31, 0.5); }
.deck-nav__dot.is-current {
  background: var(--emerald);
  transform: scale(1.35);
}