/* ==========================================================================
   Slide decks. Load after site.css. Markup:

   <body class="deck-page">
     <main class="deck"><div class="stage">
       <section class="slide"> ... </section>
     </div></main>
     <script src="/assets/slides.js"></script>

   Slides are laid out on a fixed 1280x720 canvas that slides.js scales to
   fit the window, so sizes below are in canvas pixels.
   ========================================================================== */

body.deck-page {
  margin: 0;
  overflow: hidden;
  background: var(--bg);
  height: 100vh;
  height: 100dvh;
  touch-action: pan-y;
}

.deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%),
    var(--bg);
}

.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1280px;
  height: 720px;
  transform: translate(-50%, -50%) scale(var(--scale, 1));
}

.slide {
  position: absolute;
  inset: 0;
  padding: 72px 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  font-size: 28px;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateX(48px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.6s;
}
.slide.is-past { transform: translateX(-48px); }
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
}
.slide.center { align-items: center; text-align: center; }

.slide h1 { margin: 0; font-size: 80px; line-height: 1.1; letter-spacing: -0.03em; }
.slide h2 { margin: 0; font-size: 52px; line-height: 1.15; letter-spacing: -0.02em; }
.slide p { margin: 0; }
.slide ul { margin: 0; padding-left: 1.2em; }
.slide li + li { margin-top: 0.4em; }
.slide .kicker {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.slide .muted { color: var(--text-soft); }
.slide .small { font-size: 20px; }
.slide .accent { color: var(--accent); }
.slide .accent-2 { color: var(--accent-2); }
.slide .row { display: flex; gap: 32px; align-items: center; }
.slide .grow { flex: 1; }

/* Elements that animate in every time their slide becomes active.
   Stagger with style="--d: 1", "--d: 2", ... */
.slide .rise { opacity: 0; }
.slide.is-active .rise {
  animation: deck-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--d, 0) * 120ms + 150ms);
}
@keyframes deck-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* Fragments appear one per key press, in document order. */
.fragment {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fragment.is-visible { opacity: 1; transform: none; }
.fragment.dim-after.is-visible:not(.is-current) { opacity: 0.4; }

/* ---------- chrome ---------- */

.deck-ui {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-faint);
}
.deck-progress {
  height: 3px;
  background: var(--accent);
  width: 0;
  transition: width 0.4s ease;
}
.deck-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px 14px;
}
.deck-bar a { pointer-events: auto; color: var(--text-faint); }
.deck-bar a:hover { color: var(--text); text-decoration: none; }
.deck-navigation { display: flex; align-items: center; gap: 10px; pointer-events: auto; }
.deck-navigation button, .deck-jump {
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; font: inherit; min-height: 36px;
}
.deck-navigation button { min-width: 36px; cursor: pointer; font-size: 18px; }
.deck-jump { max-width: 280px; padding: 4px 8px; }
.deck-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.deck-navigation :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .deck-hint { display: none; }
  .deck-bar { padding: 8px; }
  .deck-navigation { gap: 6px; }
  .deck-jump { max-width: clamp(70px, calc(100vw - 250px), 140px); }
}
.deck-hint { opacity: 0.8; }
@media (hover: none) { .deck-hint { display: none; } }

/* ---------- interactive slides ----------
   Wrap a live widget in .widget[data-interactive]: clicks inside it no
   longer turn the page, and arrow keys stay with a focused input. */
.slide .widget {
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: 22px;
}
.slide .widget input[type="range"] { width: 320px; height: 28px; }
.slide .widget .btn { font-size: 20px; padding: 8px 18px; }
.slide .widget .seg button { font-size: 20px; padding: 6px 16px; }
.slide .widget output, .slide .widget .val { font-family: var(--font-mono); }
.slide .hint { font-size: 16px; color: var(--text-faint); }

/* Animation bar inside a slide: pinned to the bottom of the canvas. */
.slide > .anim-bar {
  position: absolute;
  left: 96px; right: 96px; bottom: 30px;
  margin: 0;
  font-size: 16px;
  opacity: 0.35;
  transition: opacity 0.2s;
}
.slide > .anim-bar:hover, .slide > .anim-bar:focus-within { opacity: 1; }
.slide > .anim-bar button { width: 36px; height: 36px; font-size: 14px; }