/* ── Brand tokens: the ONLY place colors are defined. Values are the
   Tvardi IR page's own :root (--deep, --ink, --ember, --flame-tip);
   the rest derive from them (color-mix: Chrome 111+ / Safari 16.2+). ── */
:root {
  --dark:      oklch(0.22 0.006 60);   /* site --deep: permanent charcoal */
  --dark-2:    color-mix(in srgb, var(--dark) 70%, black);
  --navy:      oklch(0.26 0.006 60);   /* site --ink */
  --accent:    oklch(0.74 0.155 62);   /* site --ember #F5A623 (fills / text on dark only) */
  --accent-d:  color-mix(in srgb, var(--accent) 82%, black);
  --accent-lt: color-mix(in srgb, var(--accent) 62%, white);
  --gold:      oklch(0.86 0.14 88);    /* site --flame-tip #FFCD34 */
  --gold-d:    color-mix(in srgb, var(--gold) 85%, black);
  --white:     #ffffff;
  --warm-hi:   oklch(0.95 0.015 80);   /* warm off-white for motif labels */
  --orbit:     oklch(0.92 0.02 78 / 0.26);
  --font-head: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font:      'Public Sans', system-ui, sans-serif;
  --mono:      'IBM Plex Mono', ui-monospace, monospace;
  --ease:      cubic-bezier(0.16,1,0.3,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html, body { width:300px; height:600px; overflow:hidden; background:var(--dark); }
body { font-family:var(--font); -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { border:0; background:none; font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ── Canvas ─────────────────────────────────────────────────────────
   Fixed 300x600 stage. A crossfading slide stack sits at the bottom of
   the z-order; persistent chrome (logo, nav, stats, CTA) is pinned on
   top of it and never rotates. */
#banner {
  position:relative;
  width:300px;
  height:600px;
  overflow:hidden;
  cursor:pointer;
  background:var(--dark);
}

/* ── Slide stack ────────────────────────────────────────────────── */
#slides { position:absolute; inset:0; z-index:1; }

.slide {
  position:absolute;
  inset:0;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity 0.9s ease;
}
.slide.active { opacity:1; z-index:2; pointer-events:auto; }

/* Motif layer: charcoal + a soft ember glow behind the motif, which sits
   in the upper half (y ~70-255) under the top bar. */
.slide-bg {
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  background:
    radial-gradient(circle 170px at 50% 152px, color-mix(in srgb, var(--accent) 17%, transparent) 0%, color-mix(in srgb, var(--accent) 5%, transparent) 55%, transparent 100%),
    radial-gradient(120% 34% at 50% 104%, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 100%),
    var(--dark);
  user-select:none;
}
.motif {
  position:absolute;
  top:0; left:0;
  width:300px; height:300px;
  overflow:visible;
}

/* One shape language across all four variants */
.motif .orbit { fill:none; stroke:var(--orbit); stroke-width:1.1; stroke-dasharray:2.4 5.6; }
.motif .paths path,
.motif .flow { fill:none; stroke:var(--accent); stroke-width:1.2; stroke-linecap:round; opacity:.5; }
.motif .pulse { fill:var(--gold); offset-rotate:0deg; opacity:0; animation:travel 4.6s linear infinite; }
.motif .pulses .pulse:nth-child(2) { animation-delay:1.5s; }
.motif .pulses .pulse:nth-child(3) { animation-delay:2.9s; }
.motif .pulses .pulse:nth-child(4) { animation-delay:.7s; }
.motif .pulses .pulse:nth-child(5) { animation-delay:2.1s; }
.motif .pulses .pulse:nth-child(6) { animation-delay:3.5s; }
@keyframes travel {
  0%   { offset-distance:0%;  opacity:0; }
  10%  { opacity:.95; }
  70%  { opacity:.95; }
  86%  { offset-distance:92%; opacity:0; }
  100% { offset-distance:92%; opacity:0; }
}
.motif .node { fill:var(--gold); animation:node-pulse 2.6s ease-in-out infinite; }
@keyframes node-pulse { 0%,100% { r:4.5; opacity:1; } 50% { r:6.4; opacity:.65; } }
.motif .flame { transform-box:fill-box; transform-origin:center bottom; animation:breathe 4.2s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
.motif .tag {
  font-family:var(--mono); font-weight:600; font-size:7.5px; letter-spacing:.14em;
  fill:var(--gold);
}
/* charcoal halo keeps motif tags crisp where pathways cross them */
.motif .tag, .motif .lbl-flow {
  paint-order:stroke; stroke:color-mix(in srgb, var(--dark) 85%, transparent); stroke-width:2.2px; stroke-linejoin:round;
}
.motif .lbl {
  font-family:var(--mono); font-weight:600; font-size:7px; letter-spacing:.12em;
  fill:color-mix(in srgb, var(--warm-hi) 80%, transparent);
}
.motif .lbl-sub {
  font-family:var(--mono); font-weight:500; font-size:6.6px; letter-spacing:.02em;
  fill:color-mix(in srgb, var(--warm-hi) 58%, transparent);
}

/* Ambient motion: slow breathing scale + drift on the motif */
.motif .drift {
  transform-box:view-box;
  transform-origin:150px 150px;
  animation:drift 8s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform:scale(1) translate(0, 0); }
  to   { transform:scale(1.045) translate(0, -2px); }
}

/* Slide 2 · inhibition: pathways reach STAT3; a tight ring on the node
   itself (the drug binding the shared node) and the flame goes dim */
.motif .ring { fill:none; stroke:var(--gold); stroke-width:1.5; opacity:.85; }
.motif .leader { fill:none; stroke:color-mix(in srgb, var(--gold) 70%, transparent); stroke-width:.9; stroke-linecap:round; }
.motif .callout { paint-order:stroke; stroke:color-mix(in srgb, var(--dark) 85%, transparent); stroke-width:2.2px; stroke-linejoin:round; }
.motif .pulses-stop .pulse { animation-name:travel-stop; }
@keyframes travel-stop {
  0%   { offset-distance:0%;   opacity:0; }
  10%  { opacity:.95; }
  62%  { opacity:.95; }
  80%  { offset-distance:100%; opacity:0; }
  100% { offset-distance:100%; opacity:0; }
}
.motif .node-off { fill:var(--dark); stroke:color-mix(in srgb, var(--warm-hi) 45%, transparent); stroke-width:1.2; animation:none; }
.motif .tag-off { fill:color-mix(in srgb, var(--warm-hi) 62%, transparent); }
.motif .flame-low { opacity:.32; }

/* Slide 3 · prodrug: clock sweep, molecule, detaching phosphate cap */
.motif .ticks path { fill:none; stroke:var(--orbit); stroke-width:1.2; stroke-linecap:round; }
.motif .sweep {
  fill:none; stroke:var(--gold); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:15.5 100; stroke-dashoffset:15.5;
  animation:sweep 4.6s var(--ease) infinite;
}
@keyframes sweep {
  0%   { stroke-dashoffset:15.5; opacity:1; }
  35%  { stroke-dashoffset:0;    opacity:1; }
  88%  { stroke-dashoffset:0;    opacity:1; }
  100% { stroke-dashoffset:0;    opacity:0; }
}
.motif .mol path { fill:none; stroke:var(--accent); stroke-width:1.3; stroke-linejoin:round; }
.motif .mol circle { fill:var(--accent); }
.motif .cap { animation:detach 4.6s var(--ease) infinite; }
.motif .cap-bond { stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; }
.motif .cap-ring { fill:var(--dark); stroke:var(--gold); stroke-width:1.3; }
.motif .cap-p { font-family:var(--mono); font-weight:600; font-size:8px; fill:var(--gold); }
/* the sweep completes (conversion), then the cap lets go */
@keyframes detach {
  0%, 55% { transform:translate(0, 0); opacity:1; }
  74%     { transform:translate(-9px, -8px); opacity:0; }
  90%     { transform:translate(0, 0); opacity:0; }
  100%    { transform:translate(0, 0); opacity:1; }
}
.motif .lbl-flow { font-size:6.8px; letter-spacing:.14em; fill:var(--accent-lt); }

/* Slide 4 · catalyst: sourced milestones, flame over the next node */
.motif .drift-rail { transform-origin:150px 167px; }
.motif .rail-base { stroke:var(--orbit); stroke-width:1.2; }
.motif .rail-done { stroke:var(--accent); stroke-width:2; stroke-linecap:round; }
.motif .rail-next { stroke:var(--accent); stroke-width:1.6; stroke-dasharray:3 4.5; opacity:.8; }
.motif .step-done circle { fill:var(--accent); }
.motif .step-done .halo { fill:var(--accent); opacity:.16; }
.motif .step-next { fill:var(--dark); stroke:var(--gold); stroke-width:1.8; }
.motif .ping { fill:none; stroke:var(--gold); stroke-width:1.2; animation:ping 2.6s ease-out infinite; }
@keyframes ping { 0% { r:6; opacity:.85; } 100% { r:19; opacity:0; } }
.motif .pulses-rail .pulse { animation-duration:3.6s; }
.motif .pulses-rail .pulse:nth-child(2) { animation-delay:1.2s; }
.motif .pulses-rail .pulse:nth-child(3) { animation-delay:2.4s; }
.motif .lbl-step { font-size:6.8px; letter-spacing:.06em; }
.motif .lbl-next { fill:var(--gold); }

/* Inactive slides stop animating (saves CPU while hidden) */
.slide:not(.active) .motif *,
.slide:not(.active) .motif .drift { animation-play-state:paused; }

.slide-scrim-top, .slide-scrim-bottom {
  position:absolute;
  left:0; right:0;
  z-index:2;
  pointer-events:none;
}
.slide-scrim-top {
  top:0; height:78px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--dark) 92%, transparent) 0%, color-mix(in srgb, var(--dark) 55%, transparent) 60%, color-mix(in srgb, var(--dark) 0%, transparent) 100%);
}
.slide-scrim-bottom {
  bottom:0; height:340px;
  background:linear-gradient(0deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 94%, transparent) 50%, color-mix(in srgb, var(--dark) 0%, transparent) 100%);
}

.slide-copy {
  position:absolute;
  inset:0;
  z-index:3;
  transform:translateY(12px);
  transition:transform 0.9s var(--ease);
}
.slide.active .slide-copy { transform:translateY(0); }

/* Floating stat chip (per slide) */
.mid-chip {
  position:absolute;
  top:262px; left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 13px 8px 11px;
  background:color-mix(in srgb, var(--navy) 78%, transparent);
  border-left:3px solid var(--accent);
  border-radius:0 3px 3px 0;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.chip-num {
  font-family:var(--font);
  font-weight:800;
  font-size:21px;
  line-height:1;
  letter-spacing:-0.01em;
  color:var(--white);
  white-space:nowrap;
}
.chip-num em { font-style:normal; color:var(--accent); }
.chip-label {
  font-family:var(--font);
  font-size:8.6px;
  line-height:1.3;
  font-weight:500;
  color:rgba(255,255,255,0.84);
}

/* Rotating headline block, pinned above the fixed bottom block */
.copy-bottom {
  position:absolute;
  left:0; right:0;
  bottom:150px;
  padding:0 18px;
}
.kicker {
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-weight:600;
  font-size:7.8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-lt);
  margin-bottom:7px;
}
.kicker::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--accent); flex:none; }
.copy-bottom h1 {
  font-family:var(--font-head);
  font-weight:500;
  font-size:26px;
  line-height:1.06;
  letter-spacing:-0.012em;
  color:var(--white);
}
.copy-bottom h1 em { font-style:italic; color:var(--accent); }
.copy-bottom p {
  margin-top:8px;
  font-size:10.5px;
  line-height:1.4;
  color:rgba(255,255,255,0.78);
}

/* ── Persistent chrome (never rotates) ─────────────────────────── */
#top-bar {
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:15px 18px 0;
}
#logo { display:flex; align-items:center; gap:7px; }
#logo .mark { width:14.5px; height:19px; flex:none; }
#wordmark {
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-family:var(--font);
  font-weight:700;
  font-size:16px;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--white);
}
#wordmark small {
  font-size:6.6px;
  font-weight:600;
  letter-spacing:0.19em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
}
#eyebrow {
  font-family:var(--mono);
  font-weight:600;
  font-size:8px;
  letter-spacing:0.1em;
  color:var(--accent-lt);
}

.nav-arrow {
  position:absolute;
  top:154px;
  width:26px; height:26px;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--dark) 55%, transparent);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:50%;
  color:rgba(255,255,255,0.88);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transition:background .2s ease, transform .15s ease;
}
.nav-arrow svg { width:13px; height:13px; }
.nav-arrow:active { transform:scale(0.9); background:color-mix(in srgb, var(--accent) 55%, transparent); }
#arrow-prev { left:10px; }
#arrow-next { right:10px; }

#bottom-fixed {
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:5;
  padding:0 18px 11px;
}

#dots {
  display:flex;
  gap:6px;
  margin-bottom:10px;
}
.dot {
  width:14px; height:3px;
  border-radius:2px;
  background:rgba(255,255,255,0.28);
  transition:background .3s ease, width .3s ease;
  padding:6px 0;
  background-clip:content-box;
  box-sizing:content-box;
}
.dot.active { background-color:var(--accent); width:20px; }  /* background-color, not the shorthand: keeps background-clip */

#stat-row {
  display:flex;
  align-items:center;
  gap:13px;
}
.stat { display:flex; flex-direction:column; gap:3px; }
.stat-num {
  font-family:var(--font);
  font-weight:800;
  font-size:13.5px;
  line-height:1.1;
  letter-spacing:-0.01em;
  color:var(--white);
  white-space:nowrap;
}
.stat-num em { font-style:normal; font-weight:600; color:var(--accent); }
.stat-label {
  font-family:var(--mono);
  font-size:7px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  white-space:nowrap;
}
.stat-div { width:1px; height:24px; background:rgba(255,255,255,0.18); }

#cta {
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:40px;
  background:var(--accent);
  border-radius:3px;
  color:var(--dark);
  font-family:var(--font);
  font-weight:800;
  font-size:11px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent);
  animation:cta-pulse 1.8s ease-in-out 2.6s 6;
}
#cta-arrow { width:13px; height:13px; }
@keyframes cta-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 30%, transparent); }
  50%      { box-shadow:0 8px 28px color-mix(in srgb, var(--accent) 55%, transparent); }
}

#disclosure {
  margin-top:8px;
  font-family:var(--mono);
  font-size:6.8px;
  letter-spacing:0.04em;
  line-height:1.2;
  text-align:center;
  color:rgba(255,255,255,0.55);
}

/* ── Entrance sequence (initial load only) ─────────────────────── */
.reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
#banner.is-live .reveal { opacity:1; transform:none; }
#top-bar[data-delay="0"] { transition-delay:.05s; }
#bottom-fixed[data-delay="4"] { transition-delay:.55s; }

#click-tag-wrapper { position:absolute; width:0; height:0; overflow:hidden; }

@media (prefers-reduced-motion: reduce) {
  .motif *, .motif .drift { animation:none !important; }
  .motif .pulse { opacity:.7; offset-distance:55%; }
  .motif .sweep { stroke-dashoffset:0; }
  .motif .ping { opacity:0; }
  #cta { animation:none; }
  .reveal { transition-duration:.01s; transition-delay:0s !important; }
  .slide, .slide-copy { transition-duration:.2s; }
}