/* =========================================================
   PLAY TO PILOT — KEYNOTE
   presentation.css — design tokens, reset, layout base
   ========================================================= */

:root{
  /* ---- palette (exact, per spec) ---- */
  --bg: #0A1016;
  --panel: #121B23;
  --panel-2: #17222B;
  --line: #223140;
  --line-strong: #2E4256;
  --text: #E7EEF3;
  --muted: #8AA0B3;
  --muted-2: #5C7080;

  --cyan: #4FD1E8;
  --cyan-dim: rgba(79,209,232,0.14);
  --green: #34D399;
  --green-dim: rgba(52,211,153,0.14);
  --yellow: #FFD400;
  --yellow-dim: rgba(255,212,0,0.14);
  --red: #F87171;
  --red-dim: rgba(248,113,113,0.14);

  /* ---- module accent mapping ----
     CHECK = yellow (solo/ground)
     CHECK Focus = cyan (subida)
     ALLY INSIGHT = green (cruzeiro)
     ALLY INSIGHT IA = red (teto de serviço / redline) */

  /* ---- typography (reused from the site) ---- */
  --font-display: 'Sora', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* ---- canvas ---- */
  --canvas-w: 1920px;
  --canvas-h: 1080px;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html,body{
  width:100%; height:100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--yellow); color: #1a1400; }
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* =========================================================
   DECK VIEWPORT — fixed 1920x1080 canvas, scaled to fit any
   screen (desktop / notebook / tablet / TV / projector)
   ========================================================= */
#deck-viewport{
  position: fixed;
  top: 50%; left: 50%;
  width: var(--canvas-w);
  height: var(--canvas-h);
  transform-origin: center center;
  transform: translate(-50%,-50%) scale(1);
}

.slide{
  position:absolute;
  inset:0;
  width: var(--canvas-w);
  height: var(--canvas-h);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 120px 160px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.slide-inner{ position:relative; z-index:2; width:100%; }

/* soft ambient glow, present on every slide, colored per-slide via data-accent */
.slide::before{
  content:"";
  position:absolute;
  top:-260px; right:-220px;
  width:760px; height:760px;
  background: radial-gradient(circle, var(--glow-color, rgba(255,212,0,0.10)), transparent 68%);
  pointer-events:none;
  z-index:1;
}
.slide[data-accent="cyan"]{ --glow-color: rgba(79,209,232,0.10); }
.slide[data-accent="green"]{ --glow-color: rgba(52,211,153,0.10); }
.slide[data-accent="yellow"]{ --glow-color: rgba(255,212,0,0.10); }
.slide[data-accent="red"]{ --glow-color: rgba(248,113,113,0.10); }

/* =========================================================
   SHARED TYPE + LAYOUT PRIMITIVES
   ========================================================= */
.eyebrow{
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.slide[data-accent="cyan"] .eyebrow{ color: var(--cyan); }
.slide[data-accent="green"] .eyebrow{ color: var(--green); }
.slide[data-accent="red"] .eyebrow{ color: var(--red); }
.eyebrow::before{ content:""; width:28px; height:1px; background:currentColor; display:inline-block; }

h1,h2,h3{ font-family: var(--font-display); font-weight:800; letter-spacing:-0.01em; line-height:1.05; }

.display-1{ font-size: 88px; max-width: 20ch; }
.display-2{ font-size: 64px; max-width: 22ch; }
.display-3{ font-size: 44px; max-width: 26ch; }

.lede{
  font-family: var(--font-body);
  font-size: 26px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.lede-sm{
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

.accent-yellow{ color: var(--yellow); }
.accent-cyan{ color: var(--cyan); }
.accent-green{ color: var(--green); }
.accent-red{ color: var(--red); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight:600;
  letter-spacing:0.03em;
  padding: 20px 34px;
  border-radius: 6px;
  cursor:pointer;
}
.btn-primary{ background: var(--yellow); color: #1a1400; }
.btn-ghost{ background: transparent; color: var(--text); border: 1px solid var(--line-strong); }

.wrap-narrow{ max-width: 1500px; }

/* =========================================================
   RESPONSIVE — scale factor is computed in JS (navigation.js)
   these breakpoints only adjust the *device frame* class,
   the canvas itself always scales proportionally
   ========================================================= */
body.device-tablet .slide{ padding: 90px 100px; }
body.device-tablet .display-1{ font-size: 72px; }
body.device-tablet .display-2{ font-size: 54px; }
body.device-tablet .lede{ font-size: 23px; }