/* ─────────────────────────────────────────────────────────────────────────── */
/* Chan Ho Yin · Portfolio Deck — Phase 1 (Static layout, no animation)      */
/* Phase 2 will add: fade-in transitions, count-up numbers, scroll reveals   */
/* Phase 3 will add: CRT effects, mobile polish, reduced-motion fallback     */
/* ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* === Color tokens (dark theme) =========================================== */
  --bg:           #0d1117;   /* GitHub dark */
  --bg-alt:       #11151c;
  --bg-elevated:  #1a1f29;
  --border:       #2a313d;
  --text:         #e6edf3;
  --text-dim:     #8b95a5;
  --text-bright:  #ffffff;

  --accent:       #f48225;   /* Cloudflare orange */
  --accent-soft:  #ffa940;
  --accent-2:     #58a6ff;   /* bright blue link */
  --accent-3:     #3fb950;   /* green (success) */
  --accent-4:     #d2a8ff;   /* purple (AI tagline) */
  --accent-5:     #f85149;   /* red (errors / disallowed) */

  /* === Typography ========================================================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

  /* === Layout ============================================================== */
  --slide-padding: clamp(2rem, 5vw, 5rem);
  --slide-min-height: 100vh;
  --max-content: 1000px;
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;        /* Phase 3 will switch to mandatory */
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-2); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent-soft); text-decoration: underline; }

code {
  font-family: var(--font-mono);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
  color: var(--accent);
}

strong { color: var(--text-bright); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* SLIDE FRAME                                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

.slide {
  min-height: var(--slide-min-height);
  padding: var(--slide-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  border-bottom: 1px solid var(--border);
}

.slide:last-child { border-bottom: none; }

.slide:nth-child(even) {
  background: var(--bg-alt);
}

.slide-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
}

.slide-number {
  position: absolute;
  top: 1.5rem;
  right: var(--slide-padding);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  opacity: 0.5;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* TYPOGRAPHY (deck-wide)                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

.deck-kicker {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 1rem;
}

.deck-h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  margin: 0 0 0.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-bright);
  line-height: 1.05;
}

.deck-h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin: 0 0 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
  line-height: 1.15;
}

.deck-h3 {
  font-size: 1.15rem;
  color: var(--accent);
  margin: 1.5rem 0 0.6rem;
  font-weight: 600;
}

.deck-lede {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  color: var(--text-bright);
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 1rem;
}

.deck-body {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0 0 1rem;
}

.deck-body.dim { color: var(--text-dim); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* SLIDE-1 COVER                                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

.cover {
  text-align: center;
  background: linear-gradient(135deg, #0d1117 0%, #1a1f29 50%, #2d1f3d 100%);
  border-bottom: 1px solid var(--border);
}

.cover .deck-kicker {
  display: inline-block;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(26, 31, 41, 0.5);
  color: var(--accent);
}

.cover .deck-h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(180deg, #fff 0%, #b0b6c3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 0.4rem;
}

.cover .tagline {
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--text);
  font-weight: 500;
  margin: 0 0 1rem;
}

.cover .languages {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-dim);
  margin: 0 0 2rem;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--accent-3);
  background: rgba(63, 185, 80, 0.08);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent-3);
  margin: 1rem 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-3);
  display: inline-block;
}

/* Note: status-dot pulse animation will be added in Phase 3 */

.cover-cta {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.3rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  text-decoration: none;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-soft);
  color: #000;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* STATS GRID (used on slides 3, 8)                                           */
/* ─────────────────────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
  margin: 1.5rem 0;
}

.stat {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.2rem;
  text-align: center;
}

.stat-num {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.6rem;
  font-weight: 600;
}

/* Note: stat-num count-up animation will be added in Phase 2 */

/* ─────────────────────────────────────────────────────────────────────────── */
/* CARDS / GRIDS (used on slides 4, 5, 6, 9, 12)                              */
/* ─────────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem 1.5rem;
}

.card-accent {
  border-left: 3px solid var(--accent);
}

.card-pink {
  border-left: 3px solid var(--accent-4);
}

.card-blue {
  border-left: 3px solid var(--accent-2);
}

.card-green {
  border-left: 3px solid var(--accent-3);
}

.card-title {
  font-weight: 700;
  margin: 0 0 0.6rem;
  color: var(--text-bright);
  font-size: 1.1rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 760px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

ol, ul {
  margin: 0.6rem 0;
  padding-left: 1.4rem;
}

li {
  margin: 0.4rem 0;
}

.mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0.8rem 0;
}

.mini-table th, .mini-table td {
  text-align: left;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid var(--border);
}

.mini-table th {
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.mini-table td:first-child { font-family: var(--font-mono); color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* LIVE URL BADGES (used on slide 7)                                          */
/* ─────────────────────────────────────────────────────────────────────────── */

.live-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: 0.98rem;
  margin: 0.7rem 0;
  transition: transform 0.15s, border-color 0.15s;
}

.live-link:hover {
  transform: translateX(4px);
  border-color: var(--accent);
  text-decoration: none;
}

.live-link .url { color: var(--text); }

.live-link .status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  background: var(--accent-3);
  color: #000;
  font-weight: 700;
}

.live-link.prod { border-left: 3px solid var(--accent-2); }
.live-link.staging { border-left: 3px solid var(--accent-3); }

/* ─────────────────────────────────────────────────────────────────────────── */
/* STACK BADGES (used on slide 9)                                             */
/* ─────────────────────────────────────────────────────────────────────────── */

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.2rem 0;
}

.badge {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--font-mono);
}

.badge:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* HIGHLIGHT CARDS (used on slides 10, 11, 12)                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.highlight {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.8rem;
  margin: 1.2rem 0;
}

.highlight-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.highlight h3 {
  margin: 0 0 1rem;
  color: var(--text-bright);
  font-size: 1.3rem;
}

.highlight-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  margin-right: 0.3rem;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FOOTER-NAV (slide counter + controls)                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

.deck-controls {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.8rem;
  border-radius: 999px;
  background: rgba(26, 31, 41, 0.85);
  border: 1px solid var(--border);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-dim);
  z-index: 100;
}

.deck-controls kbd {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}

.deck-controls button {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.deck-controls button:hover {
  background: var(--bg-elevated);
  color: var(--text-bright);
}

/* progress bar */
.deck-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 100;
  transition: width 0.2s ease-out;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* FULLSCREEN PRESENTATION MODE                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.deck-fullscreen {
  scroll-snap-type: y mandatory;
}

.deck-fullscreen .slide {
  min-height: 100vh;
  scroll-snap-align: start;
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* PRINT                                                                       */
/* ─────────────────────────────────────────────────────────────────────────── */

@media print {
  body { background: white; color: black; }
  .slide { border-bottom: 1px solid #ccc; page-break-inside: avoid; }
  .deck-controls, .deck-progress { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* PHASE-1 POLISH: NEW COMPONENTS (slides 1, 2, 3, 5, 7 + slide-10 tags)      */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Strength pills on cover slide (preview of 6 strengths) */
.strengths-pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.str-pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgba(244, 130, 37, 0.08);
  border: 1px solid rgba(244, 130, 37, 0.4);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ASCII architecture diagram + CICD cycle — monospace block */
.ascii-diagram, .cicd-cycle {
  font-family: var(--font-mono);
  font-size: clamp(0.65rem, 1.05vw, 0.85rem);
  line-height: 1.35;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.2rem 1.5rem;
  margin: 1.4rem 0;
  color: var(--text);
  white-space: pre;
  overflow-x: auto;
}

.cicd-cycle {
  border-left-color: var(--accent-3);
  color: var(--text);
}

/* Vibe-coding session walk — chat-bubble transcript */
.session-walk {
  margin: 1.5rem 0;
}

.session-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  margin: 0.7rem 0;
  align-items: start;
}

.session-actor {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: right;
  padding-top: 0.4rem;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.session-actor.ai {
  color: var(--accent-4);
}

.session-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  color: var(--text);
}

.session-bubble.ai-bubble {
  border-left-color: var(--accent-4);
  background: rgba(210, 168, 255, 0.04);
}

.session-bubble code {
  font-size: 0.85em;
}

.terminal-out {
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--accent-3);
  white-space: pre;
}

/* TDD cycle — three boxes with arrows */
.tdd-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.tdd-step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  text-align: center;
  min-width: 160px;
}

.tdd-step.red    { border-top: 3px solid var(--accent-5); }
.tdd-step.green  { border-top: 3px solid var(--accent-3); }
.tdd-step.refactor { border-top: 3px solid var(--accent-2); }

.tdd-num {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.tdd-step.red    .tdd-num { color: var(--accent-5); }
.tdd-step.green  .tdd-num { color: var(--accent-3); }
.tdd-step.refactor .tdd-num { color: var(--accent-2); }

.tdd-name {
  font-weight: 700;
  color: var(--text-bright);
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
}

.tdd-detail {
  font-size: 0.83rem;
  color: var(--text-dim);
  line-height: 1.45;
}

.tdd-arrow {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 760px) {
  .tdd-loop { flex-direction: column; }
  .tdd-arrow { transform: rotate(90deg); }
  .session-row {
    grid-template-columns: 60px 1fr;
    gap: 0.5rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* PHASE 2 · ANIMATIONS                                                       */
/* All animations disabled when user prefers-reduced-motion                  */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Slides start invisible + offset, then fade-in when .is-visible is added */
.slide {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.slide.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Inner slide content has subtle staggered entrance per child */
.slide.is-visible .slide-inner > * {
  animation: phase2-rise 0.6s ease-out both;
}
.slide.is-visible .slide-inner > *:nth-child(1)  { animation-delay: 0.05s; }
.slide.is-visible .slide-inner > *:nth-child(2)  { animation-delay: 0.12s; }
.slide.is-visible .slide-inner > *:nth-child(3)  { animation-delay: 0.20s; }
.slide.is-visible .slide-inner > *:nth-child(4)  { animation-delay: 0.28s; }
.slide.is-visible .slide-inner > *:nth-child(5)  { animation-delay: 0.36s; }
.slide.is-visible .slide-inner > *:nth-child(6)  { animation-delay: 0.44s; }

@keyframes phase2-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stat numbers: count-up is JS-driven via inline style width/innerText */
.stat-num {
  /* Visible "ready" state — JS will replace innerText gradually */
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease-out;
}

/* Tiny celebration pulse when stat finishes counting */
.stat-num.is-counted {
  animation: phase2-pulse 0.6s ease-out;
}

@keyframes phase2-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Sub-elements within slides: cards, highlights, session rows
   Start invisible, then fade-in with stagger when slide is visible */
.slide .card,
.slide .highlight,
.slide .session-row,
.slide .stat,
.slide .badge,
.slide .strengths-pill-row .str-pill,
.slide .ascii-diagram,
.slide .cicd-cycle,
.slide .tdd-step,
.slide .live-link,
.slide .mini-table {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.slide.is-visible .card,
.slide.is-visible .highlight,
.slide.is-visible .session-row,
.slide.is-visible .stat,
.slide.is-visible .badge,
.slide.is-visible .strengths-pill-row .str-pill,
.slide.is-visible .ascii-diagram,
.slide.is-visible .cicd-cycle,
.slide.is-visible .tdd-step,
.slide.is-visible .live-link,
.slide.is-visible .mini-table {
  opacity: 1;
  transform: translateY(0);
}

/* Per-child stagger inside staggered lists */
.slide.is-visible .grid-2 > *, .slide.is-visible .grid-3 > * {
  animation: phase2-rise 0.5s ease-out both;
}
.slide.is-visible .grid-2 > *:nth-child(1) { animation-delay: 0.2s; }
.slide.is-visible .grid-2 > *:nth-child(2) { animation-delay: 0.32s; }
.slide.is-visible .grid-3 > *:nth-child(1) { animation-delay: 0.2s; }
.slide.is-visible .grid-3 > *:nth-child(2) { animation-delay: 0.3s; }
.slide.is-visible .grid-3 > *:nth-child(3) { animation-delay: 0.4s; }

.slide.is-visible .stats-grid .stat:nth-child(1) { transition-delay: 0.18s; }
.slide.is-visible .stats-grid .stat:nth-child(2) { transition-delay: 0.26s; }
.slide.is-visible .stats-grid .stat:nth-child(3) { transition-delay: 0.34s; }
.slide.is-visible .stats-grid .stat:nth-child(4) { transition-delay: 0.42s; }
.slide.is-visible .stats-grid .stat:nth-child(5) { transition-delay: 0.50s; }
.slide.is-visible .stats-grid .stat:nth-child(6) { transition-delay: 0.58s; }

.slide.is-visible .session-row:nth-child(1) { transition-delay: 0.18s; }
.slide.is-visible .session-row:nth-child(2) { transition-delay: 0.28s; }
.slide.is-visible .session-row:nth-child(3) { transition-delay: 0.38s; }
.slide.is-visible .session-row:nth-child(4) { transition-delay: 0.48s; }
.slide.is-visible .session-row:nth-child(5) { transition-delay: 0.58s; }
.slide.is-visible .session-row:nth-child(6) { transition-delay: 0.68s; }

/* Highlight tag chips — stagger */
.slide.is-visible .highlight:nth-child(1) { transition-delay: 0.18s; }
.slide.is-visible .highlight:nth-child(2) { transition-delay: 0.32s; }
.slide.is-visible .highlight:nth-child(3) { transition-delay: 0.46s; }
.slide.is-visible .highlight:nth-child(4) { transition-delay: 0.60s; }

/* Pills row on cover — left-to-right reveal */
.slide.is-visible .strengths-pill-row .str-pill:nth-child(1) { transition-delay: 0.18s; }
.slide.is-visible .strengths-pill-row .str-pill:nth-child(2) { transition-delay: 0.24s; }
.slide.is-visible .strengths-pill-row .str-pill:nth-child(3) { transition-delay: 0.30s; }
.slide.is-visible .strengths-pill-row .str-pill:nth-child(4) { transition-delay: 0.36s; }
.slide.is-visible .strengths-pill-row .str-pill:nth-child(5) { transition-delay: 0.42s; }
.slide.is-visible .strengths-pill-row .str-pill:nth-child(6) { transition-delay: 0.48s; }

/* ─────────────────────────────────────────────────────────────────────────── */
/* ACCESSIBILITY · REDUCED MOTION                                              */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Disable ALL transitions/animations — show everything immediately */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  /* Force all slides visible immediately */
  .slide {
    opacity: 1 !important;
    transform: none !important;
  }
  .slide .card, .slide .highlight, .slide .session-row,
  .slide .stat, .slide .badge, .slide .str-pill,
  .slide .ascii-diagram, .slide .cicd-cycle,
  .slide .tdd-step, .slide .live-link, .slide .mini-table {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Stat numbers: show target value immediately (JS will skip animation) */
}


/* ─────────────────────────────────────────────────────────────────────────── */
/* PHASE 3 · EFFECTS + POLISH                                                 */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ═══ Mandatory scroll-snap when in fullscreen mode ═══ */

.deck-fullscreen {
  scroll-snap-type: y mandatory;
}

.deck-fullscreen .slide {
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  border-bottom: none;
}

/* When in fullscreen: hide slide-counter from the floating controls,
   since the side TOC dots will show navigation. */
.deck-fullscreen .deck-controls kbd + * {
  display: none;  /* Hide "F fullscreen" hint since we're already in fullscreen */
}

/* ═══ Side TOC dots (visible only in fullscreen mode) ═══ */

.deck-toc {
  position: fixed;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 99;
  padding: 0.7rem 0.5rem;
  background: rgba(13, 17, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.deck-fullscreen .deck-toc {
  display: flex;
}

.toc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.25s ease-out;
  padding: 0;
  /* Show tooltip on hover */
  position: relative;
}

.toc-dot:hover {
  background: var(--border);
  transform: scale(1.2);
}

.toc-dot.is-active {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.4);
  box-shadow: 0 0 8px var(--accent);
}

.toc-dot-label {
  position: absolute;
  right: 130%;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-size: 0.78rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.toc-dot:hover .toc-dot-label {
  opacity: 1;
}

/* ═══ CRT scanline overlay ═══ */

.deck-crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.12) 2px,
    rgba(0, 0, 0, 0.12) 3px
  );
  opacity: 0;
  transition: opacity 0.4s ease-out;
  mix-blend-mode: multiply;
}

.deck-crt.is-on {
  opacity: 1;
}

/* Subtle vignette when CRT is on */
.deck-crt.is-on::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 50%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

/* ═══ Mobile breakpoint (≤ 600px) ═══ */

@media (max-width: 600px) {
  :root {
    --slide-padding: 0.5rem;
  }

  body {
    /* Lock viewport-friendly base font on mobile */
    -webkit-text-size-adjust: 100%;
  }

  /* CRITICAL: force full-width utilization on mobile */
  .slide {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    box-sizing: border-box;
  }

  .slide-inner {
    max-width: 100%;
    width: 100%;
    padding: 0 0.25rem;
    box-sizing: border-box;
  }

  .cover .deck-h1 {
    font-size: 1.7rem !important;
    margin-top: 0.2rem;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.1;
    padding: 0;
  }
  .cover .tagline {
    font-size: 0.82rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
    padding: 0 0.5rem;
  }
  .languages {
    font-size: 0.78rem;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
    padding: 0 0.5rem;
  }
  .deck-kicker {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: center;
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem;
    line-height: 1.4;
  }
  .cover-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  .cover-cta .btn {
    width: 100%;
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: 0.88rem;
  }
  .status-badge {
    font-size: 0.7rem !important;
    padding: 0.3rem 0.6rem !important;
    white-space: nowrap;
  }
  .strengths-pill-row {
    gap: 0.3rem;
    padding: 0 0.5rem;
  }
  .str-pill {
    font-size: 0.68rem;
    padding: 0.2rem 0.5rem;
  }
  .deck-h2 {
    font-size: 1.35rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .deck-lede {
    font-size: 0.95rem !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .deck-h1 {
    font-size: 1.7rem !important;
  }
  .deck-body {
    font-size: 0.92rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.7rem !important;
  }
  .stat {
    padding: 0.9rem 0.5rem;
  }
  .stat-num {
    font-size: 1.4rem !important;
  }
  .stat-label {
    font-size: 0.7rem !important;
  }
  .grid-2, .grid-3 {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }
  .ascii-diagram, .cicd-cycle {
    font-size: 0.45rem !important;
    padding: 0.6rem 0.7rem;
    margin: 1rem 0;
    line-height: 1.2;
  }
  .session-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .session-actor {
    text-align: left;
    padding-top: 0;
    font-size: 0.78rem;
  }
  .session-bubble {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  .tdd-loop {
    flex-direction: column;
  }
  .tdd-arrow {
    transform: rotate(90deg);
  }
  .tdd-step {
    min-width: 0;
    width: 100%;
    padding: 0.8rem 1rem;
  }
  .tdd-detail {
    font-size: 0.78rem;
  }
  .deck-controls {
    font-size: 0.7rem;
    padding: 0.4rem 0.7rem;
  }
  .deck-controls kbd {
    font-size: 0.65rem;
    padding: 0.05rem 0.3rem;
  }
  .deck-toc {
    right: 0.5rem;
    padding: 0.5rem 0.3rem;
    gap: 0.4rem;
  }
  .toc-dot {
    width: 8px;
    height: 8px;
  }
  .toc-dot-label {
    display: none;  /* On mobile, no tooltip — not enough space */
  }
  /* Hide F / S keyboard hints on mobile — no physical keyboard */
  .deck-controls kbd {
    display: none;
  }
  .live-link {
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    text-align: center;
    font-size: 0.85rem;
  }
  .live-link .url {
    word-break: break-all;
    font-size: 0.78rem;
  }
  .highlight {
    padding: 1rem 1.1rem;
  }
  .highlight h3 {
    font-size: 1.1rem;
  }
  .highlight-tag {
    font-size: 0.7rem;
  }
  .card {
    padding: 1rem 1.1rem;
  }
  .card-title {
    font-size: 1rem;
  }
  .mini-table {
    font-size: 0.78rem;
  }
  .mini-table th {
    font-size: 0.65rem;
  }
  .mini-table td {
    padding: 0.4rem 0.3rem;
  }
  .badge {
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
  }
}

/* ═══ Tablet (601-900px) ═══ */

@media (min-width: 601px) and (max-width: 900px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .grid-3 {
    grid-template-columns: 1fr 1fr !important;
  }
  .ascii-diagram, .cicd-cycle {
    font-size: 0.7rem !important;
  }
}

/* ═══ Loading state (fonts + first paint) ═══ */

.deck-loading {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  transition: opacity 0.4s ease-out;
}

.deck-loading.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.deck-loading-text {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--accent);
}

.deck-loading-text::after {
  content: '';
  display: inline-block;
  width: 0.8em;
  animation: phase3-blink 1s steps(2) infinite;
  vertical-align: middle;
  color: var(--accent);
  border-right: 2px solid var(--accent);
  margin-left: 0.2rem;
}

@keyframes phase3-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ═══ Print stylesheet (PDF export) ═══ */

@media print {
  body {
    background: white;
    color: #000;
  }
  .slide {
    background: white !important;
    color: #000 !important;
    border-bottom: 1px solid #ccc;
    page-break-inside: avoid;
    min-height: auto;
    height: auto;
    padding: 1.5rem 1rem;
    opacity: 1 !important;
    transform: none !important;
  }
  .deck-controls,
  .deck-progress,
  .deck-toc,
  .deck-crt,
  .deck-loading,
  a[href*="staging.taxi"],
  a[href*="taxi-rental.pages"]::after {
    display: none !important;
  }
  /* Convert live URLs to footers */
  .live-link {
    border: 1px solid #000 !important;
    background: white !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  .live-link .url {
    color: #000 !important;
  }
  .live-link .status {
    background: #000 !important;
    color: white !important;
  }
  .ascii-diagram, .cicd-cycle {
    background: #f8f8f8 !important;
    color: #000 !important;
    border-left: 3px solid #000 !important;
    page-break-inside: avoid;
    font-size: 0.7rem !important;
  }
  .card, .highlight {
    background: white !important;
    border: 1px solid #999 !important;
    color: #000 !important;
    page-break-inside: avoid;
  }
  code {
    background: #f4f4f4 !important;
    color: #000 !important;
  }
  a {
    color: #000 !important;
    text-decoration: underline;
  }
  .cover {
    background: white !important;
    color: #000 !important;
  }
  .status-badge {
    border-color: #000 !important;
    background: white !important;
    color: #000 !important;
  }
  .str-pill, .badge {
    border-color: #000 !important;
    background: white !important;
    color: #000 !important;
  }
  .deck-h1, .deck-h2 {
    color: #000 !important;
    background: none !important;
    -webkit-text-fill-color: #000 !important;
  }
}

/* ═══ Hide deck controls when printing ═══ */
@media print {
  .deck-controls { display: none !important; }
}

/* ═══ Smooth progress bar easing ═══ */
#deckProgress {
  transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══ Phase-3 footer micro-tweak: status pulse ═══ */
.status-dot {
  animation: phase3-status-pulse 2.4s ease-in-out infinite;
}

@keyframes phase3-status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot {
    animation: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════ */
/* SLIDE 2 · HOW I WORK · AI-NATIVE TOOLCHAIN                                  */
/* ════════════════════════════════════════════════════════════════════════ */
.slide.how-i-work {
  /* slide inherits standard layout */
}

.tool-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 0 0 1.25rem 0;
}

.tool-cell {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  padding: 1.1rem 1.2rem 1rem 1.2rem;
  transition: border-left-color 0.3s ease, transform 0.3s ease;
}

.tool-cell:hover {
  border-left-color: #ff8c2a;
  transform: translateY(-2px);
}

.tool-icon {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--c-accent);
  margin-bottom: 0.35rem;
  letter-spacing: 0.05em;
  display: inline-block;
}

.tool-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--c-text);
  margin: 0 0 0.65rem 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--c-rule);
}

.tool-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--c-text-dim);
}

.tool-list li {
  padding: 0.1rem 0;
}

.tool-list strong {
  color: var(--c-text);
  font-weight: 600;
}

.tool-list code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: rgba(255, 140, 42, 0.08);
  color: var(--c-accent);
  padding: 0.05em 0.35em;
  border-radius: 3px;
}

/* The Loop footer strip */
.flow-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 140, 42, 0.04) 100%);
  border: 1px solid var(--c-rule);
  border-radius: 6px;
  font-family: var(--font-mono);
}

.flow-step {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-text);
  padding: 0.3rem 0.85rem;
  background: rgba(255, 140, 42, 0.1);
  border: 1px solid rgba(255, 140, 42, 0.25);
  border-radius: 4px;
}

.flow-arrow {
  color: var(--c-accent);
  font-size: 1.05rem;
  font-weight: 700;
}

.flow-arrow.loop {
  font-size: 1.3rem;
  animation: phase3-flow-rotate 3s linear infinite;
  display: inline-block;
}

@keyframes phase3-flow-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .flow-arrow.loop {
    animation: none !important;
  }
}

/* Responsive: 2x2 grid on smaller widths */
@media (max-width: 900px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .tool-cell {
    padding: 0.85rem 1rem;
  }
  .tool-list {
    font-size: 0.78rem;
  }
  .flow-strip {
    gap: 0.35rem;
    padding: 0.75rem;
  }
  .flow-step {
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
  }
}


/* ════════════════════════════════════════════════════════════════════════ */
/* ARCHITECTURE DIAGRAM (slide 3) — HTML/CSS Grid version                    */
/* ════════════════════════════════════════════════════════════════════════ */
.arch-diagram {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-accent);
  border-radius: 6px;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  margin: 1.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Generic box */
.arch-box {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-left: 3px solid var(--c-accent);
  border-radius: 5px;
  padding: 0.7rem 1rem;
  text-align: center;
  min-width: 110px;
  transition: border-left-color 0.25s ease, transform 0.25s ease;
}

.arch-box:hover {
  border-left-color: #ff8c2a;
  transform: translateY(-1px);
}

.arch-box-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--c-text);
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.arch-box-body {
  font-size: 0.75rem;
  color: var(--c-text-dim);
  font-weight: 400;
}

/* Browser box: full-width spanning columns */
.arch-browser-row {
  display: flex;
  justify-content: center;
}

.arch-browser {
  min-width: 70%;
  padding: 0.9rem 1.2rem;
  border-left-width: 4px;
  background: linear-gradient(180deg, rgba(255, 140, 42, 0.05) 0%, transparent 100%);
}

.arch-browser .arch-box-title {
  font-size: 0.95rem;
}

/* Column labels row: 3 evenly-spaced labels */
.arch-cols-labels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  font-size: 0.75rem;
  color: var(--c-text-dim);
  margin-top: 0.4rem;
}

.arch-label {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Vertical arrow lines */
.arch-cols-arrows {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 1.4rem;
  text-align: center;
  align-items: center;
}

.arch-vert {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arch-vert::after {
  content: '↓';
  position: absolute;
  bottom: -2px;
  font-size: 0.9rem;
  color: var(--c-accent);
  font-weight: 700;
}

/* Pages + Worker row using grid */
.arch-cols-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8rem;
  align-items: center;
}

.arch-pages-worker-row {
  /* Pages in col 1, /api/* flow + arrow in col 2, Worker in col 2-r position (overlap col 2) */
  grid-template-columns: 1.2fr 0.6fr 1.2fr 0.6fr;
  margin-top: 0.6rem;
}

.arch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

/* /api/* flow connector (horizontal line between Pages and Worker) */
.arch-flow-line {
  width: 100%;
  height: 1px;
  background: var(--c-accent);
  position: relative;
  margin-top: 0.4rem;
}

.arch-flow-line::after {
  content: '▶';
  position: absolute;
  right: -8px;
  top: -10px;
  font-size: 0.7rem;
  color: var(--c-accent);
}

.arch-api-label {
  font-size: 0.7rem;
  color: var(--c-text-dim);
  font-weight: 600;
  margin-bottom: 0.15rem;
  letter-spacing: 0.05em;
}

.arch-flow-label-inline {
  font-size: 0.7rem;
  color: var(--c-text-dim);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.4rem;
  background: rgba(255, 140, 42, 0.1);
  border-radius: 3px;
}

.arch-flow-note-inline {
  font-size: 0.7rem;
  color: var(--c-text-dim);
  font-weight: 500;
  font-style: italic;
  margin-left: 0.5rem;
}

.arch-write-label {
  margin-right: 0.3rem;
}

/* Specific boxes: Pages + Worker */
.arch-pages {
  border-left-color: #4a9eff;  /* bluish */
}
.arch-worker {
  border-left-color: var(--c-accent);
}

/* Box vertical centering for row-centered */
.arch-row-centered {
  display: flex;
  justify-content: center;
}

.arch-rbac {
  min-width: 280px;
  padding: 0.85rem 1.3rem;
  background: linear-gradient(180deg, rgba(255, 140, 42, 0.06) 0%, var(--c-card) 100%);
}

.arch-rbac .arch-box-title {
  font-size: 0.95rem;
}

/* Output columns row */
.arch-cols-outputs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  text-align: center;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.arch-output-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.arch-output-col::after {
  content: '↓';
  position: absolute;
  bottom: -8px;
  font-size: 0.9rem;
  color: var(--c-accent);
  font-weight: 700;
}

/* D1 + R2 row */
.arch-row-split {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
}

.arch-d1 {
  border-left-color: #4a9eff;
  min-width: 220px;
  text-align: left;
}

.arch-d1 .arch-box-body {
  text-align: left;
}

.arch-r2 {
  border-left-color: #b16dff;
  min-width: 200px;
  text-align: left;
}

.arch-r2 .arch-box-body {
  text-align: left;
}

/* Cron row */
.arch-cron-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin: 0.4rem 0;
}

.arch-cron-label {
  font-size: 0.72rem;
  color: var(--c-text-dim);
  font-style: italic;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.arch-vert-short {
  width: 1px;
  height: 0.7rem;
  background: var(--c-accent);
  position: relative;
}

.arch-vert-short::after {
  content: '↓';
  position: absolute;
  bottom: -8px;
  left: -7px;
  font-size: 0.9rem;
  color: var(--c-accent);
}

/* Scheduled task box */
.arch-scheduled {
  border-left-color: #888;
  min-width: 220px;
  margin-top: 0.4rem;
}

/* Fade-out line for vestigial connectors */
.arch-fade {
  opacity: 0;
}

/* Static column — should be visible going down */
.arch-col-3.arch-vert::after {
  content: '│';
  font-size: 1rem;
}

/* Mobile: stack everything */
@media (max-width: 600px) {
  .arch-diagram {
    font-size: 0.7rem;
    padding: 1rem 0.8rem;
  }
  .arch-browser {
    min-width: 90%;
  }
  .arch-cols-row,
  .arch-pages-worker-row,
  .arch-cols-labels,
  .arch-cols-outputs,
  .arch-cols-arrows {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    margin: 0.3rem 0;
  }
  .arch-pages-worker-row {
    grid-template-columns: 1fr;
  }
  .arch-flow-line,
  .arch-col-3.arch-vert {
    display: none;
  }
  .arch-row-split {
    flex-direction: column;
    gap: 0.6rem;
  }
}