/*
 * Deck theme: "Ember on ink" for "Prevent SkyNet from taking over".
 * Loaded after themes/base.css. Overrides tokens, adds deck classes and
 * CSS-only animations.
 *
 * Color semantics used throughout the deck:
 *   ember (--c-accent)   threat, attention
 *   teal  (--c-safe)     protected, blocked, allowed
 *   amber (--c-accent-2) observed
 *
 * Animation rule: every animation only animates FROM a start state
 * (fill-mode backwards). The element's normal style is the final state, so
 * ?print-pdf and prefers-reduced-motion simply switch animations off.
 */

/* ---------- Fonts (vendored, SIL OFL) ---------- */

@font-face {
  font-family: "Space Grotesk";
  src: url("../../vendor/fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../../vendor/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../../vendor/fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --c-bg: #15171c;
  --c-text: #f1ece4;
  --c-muted: #a39e96;
  --c-accent: #ff7a1a;           /* ember */
  --c-accent-ink: #15171c;
  --c-surface: #1f2229;
  --c-border: #30343d;

  --c-accent-2: #ffb347;         /* amber */
  --c-safe: #3cc7b4;             /* teal */
  --c-term: #0f1114;             /* terminal background */
  --c-glow: rgba(255, 122, 26, 0.35);
  --c-glow-soft: rgba(255, 122, 26, 0.10);
  --c-alert-fill: rgba(255, 122, 26, 0.14);
  --c-safe-fill: rgba(60, 199, 180, 0.14);
  --c-amber-fill: rgba(255, 179, 71, 0.14);

  --chart-1: #ff7a1a;
  --chart-2: #3cc7b4;
  --chart-3: #ffb347;
  --chart-4: #8fa3ff;
  --chart-5: #c78bff;
  --chart-grid: #2a2e36;

  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-heading: 600;
}

/* ---------- Global look ---------- */

.reveal-viewport {
  background-color: var(--c-bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 92% -8%, var(--c-glow-soft), transparent 70%),
    radial-gradient(ellipse 50% 40% at -5% 108%, var(--c-glow-soft), transparent 70%);
}

.reveal h1,
.reveal h2,
.reveal h3 {
  letter-spacing: -0.02em;
}

.reveal h2 em,
.reveal h1 em {
  font-style: normal;
  color: var(--c-accent);
}

.reveal .kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
}

.reveal .kicker::before {
  content: "// ";
  color: var(--c-muted);
}

.reveal code {
  color: var(--c-accent-2);
}

/* The highlight plugin stacks one absolutely positioned copy of the code per
   line-number step (data-line-numbers="2|3-5"). Without a positioned <pre>
   those copies anchor to the slide and cover it. */
.reveal pre {
  position: relative;
}

.reveal pre code {
  color: inherit;
  background: var(--c-term);
  border: 1px solid var(--c-border);
}

.reveal .card {
  border: 1px solid var(--c-border);
}

.reveal .safe   { color: var(--c-safe); }
.reveal .amber  { color: var(--c-accent-2); }
.reveal .mono   { font-family: var(--font-mono); }

/* Light, top-right section breadcrumb: Confine · Observe · Enforce */
.reveal .pillar-nav {
  position: absolute;
  top: 30px;
  right: var(--pad);
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reveal .pillar-nav span {
  padding: 4px 10px;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  color: var(--c-muted);
}

.reveal .pillar-nav span.is-active {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-weight: 700;
}

/* ---------- Title slide ---------- */

.reveal section.title h1 {
  font-size: 2.7em;
  max-width: 11em;
}

.reveal section.title h1::after {
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.8em;
  margin-left: 0.12em;
  vertical-align: -0.04em;
  background: var(--c-accent);
  box-shadow: 0 0 18px var(--c-glow);
  animation: cursor-blink 1.1s steps(1) infinite;
}

.reveal section.title .lead {
  font-family: var(--font-mono);
  font-size: 0.95em;
  color: var(--c-accent-2);
}

.reveal section.title.present h1 {
  animation: glow-in 1.4s ease-out backwards;
}

.reveal section.title.present .lead {
  animation: fade-up 0.9s 0.5s ease-out backwards;
}

/* ---------- Statement slides ---------- */

.reveal section.statement .kicker {
  margin-bottom: 1em;
}

.reveal section.statement p.lead {
  max-width: 28em;
  margin-top: 1em;
  font-size: 0.95em;
  font-weight: 400;
  color: var(--c-muted);
}

.reveal section.statement.ignite.present > p:first-of-type {
  animation: glow-in 1.6s ease-out backwards;
}

/* ---------- Terminal window ---------- */

.reveal .term {
  overflow: hidden;
  background: var(--c-term);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 0.56em;
  line-height: 1.6;
}

.reveal .term-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-muted);
  font-size: 0.9em;
}

.reveal .term-bar::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  margin-right: 40px;
  border-radius: 50%;
  background: var(--c-border);
  box-shadow: 18px 0 0 var(--c-border), 36px 0 0 var(--c-border);
}

.reveal .term-body {
  padding: 12px 16px 14px;
}

.reveal .term .line {
  display: block;
  white-space: pre-wrap;
}

.reveal .term .dim   { color: var(--c-muted); }
.reveal .term .ok    { color: var(--c-safe); }
.reveal .term .warn  { color: var(--c-accent-2); }
.reveal .term .alert { color: var(--c-accent); font-weight: 700; }

/* Typing effect for a fragment line: <span class="line fragment typed"> */
.reveal .term .fragment.typed.visible {
  animation: type-in 0.8s steps(26, end) backwards;
}

/* Text that is always there but lights up as a fragment: hidden payloads */
.reveal .hl {
  color: var(--c-muted);
  border-radius: 4px;
  transition: color 0.4s, background-color 0.4s, box-shadow 0.4s;
}

.reveal .hl.visible {
  color: var(--c-accent);
  background-color: var(--c-alert-fill);
  box-shadow: 0 0 0 4px var(--c-alert-fill);
}

/* Pulsing alert text */
.reveal .fragment.visible .pulse,
.reveal .fragment.visible.pulse {
  animation: alert-pulse 0.9s ease-out 2;
}

/* ---------- Stamp (BLOCKED / KILLED) ---------- */

.reveal .stamp {
  display: inline-block;
  padding: 0.15em 0.5em;
  border: 4px solid currentColor;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(-7deg);
}

.reveal .stamp.is-safe  { color: var(--c-safe); }
.reveal .stamp.is-alert { color: var(--c-accent); }

.reveal .fragment.visible.stamp,
.reveal .fragment.visible .stamp {
  animation: stamp-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

/* ---------- Failure cards (slide 4) ---------- */

.reveal .failure .num {
  display: block;
  margin-bottom: 0.3em;
  font-family: var(--font-mono);
  font-size: 0.7em;
  color: var(--c-muted);
}

.reveal .failure p {
  font-size: 0.75em;
  color: var(--c-muted);
}

.reveal .tag {
  display: inline-block;
  padding: 0.2em 0.6em;
  border-radius: 999px;
  background: var(--c-accent);
  color: var(--c-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-weight: 700;
}

.reveal .fragment.visible .tag {
  animation: stamp-in 0.4s 0.35s ease-out backwards;
}

/* ---------- Pillars ---------- */

.reveal .pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}

.reveal .pillar {
  padding: 1em 1em 1.1em;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-top: 5px solid var(--c-accent);
  border-radius: 10px;
}

.reveal .pillar.is-next {
  border-top-style: dashed;
  border-top-color: var(--c-accent-2);
}

.reveal .pillar .icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 0.5em;
  color: var(--c-accent);
}

.reveal .pillar.is-next .icon { color: var(--c-accent-2); }

.reveal .pillar .icon * {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reveal .pillar h3 {
  margin-bottom: 0.3em;
  font-size: 1.15em;
}

.reveal .pillar p {
  font-size: 0.72em;
  color: var(--c-muted);
}

.reveal .pillar .paper {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.55em;
  color: var(--c-accent-2);
}

.reveal .pillars .fragment.visible {
  animation: rise 0.6s ease-out backwards;
}

/* Compact pillars for the final slide */
.reveal .pillars.compact .pillar {
  padding: 0.8em 0.9em 0.9em;
}

.reveal .pillars.compact .pillar h3 {
  font-size: 0.95em;
}

.reveal .pillars.compact .pillar p {
  margin-bottom: 0.6em;
  font-size: 0.62em;
  color: var(--c-text);
}

/* Same specificity as the rule above, so it must stay after it */
.reveal .pillars .pillar p.paper {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.55em;
  color: var(--c-accent-2);
}

/* ---------- Flow of cards with arrows (AgentBound) ---------- */

.reveal .flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.reveal .flow .arrow {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 1.2em;
  color: var(--c-accent);
}

.reveal .flow .card h3 {
  font-size: 0.85em;
}

.reveal .flow .card p {
  font-size: 0.6em;
  color: var(--c-muted);
}

.reveal .flow .card .term {
  font-size: 0.52em;
}

.reveal .flow .card.is-safe {
  border-color: var(--c-safe);
  background: var(--c-safe-fill);
}

/* ---------- Stats ---------- */

.reveal .stats-4 .stat strong {
  font-size: 2.1em;
}

.reveal .stat.is-safe strong  { color: var(--c-safe); }
.reveal .stat.is-amber strong { color: var(--c-accent-2); }

.reveal .stat span {
  font-size: 0.62em;
}

.reveal .stat + .stat {
  margin-top: 1.2em;
}

.reveal .cols > .stat + .stat {
  margin-top: 0;
}

.reveal section.present .stats-4 .stat {
  animation: rise 0.6s ease-out backwards;
}

.reveal section.present .stats-4 .stat:nth-child(2) { animation-delay: 0.12s; }
.reveal section.present .stats-4 .stat:nth-child(3) { animation-delay: 0.24s; }
.reveal section.present .stats-4 .stat:nth-child(4) { animation-delay: 0.36s; }

/* Callout for limits and hand-overs */
.reveal .callout {
  margin-top: 1.4em;
  padding: 0.7em 1em;
  border-left: 5px solid var(--c-accent-2);
  background: var(--c-amber-fill);
  border-radius: 0 10px 10px 0;
  font-size: 0.72em;
}

.reveal .callout strong { color: var(--c-accent-2); }

/* Small caption under figures */
.reveal .caption {
  margin-top: 0.8em;
  font-size: 0.6em;
  color: var(--c-muted);
}

/* ---------- SVG diagram extras ---------- */

.reveal svg.diagram .sub {
  font-size: 17px;
  fill: var(--c-muted);
}

.reveal svg.diagram .mono {
  font-family: var(--font-mono);
  font-size: 16px;
}

.reveal svg.diagram .t-alert { fill: var(--c-accent); }
.reveal svg.diagram .t-safe  { fill: var(--c-safe); }
.reveal svg.diagram .t-amber { fill: var(--c-accent-2); }
.reveal svg.diagram .t-bold  { font-weight: 700; }

.reveal svg.diagram .node.is-alert {
  fill: var(--c-alert-fill);
  stroke: var(--c-accent);
}

.reveal svg.diagram .node.is-safe {
  fill: var(--c-safe-fill);
  stroke: var(--c-safe);
}

.reveal svg.diagram .node.is-ghost {
  fill: none;
  stroke: var(--c-border);
  stroke-dasharray: 8 8;
}

.reveal svg.diagram .node.is-zone {
  fill: var(--c-safe-fill);
  stroke: var(--c-safe);
  stroke-dasharray: 10 8;
}

.reveal svg.diagram .edge.is-alert   { stroke: var(--c-accent); }
.reveal svg.diagram .edge.is-safe    { stroke: var(--c-safe); }
.reveal svg.diagram .edge.is-faint   { stroke: var(--c-border); }
.reveal svg.diagram .arrowhead.is-alert { fill: var(--c-accent); }
.reveal svg.diagram .arrowhead.is-safe  { fill: var(--c-safe); }

.reveal svg.diagram .packet {
  fill: var(--c-accent);
  filter: drop-shadow(0 0 6px var(--c-accent));
}

.reveal svg.diagram .packet.is-safe {
  fill: var(--c-safe);
  filter: drop-shadow(0 0 6px var(--c-safe));
}

.reveal svg.diagram .wall {
  fill: var(--c-safe);
}

.reveal svg.diagram .core {
  fill: var(--c-accent);
  stroke: none;
}

.reveal svg.diagram text.on-core {
  fill: var(--c-accent-ink);
  font-weight: 700;
}

/* Edge draw-in: give the path pathLength="1" and class="edge draw" */
.reveal svg.diagram .draw {
  stroke-dasharray: 1;
}

.reveal .fragment.visible .draw,
.reveal section.present .draw.on-enter {
  animation: draw-in 0.7s ease-out backwards;
}

/* Node ignition (incident chain) */
.reveal .fragment.visible .ignite {
  animation: ignite 1s 0.4s ease-out backwards;
}

/* Stamp drawn inside an SVG: <g class="svg-stamp is-safe"><rect/><text/></g> */
.reveal svg.diagram .svg-stamp {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(-7deg);
}

.reveal svg.diagram .svg-stamp rect {
  fill: var(--c-bg);
  stroke: var(--c-safe);
  stroke-width: 4;
}

.reveal svg.diagram .svg-stamp text {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
  fill: var(--c-safe);
}

.reveal .fragment.visible .svg-stamp {
  animation: svg-stamp-in 0.45s 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

/* Smaller code block for two-column slides */
.reveal pre.code-sm {
  font-size: 0.56em;
}

/* Packets on the AgentBox slide (slide 11) */
.reveal .fragment.visible .packet.go-pass {
  animation: packet-pass 1s ease-in backwards;
}

.reveal .fragment.visible .packet.go-stop {
  animation: packet-stop 0.8s ease-in backwards;
}

/* ---------- Keyframes (all "from" only) ---------- */

@keyframes cursor-blink {
  50% { opacity: 0; }
}

@keyframes glow-in {
  from {
    opacity: 0;
    filter: blur(8px);
    text-shadow: 0 0 40px var(--c-glow);
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(28px); }
}

@keyframes type-in {
  from { clip-path: inset(0 100% 0 0); }
}

@keyframes alert-pulse {
  from { text-shadow: 0 0 16px var(--c-glow); }
}

@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-7deg) scale(2.2); }
}

@keyframes draw-in {
  from { stroke-dashoffset: 1; }
}

@keyframes ignite {
  from { filter: drop-shadow(0 0 22px var(--c-accent)); }
}

/* SVG user units: distances match the slide 11 geometry */
@keyframes packet-pass {
  from { transform: translateX(-165px); }
}

@keyframes packet-stop {
  from { transform: translateX(-67px); }
}

@keyframes svg-stamp-in {
  from { opacity: 0; transform: rotate(-7deg) scale(2.2); }
}

/* ---------- PDF export and reduced motion: show final states ---------- */

html.print-pdf .reveal *,
html.print-pdf .reveal *::after {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .reveal *,
  .reveal *::after {
    animation: none !important;
  }
}