/* ───────────────────────────────────────────────────────────
   Anthropic — Oxford Keynote
   Warm ivory + ink, coral/clay accent. Editorial serif + grotesque.
   ─────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --ivory:        #F0EEE6;
  --ivory-deep:   #E7E3D6;
  --ivory-line:   #DBD6C7;
  --ink:          #1A1A18;
  --ink-soft:     #2A2926;
  --ink-panel:    #211F1C;

  /* Accent — Anthropic clay/coral family */
  --coral:        #CC785C;
  --coral-bright: #DA8A6B;
  --clay:         #D9A87E;
  --terracotta:   #B5573A;
  --coral-glow:   rgba(204,120,92,0.45);

  /* Text */
  --ink-90:  #1A1A18;
  --ink-70:  rgba(26,26,24,0.74);
  --ink-50:  rgba(26,26,24,0.52);
  --ink-30:  rgba(26,26,24,0.30);
  --paper-90: #F4F2EC;
  --paper-70: rgba(244,242,236,0.74);
  --paper-50: rgba(244,242,236,0.50);
  --paper-30: rgba(244,242,236,0.30);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --grot:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

deck-stage:not(:defined) { visibility: hidden; }

html, body {
  margin: 0;
  background: #0d0d0c;
  font-family: var(--grot);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Every slide fills the canvas */
section {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  position: relative;
  background: var(--ivory);
  color: var(--ink-90);
}
section.dark {
  background: var(--ink);
  color: var(--paper-90);
}

/* ── Shared type primitives ───────────────────────────────── */
.kicker {
  font-family: var(--grot);
  font-weight: 600;
  font-size: 23px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.kicker--coral { color: var(--coral); }
.kicker--ink   { color: var(--ink-50); }
.kicker--paper { color: var(--paper-50); }

.serif-display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.coral-word { color: var(--coral); font-style: italic; }

.body-lg {
  font-family: var(--grot);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.5;
  letter-spacing: -0.005em;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--grot);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 999px;
}

/* ── Top-left wordmark + slide footer ─────────────────────── */
.wordmark {
  font-family: var(--grot);
  font-weight: 700;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
}
.slide-foot {
  position: absolute;
  left: 96px; right: 96px; bottom: 54px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--grot);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.slide-foot.on-ink { color: var(--paper-30); }
.slide-foot.on-ivory { color: var(--ink-30); }
.slide-foot span { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS — base = visible; animate from hidden,
   only when slide is active + motion allowed.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  [data-anim] { opacity: 0; }
  section[data-deck-active] [data-anim] {
    opacity: 1;
    animation: fadeUp 0.9s cubic-bezier(0.22,0.61,0.36,1) both;
    animation-delay: var(--d, 0s);
  }
  section[data-deck-active] [data-anim="fade"] { animation-name: fadeOnly; }
  section[data-deck-active] [data-anim="scale"] { animation-name: scaleIn; }
  section[data-deck-active] [data-anim="wipe"]  { animation-name: wipeIn; }

  @keyframes fadeUp   { from { opacity:0; transform: translateY(26px); } to { opacity:1; transform:none; } }
  @keyframes fadeOnly { from { opacity:0; } to { opacity:1; } }
  @keyframes scaleIn  { from { opacity:0; transform: scale(0.9); } to { opacity:1; transform:none; } }
  @keyframes wipeIn   { from { opacity:0; clip-path: inset(0 100% 0 0); } to { opacity:1; clip-path: inset(0 0 0 0); } }
}

/* The coral underline that draws in on the title */
@media (prefers-reduced-motion: no-preference) {
  section[data-deck-active] .draw-line { animation: drawLine 1.1s 0.7s cubic-bezier(0.7,0,0.2,1) both; }
  @keyframes drawLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}