/* ── Brand tokens — the ONLY place colors are defined. Set --dark,
   --navy, --accent and --gold from the company's real site; the rest
   derive from them (color-mix: Chrome 111+ / Safari 16.2+). ── */
:root {
  --dark:      oklch(0.14 0.010 303);
  --dark-2:    color-mix(in srgb, var(--dark) 70%, black);
  --navy:      oklch(0.19 0.006 303);
  --accent:    oklch(0.78 0.121 291.9);
  --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.075 291.9);
  --gold-d:    color-mix(in srgb, var(--gold) 85%, black);
  --white:     #ffffff;
  --cta-ink:   var(--dark-2);  /* the accent is a light lavender, so the CTA label takes the dark ink */
  --font-head: 'Sora', system-ui, sans-serif;
  --font:      'Sora', system-ui, sans-serif;
  --mono:      'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', 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 — same "fixed shell / rotating cards"
   split the Knorex reference banner used with royalSlider. */
#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 background: the IR page's concentric rings, redrawn per slide as inline SVG (no photography on that page).
   Art lives in the clear band between the top bar and the stat chip (about y 62-236). */
.slide-bg {
  position:absolute;
  inset:0;
  z-index:1;
  user-select:none;
}
.slide-bg svg { display:block; width:100%; height:100%; }
.m-ghost   { fill:none; stroke:var(--accent); stroke-opacity:0.13; stroke-width:1; }
.m-ring    { fill:none; stroke:var(--accent); stroke-width:1.5; }
.m-ring-lt { fill:none; stroke:var(--accent-lt); stroke-width:1.1; stroke-opacity:0.85; }
.m-wall    { stroke-width:2.6; }
.m-dash    { stroke-dasharray:3 4; }
.m-disc    { fill:var(--accent); }
.m-core    { fill:var(--accent); }
.m-glow    { fill:var(--accent); fill-opacity:0.16; }
.m-line    { fill:none; stroke:var(--accent-lt); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.m-inhib   { fill:none; stroke:var(--accent-lt); stroke-width:1.8; stroke-linecap:round; }
.m-trav    { fill:var(--accent-lt); }
.m-label {
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:0.08em;
  fill:var(--accent-lt);
}
.m-label.strong { fill:var(--white); }
.m-label.m-case { text-transform:none; letter-spacing:0.04em; }
.motif-pulse {                      /* the IR hero's slow ring pulse */
  transform-box:fill-box;
  transform-origin:center;
  animation:ring-pulse 6s ease-in-out infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform:scale(1);     opacity:0.6; }
  50%      { transform:scale(1.07);  opacity:1; }
}

.slide-scrim-top, .slide-scrim-bottom {
  position:absolute;
  left:0; right:0;
  z-index:2;
  pointer-events:none;
}
.slide-scrim-top {                      /* motif art needs no photo scrim, only a soft fade under the header */
  top:0; height:66px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--dark-2) 92%, transparent) 0%, color-mix(in srgb, var(--dark-2) 0%, transparent) 100%);
}
.slide-scrim-bottom {
  bottom:0; height:336px;
  background:linear-gradient(0deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 93%, transparent) 42%, 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 mid-image stat chip (per slide) */
.mid-chip {
  position:absolute;
  top:258px; left:18px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 13px 9px 11px;
  background:color-mix(in srgb, var(--dark) 58%, 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-head);
  font-weight:800;
  font-size:19px;
  color:var(--white);
  white-space:nowrap;
}
.chip-num em { font-style:normal; color:var(--accent); }
.chip-label {
  font-family:var(--mono);
  font-size:8px;
  line-height:1.3;
  color:rgba(255,255,255,0.82);
}

/* Rotating headline block, pinned above the fixed bottom bar */
.copy-bottom {
  position:absolute;
  left:0; right:0;
  bottom:158px;
  padding:0 18px;
}
.kicker {
  font-family:var(--mono);
  font-weight:400;
  font-size:8px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--accent-lt);
  margin-bottom:6px;
}
.copy-bottom h1 {
  font-family:var(--font-head);
  font-weight:700;
  font-size:20px;
  line-height:1.14;
  letter-spacing:-0.01em;
  color:var(--white);
}
.copy-bottom h1 em { font-style:normal; color:var(--accent); }
.copy-bottom p {
  margin-top:7px;
  font-size:11px;
  line-height:1.4;
  color:rgba(255,255,255,0.8);
  max-width:255px;
}

/* ── 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:16px 18px 0;
}
#logo { display:flex; align-items:center; gap:7px; }
#logo img { display:block; width:90px; height:20px; }
#eyebrow {
  font-family:var(--mono);
  font-weight:400;
  font-size:8.2px;
  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) 45%, transparent);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  color:rgba(255,255,255,0.9);
  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 12px;
}

#dots {
  display:flex;
  gap:6px;
  margin-bottom:11px;
}
.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: the shorthand resets background-clip and paints the whole 15px hit area as a square */

#stat-row {
  display:flex;
  align-items:center;
  gap:14px;
}
.stat { display:flex; flex-direction:column; gap:2px; }
.stat-num {
  font-family:var(--font-head);
  font-weight:800;
  font-size:15px;
  color:var(--white);
}
.stat-num em { font-style:normal; color:var(--accent); }
.stat-label {
  font-family:var(--mono);
  font-size:7.6px;
  font-weight:400;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
}
.stat-div { width:1px; height:26px; background:rgba(255,255,255,0.18); }

#cta {
  margin-top:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  height:42px;
  background:var(--accent);
  border-radius:3px;
  color:var(--cta-ink);
  font-family:var(--font-head);
  font-weight:800;
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent);
  animation:cta-pulse 1.8s ease-in-out 2.6s 6;
}
#cta-arrow { width:13px; height:13px; }

/* Required disclosure line under the CTA */
#disclosure {
  margin-top:8px;
  font-family:var(--mono);
  font-size:6.6px;
  letter-spacing:0.03em;
  line-height:1.2;
  text-align:center;
  color:rgba(255,255,255,0.55);
}
@keyframes cta-pulse {
  0%, 100% { box-shadow:0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
  50%      { box-shadow:0 8px 26px color-mix(in srgb, var(--accent) 65%, transparent), 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
}

/* ── 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-pulse { animation:none; }
  .m-trav { display:none; }
  #cta { animation:none; }
  .reveal { transition-duration:.01s; transition-delay:0s !important; }
  .slide, .slide-copy { transition-duration:.2s; }
}