/* Mission Control — design system for the SNAP deck (see SNAP_DECK_BUILD_BRIEF.md §3) */

:root {
  /* Surfaces — deep space */
  --void:    #05070f;   /* page background */
  --deep:    #0b1022;   /* slide panels */
  --panel:   #121a33;   /* cards */
  --panel-2: #1a2444;   /* raised cards */

  /* Constellation accents */
  --star:     #e8ecf8;  /* primary text (near-white) */
  --star-dim: #9aa6c8;  /* muted text */
  --plasma:   #35e0d0;  /* teal — primary accent: the product */
  --nebula:   #8b7bff;  /* purple — secondary accent: the AI/method */
  --solar:    #ffb547;  /* amber — the moment the eye should land */
  --signal:   #4d9bff;  /* chamber blue — data / architecture */

  /* Lines + glow */
  --edge:        rgba(232,236,248,0.12);
  --edge-strong: rgba(232,236,248,0.24);
  --glow-plasma: 0 0 28px rgba(53,224,208,0.35);
  --glow-nebula: 0 0 28px rgba(139,123,255,0.35);

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

html, body { background: var(--void); }
/* reveal core paints .reveal-viewport white/black — make it transparent so
   the void background and the fixed starfield canvas show through */
.reveal-viewport { background-color: transparent !important; color: var(--star); }
#starfield { position: fixed; inset: 0; z-index: 0; }
.reveal { z-index: 1; }

.reveal { font-family: var(--font-body); color: var(--star); font-size: 1.25rem; }
.reveal p, .reveal li { line-height: 1.6; }
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--star);
}
.reveal h1 { font-size: 3rem; }
.reveal h2 { font-size: 2.4rem; margin-bottom: 0.8em; }
.reveal .slides section { text-align: left; }
.reveal a { color: var(--signal); }
.reveal code, .reveal pre { font-family: var(--font-mono); font-size: 0.95rem; }

/* Accent utilities — accents encode meaning, don't decorate */
.plasma { color: var(--plasma); }
.nebula { color: var(--nebula); }
.solar  { color: var(--solar); }
.signal { color: var(--signal); }
.dim    { color: var(--star-dim); }

/* Cold-open / centered hero slides */
.cold-open { text-align: center; }
.cold-open .kicker {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--star-dim);
  letter-spacing: 0.08em;
}
.title-xl {
  font-size: 6rem !important;
  color: var(--plasma);
  text-shadow: var(--glow-plasma);
  margin: 0.1em 0;
}
.title-lg { font-size: 3rem !important; margin: 0.15em 0 !important; }
.tagline { color: var(--star-dim); font-size: 1.4rem; }

/* Two-column slide layout: text left, viz right */
.split { display: flex; gap: 2.5rem; align-items: center; }
.split-text { flex: 1.1; }
.split-viz  { flex: 1; }
.split-viz svg { width: 100%; height: auto; }

.two-problems { list-style: none; margin-top: 1em; padding: 0; }
.two-problems li { margin: 0.6em 0; }
.two-problems strong { color: var(--plasma); font-weight: 500; }

/* Persona slide — Sam, the demo's protagonist */
.persona { display: flex; gap: 2.2rem; align-items: flex-start; }
.persona-photo-stack { position: relative; flex-shrink: 0; width: 300px; }
.persona-photo {
  flex-shrink: 0; width: 300px; border-radius: 14px;
  border: 1px solid var(--edge-strong); box-shadow: var(--glow-plasma);
  display: block;
}
/* subliminal gag: pilot-Sam flashes through for a split second every 4s */
.persona-photo-flash {
  position: absolute; inset: 0; opacity: 0;
  animation: sam-flash 4s steps(1, end) infinite;
}
@keyframes sam-flash {
  0%, 96%  { opacity: 0; }
  96.1%    { opacity: 1; }
  100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .persona-photo-flash { animation: none; opacity: 0; }
}
.persona-title { font-size: 1.2rem; font-weight: 500; margin: 0 0 0.8em; }
.persona-points { list-style: none; padding: 0; margin: 0; }
.persona-points li {
  font-size: 1.1rem; line-height: 1.5; margin-bottom: 0.7em;
  padding-left: 1.1em; position: relative;
}
.persona-points li::before { content: '·'; position: absolute; left: 0; color: var(--plasma); }

/* Visualization slots (populated by js/viz.js) */
.viz-slot { min-height: 46vh; }
.caption {
  color: var(--star-dim);
  font-size: 1.1rem;
  margin-top: 1em;
  min-height: 1.8em; /* reserve space so swaps don't reflow */
}

/* Cards for viz panels */
.card {
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}
.card.raised { background: var(--panel-2); }
.card.glow-plasma { box-shadow: var(--glow-plasma); border-color: rgba(53,224,208,0.4); }
.card.glow-nebula { box-shadow: var(--glow-nebula); border-color: rgba(139,123,255,0.4); }

.constellation-close { max-width: 420px; margin: 0 auto 1rem; display: block; }

/* ---------- Viz 1 — pipeline ---------- */
.pipeline { display: flex; gap: 1rem; align-items: stretch; }
.pipeline-panel { flex: 1; min-width: 0; }
.pipeline-arrow { align-self: center; color: var(--plasma); font-size: 1.8rem; }
.panel-label { font-family: var(--font-mono); font-size: 1rem; margin: 0 0 0.6em; }
.pipeline-prompt { font-size: 1.1rem; }
.pipeline-spec {
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--star-dim);
  margin: 0; white-space: pre; overflow-x: auto;
}
/* rendered SnapComment mock — mirrors the real component's anatomy */
.snap-comment { display: flex; gap: 0.8rem; align-items: flex-start; }
.sc-avatar {
  flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--panel-2); border: 1px solid var(--edge-strong);
  color: var(--plasma); font-family: var(--font-mono); font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center;
}
.sc-byline { font-size: 1rem; font-weight: 500; margin: 0 0 0.4em; }
.sc-badge {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--signal);
  border: 1px solid rgba(77,155,255,0.45); border-radius: 4px;
  padding: 0.05rem 0.4rem; margin: 0 0.2rem; vertical-align: middle;
}
.sc-text { font-size: 1rem; line-height: 1.5; margin: 0 0 0.5em; }
.sc-actions { font-family: var(--font-mono); font-size: 0.95rem; margin: 0; }

/* ---------- Viz 2 — crew (shared agent/dev node styles) ---------- */
.dev-node {
  background: var(--panel); border: 1px solid var(--edge); border-radius: 10px;
  color: var(--star-dim); font-family: var(--font-mono); font-size: 1rem;
  padding: 0.5rem 1.1rem; min-width: 6.5rem; text-align: center;
}
.agent-node {
  background: var(--panel-2); border: 1px solid rgba(139,123,255,0.45);
  border-radius: 999px; color: var(--nebula); box-shadow: var(--glow-nebula);
  font-family: var(--font-mono); font-size: 0.95rem; padding: 0.3rem 0.9rem;
}

/* ---------- History — four eras of AI adoption ---------- */
.history { position: relative; }
.history-rail {
  position: absolute; left: 0; right: 0; top: 0.45rem; height: 1px;
  background: linear-gradient(90deg, var(--edge), rgba(53,224,208,0.5));
}
.history-eras { display: flex; gap: 1.4rem; }
.history-era { flex: 1; position: relative; padding-top: 1.4rem; }
.era-dot {
  position: absolute; top: 0; left: 0;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--star-dim);
}
.dim-dot    { background: var(--star-dim); }
.signal-dot { background: var(--signal); }
.nebula-dot { background: var(--nebula); box-shadow: var(--glow-nebula); }
.plasma-dot { background: var(--plasma); box-shadow: var(--glow-plasma); }
.era-years { font-family: var(--font-mono); font-size: 1rem; margin: 0 0 0.2em; }
.era-name { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.5em; }
.era-items { list-style: none; padding: 0; margin: 0; }
.era-items li {
  font-size: 1rem; line-height: 1.45; color: var(--star-dim);
  margin-bottom: 0.45em; padding-left: 0.9em; position: relative;
}
.era-items li::before { content: '·'; position: absolute; left: 0; color: var(--edge-strong); }
.history-era:last-child .era-items li { color: var(--star); }
.history-punchline { font-size: 1.35rem; font-family: var(--font-display); margin-top: 1.4em; }

/* ---------- Viz 2.5 — multi-agent swarm ---------- */
.swarm { display: flex; gap: 1.2rem; align-items: center; }
.swarm-stage { display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.swarm-directive { border-color: rgba(53,224,208,0.4); }
.swarm-lanes { flex: 1.4; }
.swarm-lane { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.swarm-lane .agent-node { white-space: nowrap; }
.lane-task { font-size: 1rem; line-height: 1.4; }
.swarm-verify { border-color: rgba(139,123,255,0.4); box-shadow: var(--glow-nebula); }
.swarm-footnote { font-size: 1.05rem; margin-top: 1.2em; }

/* ---------- Voice ---------- */
.voice { display: flex; gap: 1.6rem; align-items: stretch; }
.voice-transcript { flex: 1.2; }
.voice-results { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; justify-content: center; }
.voice-result { padding: 0.6rem 1rem; font-family: var(--font-mono); font-size: 1rem; }
/* the transcript is a wall of words on purpose — the mass is the message;
   it fades out at the bottom rather than fitting on screen */
.voice-words {
  font-size: 1rem; line-height: 1.55; margin: 0.8em 0;
  max-height: 15.5rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 62%, transparent 100%);
}
.voice-punchline { font-size: 1.4rem; font-family: var(--font-display); margin-top: 1em; }
.voice-wave { display: flex; gap: 4px; align-items: center; height: 2.4rem; }
.wave-bar {
  width: 4px; border-radius: 2px; background: var(--plasma);
  height: 30%; opacity: 0.85;
  animation: wave 1.4s ease-in-out infinite;
}
.wave-bar:nth-child(3n)  { animation-delay: 0.15s; height: 55%; }
.wave-bar:nth-child(3n+1){ animation-delay: 0.35s; height: 80%; }
.wave-bar:nth-child(4n)  { animation-delay: 0.55s; height: 40%; }
.wave-bar:nth-child(5n)  { animation-delay: 0.75s; height: 65%; }
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50%      { transform: scaleY(1.4); }
}

/* ---------- Viz 3 — bedrock (labels over assets/sandcastle.png) ---------- */
/* capped so the 2:1 image + headline fit reveal's 700px slide height */
.bedrock-hero { position: relative; width: 100%; max-width: 840px; margin: 0 auto 1.6rem; }
.bedrock-hero img {
  width: 100%; display: block; border-radius: 14px;
  border: 1px solid var(--edge);
}
.bedrock-hero .hero-label {
  position: absolute; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 1.05rem; margin: 0;
}
.bedrock-hero .hero-label.plasma { text-shadow: 0 0 16px rgba(53,224,208,0.5); }
.sand-missing {
  position: absolute; left: 2.5%; top: 50%;
  list-style: none; padding: 0; margin: 0; font-size: 1rem; color: var(--star-dim);
}
.sand-missing li { margin-bottom: 0.55em; }
.sand-missing li::before { content: '✕ '; color: var(--solar); }
.stratum-chip {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--star);
  background: rgba(5,7,15,0.55); border: 1px solid var(--edge);
  border-radius: 999px; padding: 0.15rem 1rem;
  backdrop-filter: blur(2px); white-space: nowrap;
}
.chip-detail { font-size: 0.8em; margin-left: 0.5em; }
.hero-note {
  position: absolute; transform: translateX(-50%);
  font-size: 1rem; margin: 0.5em 0 0; white-space: nowrap;
}

/* ---------- Viz 4 — velocity: line vs loop ---------- */
.velocity { display: flex; flex-direction: column; gap: 1.6rem; margin-top: 0.5rem; }
.timeline-track {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 1rem;
}
.timeline.old .timeline-track { width: 100%; justify-content: space-between; }
.tl-sep { color: var(--edge-strong); }
.velocity-callout { font-size: 1.5rem; font-family: var(--font-display); }
.apex-way { font-family: var(--font-display); font-size: 1.6rem; margin: 0.2em 0 0; }

/* "brighten" fragments: on screen from the start, lit bright white on their click */
.reveal .fragment.brighten {
  opacity: 1; visibility: inherit;
  color: var(--star-dim);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reveal .fragment.brighten.visible {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(232, 236, 248, 0.45);
}

.loop-row { display: flex; align-items: center; gap: 2.5rem; }
.loop-ring {
  position: relative; flex-shrink: 0;
  width: 11.5rem; height: 11.5rem; margin: 0.8rem 1.6rem;
}
.loop-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px dashed rgba(53,224,208,0.55);
  box-shadow: 0 0 24px rgba(53,224,208,0.15), inset 0 0 24px rgba(53,224,208,0.08);
  animation: loop-spin 18s linear infinite;
}
@keyframes loop-spin { to { transform: rotate(360deg); } }
.loop-node {
  position: absolute;
  font-family: var(--font-mono); font-size: 0.95rem; color: var(--plasma);
  background: var(--panel-2); border: 1px solid rgba(53,224,208,0.45);
  border-radius: 999px; padding: 0.2rem 0.85rem; white-space: nowrap;
}
.loop-node.pos-0 { top: 0;    left: 50%; transform: translate(-50%, -50%); }
.loop-node.pos-1 { top: 50%;  right: 0;  transform: translate(50%, -50%); }
.loop-node.pos-2 { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.loop-node.pos-3 { top: 50%;  left: 0;   transform: translate(-50%, -50%); }
.loop-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; font-size: 1rem; line-height: 1.35;
}
.loop-text { max-width: 24rem; }
.loop-ship { font-family: var(--font-mono); font-size: 1.1rem; margin-top: 0.6em; }

/* ---------- Rebrand — the Falcon retires the old logo ---------- */
.rebrand { position: relative; height: 460px; }
.rebrand-tagline { text-align: center; margin-top: 0.4em; }
.rebrand .logo-old, .rebrand .logo-new {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 340px; border-radius: 18px;
  border: 1px solid var(--edge-strong);
}
.rebrand .logo-new { opacity: 0; }
.rebrand .fragment.rebrand-trigger { display: none; }  /* invisible click target */

.rebrand .falcon {
  position: absolute; top: 30%; left: -220px; width: 190px; opacity: 0;
  filter: drop-shadow(0 0 14px rgba(232,236,248,0.3));
}
.rebrand:has(.rebrand-trigger.visible) .falcon { animation: falcon-run 3.2s ease-in-out forwards; }
@keyframes falcon-run {
  0%   { opacity: 0; transform: translate(0, 50px); }
  12%  { opacity: 1; }
  42%  { transform: translate(300px, -6px); }   /* firing position */
  62%  { transform: translate(320px, -10px); }
  100% { opacity: 1; transform: translate(1500px, -90px); }
}

.rebrand .bolt {
  position: absolute; top: 46%; left: 300px;
  width: 48px; height: 4px; border-radius: 2px;
  background: #ff3b30; box-shadow: 0 0 12px rgba(255,59,48,0.9);
  opacity: 0;
}
.rebrand:has(.rebrand-trigger.visible) .b1 { animation: bolt-fly 0.3s linear 1.45s forwards; }
.rebrand:has(.rebrand-trigger.visible) .b2 { animation: bolt-fly 0.3s linear 1.65s forwards; }
.rebrand:has(.rebrand-trigger.visible) .b3 { animation: bolt-fly 0.3s linear 1.85s forwards; }
@keyframes bolt-fly {
  0%   { opacity: 1; transform: translateX(0); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(260px); }
}

.rebrand:has(.rebrand-trigger.visible) .logo-old { animation: logo-demise 1.0s ease-in 1.95s forwards; }
@keyframes logo-demise {
  0%   { transform: translate(-50%, -50%); }
  18%  { transform: translate(calc(-50% + 7px), calc(-50% - 3px)) rotate(1.2deg); }
  36%  { transform: translate(calc(-50% - 7px), calc(-50% + 4px)) rotate(-1.6deg); }
  54%  { transform: translate(calc(-50% + 5px), -50%) rotate(0.8deg); filter: brightness(1.7); }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; filter: brightness(3) blur(16px); }
}

.rebrand .boom-flash {
  position: absolute; top: 50%; left: 50%;
  width: 220px; height: 220px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle, rgba(255,214,120,0.95) 0%, rgba(255,120,60,0.6) 45%, transparent 70%);
  opacity: 0;
}
.rebrand:has(.rebrand-trigger.visible) .boom-flash { animation: boom 0.7s ease-out 2.55s forwards; }
@keyframes boom {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0.2); }
  60%  { opacity: 0.9; transform: translate(-50%, -50%) scale(2.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

.rebrand .spark {
  position: absolute; top: 50%; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--solar); box-shadow: 0 0 10px rgba(255,181,71,0.9);
  opacity: 0; transform: translate(-50%, -50%);
}
.rebrand:has(.rebrand-trigger.visible) .spark { animation: spark-fly 0.9s ease-out 2.55s forwards; }
@keyframes spark-fly {
  0%   { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4); }
}

.rebrand:has(.rebrand-trigger.visible) .logo-new { animation: apex-in 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) 3.2s forwards; }
@keyframes apex-in {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: var(--glow-plasma); }
}

/* ---------- Team — the squadron ---------- */
.crawl-line {
  color: #ffe81f;             /* the crawl yellow */
  font-family: var(--font-display); font-size: 1.15rem;
  text-align: center; margin: 0 0 0.4em;
  transform: perspective(300px) rotateX(14deg);
  opacity: 0.9;
}
.team-title { text-align: center; }
.team-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  perspective: 900px; margin-top: 0.5rem;
}
.sw-card {
  margin: 0; border-radius: 10px; overflow: hidden;
  background: var(--panel); border: 1px solid var(--edge);
  opacity: 0;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* entrance runs (and replays) when the slide becomes current */
.reveal .slides section.present .sw-card {
  animation: hyper-in 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.sw-card:hover {
  transform: rotateX(4deg) rotateY(-6deg) scale(1.06);
  box-shadow: var(--glow-plasma);
}
.sw-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.sw-name {
  font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.05em;
  color: #ffe81f; text-align: center; padding: 0.3rem 0 0.4rem;
}
@keyframes hyper-in {
  0%   { opacity: 0; transform: scale(0.05) rotateY(25deg); filter: blur(10px) brightness(3); }
  70%  { filter: blur(0) brightness(1); }
  100% { opacity: 1; transform: none; }
}
/* ---------- Credits roll (final slide) ---------- */
.credits { position: relative; height: 620px; overflow: hidden; }
.credits-scroll { padding-top: 200px; text-align: center; }
.credits-scroll .crawl-line { margin-top: 420px; }
.credits-scroll .team-title { margin-bottom: 0.6em; }
.credits-scroll .viz-slot { min-height: 0; }
.credits .fragment.credits-trigger { display: none; }
/* one click rolls everything up and out, end-credits style */
.credits:has(.credits-trigger.visible) .credits-scroll {
  animation: credits-roll 35s linear forwards;
}
@keyframes credits-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-110%); }
}

/* cards must never stay invisible if animations are off */
@media (prefers-reduced-motion: reduce) {
  .sw-card { opacity: 1 !important; animation: none !important; }
  .credits:has(.credits-trigger.visible) .credits-scroll { animation: none; }
}

/* Slow, purposeful motion only */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}