/* =====================================================================
   mmagdiel · Reveal.js theme for the essay defense
   Tokens copied from the mmagdiel design system (Figma plugin).
   Canvas: 1920 × 1080. Dark mode is the default; press T to toggle.
   ===================================================================== */

:root {
  /* Primitives */
  --esmeralda-300: #5DD8A6; --esmeralda-400: #2BC188; --esmeralda-500: #0EA672;
  --esmeralda-600: #0A8862; --esmeralda-700: #076B4E; --esmeralda-800: #06543E;
  --esmeralda-950: #04261D;
  --cobre-200: #F0AC92; --cobre-300: #E78766; --cobre-400: #DD6740;
  --cobre-500: #C7522D; --cobre-600: #A5411F; --cobre-700: #83321A;
  --cacao-50: #FAF7F4; --cacao-100: #F1EBE4; --cacao-200: #E2D8CD; --cacao-300: #C9BAA9;
  --cacao-400: #A89684; --cacao-500: #7E6D5B; --cacao-600: #6A5A4A; --cacao-700: #4F4136;
  --cacao-900: #241C17;
  --cian-200: #93D6EC; --cian-300: #57BFE0; --cian-400: #25A4CD; --cian-600: #0B6F92;
  --rojo-300: #E67C72; --rojo-600: #A02D26;
  --tinta-base: #0C1512; --tinta-surface: #14201B; --tinta-subtle: #1B2A23;
  --tinta-border: #2A3A31; --tinta-border-strong: #3A4D43;

  --font-display: 'Fraunces', 'Fraunces Variable', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Hanken Grotesk Variable', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'JetBrains Mono Variable', ui-monospace, monospace;

  --radius-firma: 40px 8px 40px 40px;   /* radio/firma 20·4·20·20, ×2 for the 1920 canvas */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 280ms;                          /* movimiento/suave */
}

/* Semantic tokens — dark (default) */
:root,
:root[data-theme="dark"] {
  --bg: var(--tinta-base);
  --surface: var(--tinta-surface);
  --subtle: var(--tinta-subtle);
  --border: var(--tinta-border);
  --border-strong: var(--tinta-border-strong);
  --text: var(--cacao-100);
  --text-2: var(--cacao-300);
  --text-3: var(--cacao-400);
  --brand: var(--esmeralda-400);
  --accent: var(--cobre-300);
  --tech: var(--cian-300);
  --danger: var(--rojo-300);
  --shadow: 0 10px 28px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);
}

/* Semantic tokens — light (projector / bright room) */
:root[data-theme="light"] {
  --bg: var(--cacao-50);
  --surface: #FFFFFF;
  --subtle: var(--cacao-100);
  --border: var(--cacao-200);
  --border-strong: var(--cacao-300);
  --text: var(--cacao-900);
  --text-2: var(--cacao-600);
  --text-3: var(--cacao-500);
  --brand: var(--esmeralda-700);
  --accent: var(--cobre-600);
  --tech: var(--cian-600);
  --danger: var(--rojo-600);
  --shadow: 0 8px 24px rgba(21,15,11,.12), 0 2px 6px rgba(21,15,11,.06);
}

html, body { background: var(--bg); }

/* ------------------------------------------------------------- base */
.reveal {
  font-family: var(--font-body);
  font-size: 36px;
  color: var(--text);
  background: var(--bg);
}
.reveal .slides { text-align: left; }
.reveal .slides > section {
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  padding: 104px 128px;
  --sec: var(--text-2);              /* section colour, set per block below */
}
.reveal .slides > section * { box-sizing: border-box; }

/* Section colours (one hue family per block of the essay) */
.reveal section.sec-open   { --sec: var(--text-2); }
.reveal section.sec-ai     { --sec: var(--tech); }   /* tech: only here, never with accent */
.reveal section.sec-tree   { --sec: var(--brand); }
.reveal section.sec-book   { --sec: var(--brand); }
.reveal section.sec-child  { --sec: var(--accent); }
.reveal section.sec-spiral { --sec: var(--brand); }

/* ------------------------------------------------------------- type */
.reveal .eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sec);
  margin: 0 0 32px;
}
.reveal .display,
.reveal h1,
.reveal h2 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.reveal .display { font-size: 116px; font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
.reveal h1       { font-size: 88px;  font-weight: 500; line-height: 1.1;  letter-spacing: -.018em; }
.reveal h2       { font-size: 64px;  font-weight: 500; line-height: 1.15; letter-spacing: -.015em; }
.reveal .lead    { font-size: 38px; line-height: 1.5; color: var(--text-2); margin: 32px 0 0; max-width: 30ch; }
.reveal .small   { font-size: 26px; line-height: 1.5; color: var(--text-3); }
.reveal .mono    { font-family: var(--font-mono); }
.reveal .accent  { color: var(--sec); }
.reveal cite     { font-style: normal; }

/* Brand stroke: the conic "trazo" underlines the key word of a sentence */
.reveal .mark { position: relative; white-space: nowrap; display: inline-block; }
.reveal .mark::after {
  content: "";
  position: absolute;
  left: -2%; right: -4%;
  bottom: -.16em;
  height: .24em;
  background: var(--sec);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 232 26' preserveAspectRatio='none'%3E%3Cpath d='M10,6 C3,8 2,16 9,18 C70,26 150,20 218,7 C150,14 70,16 12,7 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 232 26' preserveAspectRatio='none'%3E%3Cpath d='M10,6 C3,8 2,16 9,18 C70,26 150,20 218,7 C150,14 70,16 12,7 Z'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 700ms var(--ease) 250ms;
}
.reveal section.present .mark::after,
.reveal.print-pdf .mark::after { transform: scaleX(1); }

/* Signature (firma) — inline SVG, inherits colour */
.reveal .firma { width: 300px; height: auto; color: var(--brand); display: block; }

/* ------------------------------------------------------------- figures */
.reveal .frame {
  margin: 0;
  border-radius: var(--radius-firma);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--tinta-base);
  position: relative;
}
.reveal .frame img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; max-width: none; max-height: none; }

/* ------------------------------------------------------------- layouts */
/* Split: text + image */
.reveal .l-split {
  display: grid !important;
  grid-template-columns: 1fr 1.25fr;
  gap: 96px;
  align-items: center;
}
.reveal .l-split.flip { grid-template-columns: 1.25fr 1fr; }
.reveal .l-split.flip .text { order: 2; }
.reveal .l-split .frame { aspect-ratio: 16 / 9; width: 100%; }

/* Stack: headline on top, wide image below */
.reveal .l-stack { display: flex !important; flex-direction: column; }
.reveal .l-stack .head { margin-bottom: 48px; }
.reveal .l-stack .frame { width: 100%; flex: 1; min-height: 0; }

/* Statement: one sentence, centred, nothing else */
.reveal .l-statement {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.reveal .l-statement .display { font-size: 136px; max-width: 15ch; }

/* Divider: full-bleed image, title bottom-left */
.reveal .l-divider {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 120px;
}
.reveal .l-divider .num { font-family: var(--font-mono); font-size: 28px; letter-spacing: .08em; text-transform: uppercase; color: var(--sec); margin-bottom: 24px; }
.reveal .l-divider .display { font-size: 148px; color: var(--cacao-100); }
.reveal .l-divider .lead { color: var(--cacao-300); }

/* ------------------------------------------------------------- fragments */
.reveal .fragment.rise { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal .fragment.rise.visible { opacity: 1; transform: none; }
.reveal .fragment.pop { opacity: 0; transform: scale(.85); transition: opacity 220ms var(--ease), transform 420ms cubic-bezier(.3,1.6,.5,1); }
.reveal .fragment.pop.visible { opacity: 1; transform: none; }

/* ============================================================= slide parts */

/* 01 — title */
.reveal .title-punch { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 64px; color: var(--accent); margin-top: 24px; }
.reveal .title-sub { margin-top: 48px; font-size: 32px; color: var(--text-2); max-width: 26ch; line-height: 1.45; }
.reveal .title-foot { position: absolute; left: 128px; bottom: 88px; display: flex; align-items: center; gap: 40px; }
.reveal .title-foot .firma { width: 240px; }

/* 02 — terminal */
.reveal .terminal {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  font-size: 25px;
  line-height: 1.75;
  overflow: hidden;
}
.reveal .terminal .bar { display: flex; gap: 12px; padding: 20px 28px; border-bottom: 2px solid var(--border); }
.reveal .terminal .bar i { width: 18px; height: 18px; border-radius: 50%; background: var(--border-strong); display: block; }
.reveal .terminal pre { margin: 0; padding: 28px 36px 36px; white-space: pre; color: var(--text-2); font: inherit; box-shadow: none; width: auto; }
.reveal .terminal .prompt { color: var(--brand); }
.reveal .terminal .del { color: var(--danger); }
.reveal .terminal .sum { color: var(--text); }

/* 03 — roadmap */
.reveal .roadmap { display: grid; grid-template-columns: repeat(3, 1fr) auto 1fr; gap: 32px; align-items: stretch; margin-top: 80px; }
.reveal .card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 28px;
  padding: 44px 40px;
  display: flex; flex-direction: column; gap: 20px;
}
.reveal .card svg { width: 72px; height: 72px; stroke: var(--c); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.reveal .card .k { font-family: var(--font-mono); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.reveal .card .t { font-family: var(--font-display); font-size: 46px; font-weight: 500; line-height: 1.1; }
.reveal .card .s { font-size: 28px; color: var(--text-2); line-height: 1.4; }
.reveal .card.spiral { border-color: var(--brand); }
.reveal .roadmap .arrow { align-self: center; font-size: 64px; color: var(--text-3); }

/* 04 — triptych captions */
.reveal .thirds { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 28px; font-family: var(--font-mono); font-size: 26px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }

/* 05 — checklist */
.reveal .checks { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 30px; }
.reveal .checks li { display: grid; grid-template-columns: 56px 1fr; gap: 24px; align-items: start; font-size: 38px; line-height: 1.3; }
.reveal .checks li::before {
  content: ""; width: 48px; height: 48px; margin-top: 2px; border-radius: 12px;
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304261D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 32px no-repeat;
}

/* 06 — epitaphs */
.reveal .epitaphs { position: absolute; left: 0; right: 0; bottom: 36px; display: flex; justify-content: center; gap: 28px; }
.reveal .epitaph {
  background: rgba(12,21,18,.82);
  border: 2px solid var(--tinta-border-strong);
  color: var(--cacao-200);
  border-radius: 18px;
  padding: 16px 28px;
  font-family: var(--font-mono);
  font-size: 24px;
  backdrop-filter: blur(6px);
}
.reveal .epitaph b { color: var(--cacao-100); font-weight: 500; }

/* 08 — comic strip */
.reveal .strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; }
.reveal .strip figure { margin: 0; }
.reveal .strip .frame { aspect-ratio: 4 / 3; border-radius: 20px; }
.reveal .strip figcaption { margin-top: 24px; font-size: 32px; line-height: 1.3; color: var(--text); }
.reveal .strip figcaption.quiet { color: var(--text-3); font-style: italic; }

/* 10 — labelled halves */
.reveal .halves { display: grid; grid-template-columns: 1fr 1fr; margin-top: 24px; font-family: var(--font-mono); font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.reveal .halves span:last-child { text-align: right; }

/* 11 — the shift */
.reveal .shift-img { height: 380px; flex: none !important; }
.reveal .shift-punch { margin-top: 56px; font-family: var(--font-display); font-size: 84px; font-weight: 600; color: var(--tech); letter-spacing: -.02em; }

/* 13 — expanding brain */
.reveal .brain { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; height: 100%; align-items: center; }
.reveal .brain-rows { display: grid; gap: 18px; }
.reveal .brain-row { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: 20px; padding: 0 0 0 36px; overflow: hidden; height: 196px; }
.reveal .brain-row span { font-size: 36px; line-height: 1.25; }
.reveal .brain-row span small { display: block; font-family: var(--font-mono); font-size: 20px; letter-spacing: .08em; color: var(--brand); margin-bottom: 6px; }
.reveal .brain-row img { width: 280px; height: 196px; object-fit: cover; display: block; margin: 0; max-width: none; max-height: none; }

/* 15 — over-engineering */
.reveal .big-num { font-family: var(--font-display); font-weight: 600; font-size: 128px; line-height: 1.05; letter-spacing: -.02em; }
.reveal .big-num.zero { color: var(--accent); }

/* 16 — tutorial loop */
.reveal .loop { font-family: var(--font-mono); font-size: 28px; color: var(--text-3); margin-bottom: 48px; line-height: 1.6; }
.reveal .loop b { color: var(--danger); font-weight: 500; }

/* 20 — xkcd */
.reveal .xkcd { background: #fff; border-radius: 24px; padding: 32px; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; }
.reveal .xkcd img { max-height: 640px; max-width: 100%; width: auto; margin: 0; display: block; }
.reveal .xkcd .credit { margin-top: 16px; font-family: var(--font-mono); font-size: 20px; color: #4F4136; }
.reveal .xkcd .fallback { display: none; color: #241C17; font-size: 30px; padding: 80px 40px; text-align: center; }
.reveal .xkcd.failed img { display: none; }
.reveal .xkcd.failed .fallback { display: block; }

/* 21 — clarity > likes */
.reveal .versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 56px; align-items: center; margin-top: 72px; }
.reveal .likes { background: var(--surface); border: 2px solid var(--border); border-radius: 28px; padding: 56px; text-align: center; position: relative; }
.reveal .likes .heart { font-size: 120px; line-height: 1; color: var(--text-3); }
.reveal .likes .count { font-family: var(--font-mono); font-size: 72px; color: var(--text-2); margin-top: 12px; }
.reveal .likes .strike { position: absolute; left: 40px; right: 40px; top: 50%; height: 10px; border-radius: 10px; background: var(--danger); transform: rotate(-12deg) scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.reveal .likes .strike.visible { transform: rotate(-12deg) scaleX(1); opacity: 1; }
.reveal .versus .gt { font-family: var(--font-display); font-size: 140px; color: var(--brand); }
.reveal .comment { background: var(--surface); border: 2px solid var(--brand); border-radius: var(--radius-firma); padding: 44px 48px; }
.reveal .comment .who { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.reveal .comment .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--esmeralda-800); color: var(--esmeralda-300); display: grid; place-items: center; font-family: var(--font-mono); font-size: 26px; }
.reveal .comment .name { font-size: 28px; font-weight: 600; }
.reveal .comment .time { font-size: 22px; color: var(--text-3); }
.reveal .comment p { margin: 0; font-size: 40px; line-height: 1.35; }

/* 24 — CI badge */
.reveal .ci { display: inline-flex; align-items: center; gap: 14px; margin-top: 40px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--brand); color: var(--brand); font-family: var(--font-mono); font-size: 24px; }
.reveal .ci::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); }

/* 25 — Socratic bubbles */
.reveal .bubble-text { position: absolute; transform: translate(-50%, -50%); width: 25%; text-align: center; font-family: var(--font-display); font-style: italic; font-size: 34px; line-height: 1.25; color: var(--cacao-100); }

/* 27 — spiral diagram */
.reveal .spiral-svg { width: 100%; height: 760px; display: block; margin-top: 24px; overflow: visible; }
.reveal .spiral-svg .track { fill: none; stroke: var(--border-strong); stroke-width: 3; stroke-dasharray: 2 14; stroke-linecap: round; }
.reveal .spiral-svg .seg { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 900ms var(--ease); }
.reveal .spiral-svg .seg.visible { stroke-dashoffset: 0; }
.reveal .spiral-svg .node circle { stroke-width: 4; }
.reveal .spiral-svg .node text { font-family: var(--font-body); font-size: 34px; font-weight: 600; fill: var(--text); }
.reveal .spiral-svg .node text.k { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: .08em; }

/* 28 — chat bubble */
.reveal .chat { max-width: 1400px; background: var(--surface); border: 2px solid var(--border-strong); border-radius: 48px 48px 48px 8px; padding: 64px 80px; text-align: left; }
.reveal .chat .who { font-family: var(--font-mono); font-size: 24px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin-bottom: 28px; }
.reveal .chat .q { font-family: var(--font-display); font-size: 84px; font-weight: 500; line-height: 1.15; letter-spacing: -.015em; min-height: 2.3em; }
.reveal .chat .caret { display: inline-block; width: .06em; height: .9em; background: var(--brand); vertical-align: -.08em; margin-left: .04em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 30 — closing */
.reveal .thanks { margin-top: 64px; font-family: var(--font-mono); font-size: 30px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.reveal .thanks b { color: var(--brand); font-weight: 500; }

/* Progress bar + slide number in brand colours */
.reveal .progress { color: var(--brand); height: 4px; }
.reveal .slide-number { background: transparent; color: var(--text-3); font-family: var(--font-mono); font-size: 14px; right: 24px; bottom: 18px; }

@media (prefers-reduced-motion: reduce) {
  .reveal .mark::after, .reveal .fragment, .reveal .spiral-svg .seg { transition: none !important; }
}

/* Divider overlay so the title reads over any image */
.reveal .l-divider::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(7,13,11,.94) 0%, rgba(7,13,11,.6) 32%, rgba(7,13,11,0) 62%);
}
.reveal .l-divider > * { position: relative; z-index: 1; }

/* Vertically centred column */
.reveal .l-center-v { display: flex !important; flex-direction: column; justify-content: center; }
.reveal .l-center-v .strip figcaption { font-size: 36px; }

/* Stack frame that keeps the full 16:9 image (no crop) — overlays depend on it */
.reveal .l-stack .frame.fit { flex: none; height: 680px; width: 1209px; align-self: center; }
.reveal .bubble-text > span { display: block; }