/* ============================================================
   Prisha Atlas — focused product deck
   Palette: deep teal/forest + warm ivory + electric cyan accent
   ============================================================ */

:root {
  --ink: #0d1f1a;
  --ink-2: #1d3530;
  --muted: #5e7771;
  --muted-2: #93a8a3;
  --hair: #d8e0dd;
  --hair-2: #ebf0ee;
  --paper: #f6f2ea;
  --paper-2: #ece6da;
  --card: #ffffff;
  --accent: #1e40af;       /* royal blue (was teal) */
  --accent-2: #3b6ae0;
  --accent-wash: #dbe5fb;
  --accent-ink: #0a1230;
  --cyan: #7cc8ff;
  --gold: #1e40af;         /* remapped to royal blue */
  --warn: #1e40af;         /* remapped to royal blue */
  --rose: #b04060;

  /* Royal blue palette (used on cover) */
  --royal: #1e40af;
  --royal-2: #3b6ae0;
  --royal-ink: #0a1230;
  --royal-deep: #060b22;
  --royal-glow: #6b8cff;
  --royal-cyan: #7cc8ff;

  --t-hero: 132px;
  --t-title: 78px;
  --t-subtitle: 40px;
  --t-body: 30px;
  --t-small: 24px;
  --t-eyebrow: 22px;

  --pad-x: 120px;
  --pad-y: 96px;

  --font-display: "Fraunces", "Recoleta", Georgia, serif;
  --font-sans: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html, body {
  margin: 0; padding: 0;
  background: #000;
  font-family: var(--font-sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.slide {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.slide-pad {
  padding: var(--pad-y) var(--pad-x);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Footer chrome */
.foot {
  position: absolute;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-sans);
}
.foot .brand-mark { display: none; }

/* Eyebrow above titles */
.eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  font-family: var(--font-sans);
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.eyebrow::before {
  content: "";
  width: 54px; height: 1.5px;
  background: var(--accent);
  display: inline-block;
}

/* Top corner mark */
.cmark {
  position: absolute;
  top: 44px;
  left: var(--pad-x);
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.cmark .word {
  font-family: Verdana, sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.cmark .word .tec { color: var(--cyan); }
.cmark .pipe { color: var(--muted-2); }

/* Titles */
.title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 28px 0 0;
  text-wrap: balance;
}
.title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.subtitle {
  font-size: var(--t-subtitle);
  line-height: 1.24;
  color: var(--muted);
  max-width: 1300px;
  margin: 32px 0 0;
  font-weight: 300;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.body-text { font-size: var(--t-body); line-height: 1.4; color: var(--ink-2); }
.small-text { font-size: var(--t-small); line-height: 1.45; color: var(--muted); }

/* Chapter background variant */
.slide.chapter {
  background: var(--accent-ink);
  color: var(--paper);
}
.slide.chapter .title { color: var(--paper); }
.slide.chapter .subtitle { color: rgba(245,241,234,0.78); }
.slide.chapter .eyebrow { color: var(--cyan); }
.slide.chapter .eyebrow::before { background: var(--cyan); }
.slide.chapter .foot { color: rgba(245,241,234,0.55); }
.slide.chapter .cmark { color: rgba(245,241,234,0.7); }

/* Royal-blue chapter (cover) — flat, no gradients */
.slide.chapter.royal {
  background: #1e40af;
  color: #ffffff;
}
.slide.chapter.royal .eyebrow { color: rgba(255,255,255,0.85); }
.slide.chapter.royal .eyebrow::before { background: #ffffff; }
.slide.chapter.royal .grain { display: none; }

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  padding: 36px;
  position: relative;
}
.card .lbl {
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

/* Big number */
.bignum {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum .unit {
  font-size: 36px;
  color: var(--muted);
  letter-spacing: 0;
}

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--accent-wash); color: var(--accent-ink);
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}
.chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }

/* Feature row */
.feat {
  display: flex; gap: 22px; align-items: flex-start;
}
.feat .ico {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--accent-wash);
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
}
.feat h4 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.feat p {
  margin: 0;
  font-size: 21px;
  line-height: 1.42;
  color: var(--muted);
}

/* Mock chrome */
.mock {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  box-shadow: 0 40px 80px -40px rgba(5, 40, 33, 0.32),
              0 8px 24px -10px rgba(5, 40, 33, 0.14);
  overflow: hidden;
  position: relative;
}
.mock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--hair);
  background: var(--paper-2);
}
.mock-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  font-weight: 500;
}
.mock-sub {
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
}
.tl { display: inline-flex; gap: 7px; }
.tl i { width: 11px; height: 11px; border-radius: 999px; background: var(--hair); display: block; }

/* Live dot */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }
.live-dot {
  width: 9px; height: 9px; border-radius: 999px;
  background: #21a465;
  box-shadow: 0 0 0 4px rgba(33,164,101,0.18);
  animation: pulse 1.6s ease-in-out infinite;
  display: inline-block;
}

/* === MOTION GRAPHICS === */
@keyframes slideFadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideFadeRight {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes drawLine {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}
@keyframes shimmer {
  0%,100% { transform: translateX(-100%); }
  60%,100% { transform: translateX(100%); }
}
@keyframes barFill {
  from { width: 0; }
  to   { width: var(--w, 100%); }
}
@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(124,200,255,0.6); }
  100% { box-shadow: 0 0 0 22px rgba(124,200,255,0); }
}
@keyframes ticker {
  0% { background-position: 0 0; }
  100% { background-position: 24px 0; }
}
@keyframes blink {
  0%,49% { opacity: 1; }
  50%,100% { opacity: 0.2; }
}
@keyframes prishaRing {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}
@keyframes stuckPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(30,64,175,0.55); }
  50%     { box-shadow: 0 0 0 4px rgba(30,64,175,0); }
}
@keyframes liveBlink {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(0.8); }
}
@keyframes fadeDot {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes vbar {
  0%,100% { transform: scaleY(0.5); transform-origin: bottom; }
  50%     { transform: scaleY(1); transform-origin: bottom; }
}
.live-dot { animation: pulse 2.6s ease-in-out infinite; }
/* Toned-down problem-color: muted slate-blue, harmonises with royal accent */
:root { --muted-blue: #6b7a9e; --muted-blue-2: #4d5d83; }
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(124,200,255,0.0); }
  50%     { box-shadow: 0 0 30px 4px rgba(124,200,255,0.35); }
}

/* Stagger entry on the active slide ONLY */
section[data-deck-active] .anim-up,
section[data-deck-active] .anim-in,
section[data-deck-active] .anim-right,
section[data-deck-active] .anim-scale {
  opacity: 0;
  animation-fill-mode: forwards;
  animation-duration: 0.7s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
section[data-deck-active] .anim-up    { animation-name: slideFadeUp; }
section[data-deck-active] .anim-in    { animation-name: slideFadeIn; }
section[data-deck-active] .anim-right { animation-name: slideFadeRight; }
section[data-deck-active] .anim-scale { animation-name: scaleIn; }

.d-1 { animation-delay: 0.05s; }
.d-2 { animation-delay: 0.15s; }
.d-3 { animation-delay: 0.28s; }
.d-4 { animation-delay: 0.42s; }
.d-5 { animation-delay: 0.55s; }
.d-6 { animation-delay: 0.68s; }
.d-7 { animation-delay: 0.80s; }
.d-8 { animation-delay: 0.92s; }

/* Slide-to-slide transition: fade between */
section.slide {
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1) !important;
}

/* Soft ambient float on .float-soft elements */
.float-soft { animation: float 5.5s ease-in-out infinite; }
.orbit-slow { animation: orbit 24s linear infinite; transform-origin: center; }
.shimmer { position: relative; overflow: hidden; }
.shimmer::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
  animation: shimmer 3.4s ease-in-out infinite;
  pointer-events: none;
}

/* Animated bar */
.bar {
  height: 8px; background: var(--paper-2); border-radius: 4px; position: relative; overflow: hidden;
}
.bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 4px;
  animation: barFill 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  width: 0;
}
section[data-deck-active] .bar > i { width: var(--w, 70%); }

/* Animated dotted connector line for timelines */
.dot-rail {
  position: relative; height: 2px;
  background-image: linear-gradient(90deg, var(--accent) 50%, transparent 0);
  background-size: 12px 2px; background-repeat: repeat-x;
  animation: ticker 1.2s linear infinite;
}

/* Cursor blink */
.blink-caret { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: -2px; animation: blink 1s steps(1) infinite; margin-left: 4px; }

/* Ping ring around live elements */
.ping-ring { position: relative; }
.ping-ring::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  animation: ping 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Glow pulse */
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }


/* Tablet device frame */
.tablet {
  background: #0d1f1a;
  border-radius: 38px;
  padding: 16px;
  box-shadow:
    inset 0 0 0 2px #1d3530,
    inset 0 0 0 4px #0d1f1a,
    0 50px 100px -40px rgba(5,40,33,0.5),
    0 12px 24px -8px rgba(5,40,33,0.18);
  position: relative;
}
.tablet::before {
  content: "";
  position: absolute;
  top: 50%; left: 6px;
  width: 4px; height: 48px;
  background: #1d3530;
  border-radius: 2px;
  transform: translateY(-50%);
}
.tablet-screen {
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* Number pill */
.numpill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  flex: 0 0 auto;
}

/* Tabular utility */
.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* Rule */
.rule { height: 1px; background: var(--hair); }

/* Decorative grain */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(30,64,175,0.06), transparent 50%),
    radial-gradient(circle at 88% 90%, rgba(124,200,255,0.05), transparent 55%);
}

/* On chapter slides, grain uses gold */
.slide.chapter .grain {
  background-image:
    radial-gradient(circle at 18% 12%, rgba(124,200,255,0.10), transparent 50%),
    radial-gradient(circle at 90% 88%, rgba(30,64,175,0.08), transparent 55%);
}

/* Status pills */
.spill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.spill.ok { background: #dbe5fb; color: #08604f; }
.spill.warn { background: #fce4cf; color: #7a3208; }
.spill.live { background: #dbe5fb; color: #08604f; }
.spill.dot { width: 6px; height: 6px; border-radius: 999px; padding: 0; background: currentColor; }

/* Bar chart bars */
.bar {
  height: 10px; border-radius: 999px; background: var(--hair);
  position: relative; overflow: hidden;
}
.bar > span {
  position: absolute; inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 999px;
}

/* Path arrow */
.arrow {
  display: inline-block;
  width: 0; height: 0;
  border-left: 14px solid var(--accent);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  vertical-align: middle;
}

.print-mark {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted-2);
}