/* Mission Relearn — tokens for the slide-deck template */

@font-face {
  font-family: "Cal Sans";
  src: url("fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Brand */
  --coral: hsl(8 85% 65%);
  --coral-light: hsl(15 90% 72%);
  --coral-soft: hsla(8, 85%, 65%, 0.10);
  --coral-soft-2: hsla(8, 85%, 65%, 0.16);

  --navy: hsl(230 25% 12%);
  --navy-soft: hsl(230 25% 18%);
  --navy-deep: hsl(230 30% 8%);

  --bg: hsl(210 50% 98%);
  --section-light: hsl(210 50% 98%);
  --section-white: #ffffff;
  --border: hsl(214 32% 91%);
  --muted: hsl(220 10% 45%);
  --foreground: hsl(230 25% 12%);

  --shadow-sm: 0 4px 30px hsl(230 25% 12% / 0.05);
  --shadow-md: 0 10px 40px hsl(230 25% 12% / 0.08);
  --shadow-lg: 0 25px 50px hsl(230 25% 12% / 0.15);
  --shadow-coral: 0 4px 20px hsl(8 85% 65% / 0.4);

  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  --font-heading: "Cal Sans", "Open Sans", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;
}

/* Slide-stage defaults */
html, body { margin: 0; padding: 0; background: #000; }
body {
  font-family: var(--font-body);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Slide root reset */
deck-stage section {
  font-family: var(--font-body);
  color: var(--foreground);
  background: var(--section-white);
  overflow: hidden;
}

/* ---------- Shared slide primitives ---------- */
.slide {
  width: 100%; height: 100%;
  display: flex;
  position: relative;
  box-sizing: border-box;
}
.slide-pad {
  padding: 100px 100px 80px;
  width: 100%; height: 100%;
  box-sizing: border-box;
  display: flex; flex-direction: column;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 28px;
}
.eyebrow-on-dark { color: var(--coral-light); }

/* Headings */
h1.slide-title, h2.slide-title, .slide-title {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}

.gradient-text {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Card */
.mr-card {
  background: #fff;
  border-radius: var(--radius-2xl);
  padding: 40px;
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.mr-card-outline { background: #fff; border: 1px solid var(--border); box-shadow: none; }

/* Coral icon chip */
.chip {
  width: 88px; height: 88px;
  border-radius: 22px;
  background: var(--coral-soft);
  color: var(--coral);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 28px;
}
.chip svg { width: 44px; height: 44px; stroke-width: 1.75; }
.chip-fill { background: var(--coral); color: #fff; }

/* Pill / status */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 22px; border-radius: 9999px;
  background: var(--coral-soft); color: var(--coral);
  font-size: 22px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.pill-dark {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.95);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px);
}
.pill-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--coral); box-shadow: 0 0 18px var(--coral);
}

/* Buttons (CTAs in slides) */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 22px 38px;
  border-radius: 9999px;
  font-weight: 600; font-size: 26px;
  border: 0; cursor: default; white-space: nowrap;
  font-family: var(--font-body);
}
.btn-primary {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%);
  color: #fff;
  box-shadow: var(--shadow-coral);
}
.btn-outline {
  background: transparent; color: var(--coral);
  border: 2px solid var(--coral);
}
.btn-outline-light {
  background: transparent; color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
}

/* Hero / dark backgrounds */
.bg-navy {
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-soft) 100%);
  color: #fff;
}
.bg-navy .slide-title { color: #fff; }
.bg-navy .muted { color: rgba(255,255,255,0.72); }

.bg-coral {
  background: linear-gradient(135deg, var(--coral) 0%, var(--coral-light) 100%);
  color: #fff;
}
.bg-coral .slide-title { color: #fff; }
.bg-coral .eyebrow { color: rgba(255,255,255,0.95); }

.bg-light { background: var(--section-light); }
.bg-white { background: #fff; }

/* Stars overlay (matches site hero) */
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, rgba(245,142,118,0.7), transparent),
    radial-gradient(2px 2px at 32% 64%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 52% 22%, rgba(237,112,89,0.55), transparent),
    radial-gradient(2px 2px at 70% 50%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 8% 70%, rgba(245,142,118,0.5), transparent),
    radial-gradient(2px 2px at 86% 80%, rgba(237,112,89,0.4), transparent),
    radial-gradient(1px 1px at 90% 12%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 24% 88%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 60% 90%, rgba(245,142,118,0.45), transparent);
}
.orb {
  position: absolute; border-radius: 50%;
  background: rgba(237,112,89,0.20);
  filter: blur(80px); pointer-events: none;
}

/* Image placeholders */
.img-ph {
  background: linear-gradient(135deg, hsl(15 50% 82%), hsl(8 60% 70%));
  border-radius: var(--radius-2xl);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.85);
  font-size: 18px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  position: relative; overflow: hidden;
}
.img-ph-soft {
  background: var(--section-light);
  color: var(--muted);
  border: 1.5px dashed var(--border);
}
.img-ph-coral {
  background: var(--coral-soft);
  color: var(--coral);
  border: 1.5px dashed var(--coral);
}
.img-ph svg { width: 56px; height: 56px; opacity: 0.85; margin-bottom: 12px; }

/* Footer chrome on every slide (slide chrome) */
.slide-chrome {
  position: absolute; left: 100px; right: 100px; bottom: 36px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; color: var(--muted);
  font-weight: 500;
}
.bg-navy .slide-chrome,
.bg-coral .slide-chrome { color: rgba(255,255,255,0.6); }
.slide-chrome img { height: 44px; opacity: 0.85; }
.bg-coral .slide-chrome img,
.bg-navy .slide-chrome img { filter: brightness(0) invert(1); opacity: 0.92; }

/* Print-only layout label (visible in PDF + index, hidden during presentation) */
.layout-label {
  position: absolute;
  top: 28px; right: 100px;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(0,0,0,0.18);
}
.bg-navy .layout-label,
.bg-coral .layout-label { color: rgba(255,255,255,0.32); }
.hide-labels .layout-label { display: none; }

/* Utility */
.spacer-grow { flex: 1; }
.muted { color: var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   Slide entrance animations
   Subtle, staggered fade + lift on the active slide. Targets common content
   primitives so it works across every slide without per-component wiring.
   The stage marks the active slide with [data-deck-active]; we drive the
   animations off that attribute so they re-fire each time a slide becomes
   active (back/forward navigation included).
   ───────────────────────────────────────────────────────────────────────── */

@keyframes mr-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes mr-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes mr-zoom {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mr-orb-in {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Default state for animatable primitives — invisible until activated.
   Scoped under deck-stage so non-deck pages aren't affected. */
deck-stage .eyebrow,
deck-stage .pill,
deck-stage .slide-title,
deck-stage .slide p,
deck-stage .mr-card,
deck-stage .chip,
deck-stage .btn,
deck-stage .gradient-text,
deck-stage .img-ph,
deck-stage .slide-chrome {
  opacity: 0;
}
/* Only animate images that aren't absolutely positioned — abs-positioned
   images (like the rocket on Cover · Editorial) use inline transforms for
   centering, which an animation transform: scale(1) would clobber. */
deck-stage .slide img:not([style*="position: absolute"]):not([style*="position:absolute"]) {
  opacity: 0;
}

/* On activation, each primitive plays its entrance.
   Easing is the "expo-out"-ish curve used in editorial motion. */
deck-stage [data-deck-active] .eyebrow,
deck-stage [data-deck-active] .pill,
deck-stage [data-deck-active] .slide-title,
deck-stage [data-deck-active] .slide p,
deck-stage [data-deck-active] .mr-card,
deck-stage [data-deck-active] .chip,
deck-stage [data-deck-active] .btn,
deck-stage [data-deck-active] .gradient-text {
  animation: mr-rise 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Images (placeholders, full-bleed photos, logos) feel better with a slow zoom.
   Skip absolutely-positioned images — their inline transforms must not be
   overwritten by the animation. */
deck-stage [data-deck-active] .img-ph,
deck-stage [data-deck-active] .slide img:not([style*="position: absolute"]):not([style*="position:absolute"]) {
  animation: mr-zoom 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Slide chrome (footer logo + count) just fades — no movement. */
deck-stage [data-deck-active] .slide-chrome {
  animation: mr-fade 800ms ease-out 400ms both;
}

/* Stagger: walk the timeline forward as the eye moves down the slide.
   Eyebrow/pill first, then title, then body, then supporting elements. */
deck-stage [data-deck-active] .eyebrow,
deck-stage [data-deck-active] .pill        { animation-delay: 60ms; }
deck-stage [data-deck-active] .slide-title { animation-delay: 180ms; }
deck-stage [data-deck-active] .slide p     { animation-delay: 320ms; }
deck-stage [data-deck-active] .mr-card     { animation-delay: 380ms; }
deck-stage [data-deck-active] .chip,
deck-stage [data-deck-active] .btn         { animation-delay: 460ms; }
deck-stage [data-deck-active] .img-ph,
deck-stage [data-deck-active] .slide img:not([style*="position: absolute"]):not([style*="position:absolute"]) { animation-delay: 240ms; }

/* Per-child stagger within grids — first 8 children get a 60ms cascade.
   Covers 3-card grids, 4-quadrants, stats rows, timelines, etc. */
deck-stage [data-deck-active] .mr-card:nth-child(1) { animation-delay: 380ms; }
deck-stage [data-deck-active] .mr-card:nth-child(2) { animation-delay: 460ms; }
deck-stage [data-deck-active] .mr-card:nth-child(3) { animation-delay: 540ms; }
deck-stage [data-deck-active] .mr-card:nth-child(4) { animation-delay: 620ms; }
deck-stage [data-deck-active] .mr-card:nth-child(5) { animation-delay: 700ms; }
deck-stage [data-deck-active] .mr-card:nth-child(6) { animation-delay: 780ms; }

/* Per-child stagger for chips (agenda chips, tag rows). */
deck-stage [data-deck-active] .chip:nth-child(1) { animation-delay: 460ms; }
deck-stage [data-deck-active] .chip:nth-child(2) { animation-delay: 520ms; }
deck-stage [data-deck-active] .chip:nth-child(3) { animation-delay: 580ms; }
deck-stage [data-deck-active] .chip:nth-child(4) { animation-delay: 640ms; }
deck-stage [data-deck-active] .chip:nth-child(5) { animation-delay: 700ms; }
deck-stage [data-deck-active] .chip:nth-child(6) { animation-delay: 760ms; }

/* Orbs: leave alone. They already have inline `mr-float` animations that
   shouldn't be clobbered, and they're decorative enough that an entrance
   isn't needed. */

/* Print + reduced-motion: skip the animations entirely so PDF/PPTX export
   and accessibility-conscious viewers see the final composed state. */
@media print, (prefers-reduced-motion: reduce) {
  deck-stage .eyebrow,
  deck-stage .pill,
  deck-stage .slide-title,
  deck-stage .slide p,
  deck-stage .mr-card,
  deck-stage .chip,
  deck-stage .btn,
  deck-stage .gradient-text,
  deck-stage .img-ph,
  deck-stage .slide img,
  deck-stage .slide-chrome,
  deck-stage .orb {
    opacity: 1;
    animation: none !important;
  }
}