/* home.css — per-section image panels + fullpage scroll */

/* ══════════════════════════════════════════════════════
   SECTION BASE
   ══════════════════════════════════════════════════════ */
.home-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════
   GRID LAYOUT — two-column sections
   ══════════════════════════════════════════════════════ */
.hs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Text column — shared base */
.hs-txt {
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 60px;
  position: relative;
  z-index: 2;
}

/* Text LEFT — left-pad aligns with navbar brand mark (container centering + inner gutter) */
.hs-txt-l {
  padding-left: max(var(--gutter), calc((100vw - var(--container, 1240px)) / 2 + var(--gutter)));
  padding-right: clamp(24px, 3vw, 48px);
}

/* Text RIGHT — right-pad aligns with navbar content edge (container centering + inner gutter) */
.hs-txt-r {
  padding-left:  clamp(24px, 3vw, 48px);
  padding-right: max(var(--gutter), calc((100vw - var(--container, 1240px)) / 2 + var(--gutter)));
}

/* Image columns */
.hs-img {
  position: relative;
  overflow: hidden;
}

/* Full-width sections (audience, cta) */
.hs-full-width {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hs-full {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: max(var(--gutter), calc((100vw - var(--container, 1240px)) / 2));
  padding-block: 80px 60px;
}

/* ══════════════════════════════════════════════════════
   SECTION CONTENT
   ══════════════════════════════════════════════════════ */
.home-section__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  max-width: 520px;
}
.home-section__content.wide { max-width: 900px; }

.home-section__hgroup { display: flex; flex-direction: column; gap: 16px; }

.home-section__h1,
.home-section__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}
.home-section__h1 { font-size: clamp(42px, 4.8vw, 76px); }
.home-section__h2 { font-size: clamp(34px, 4.0vw, 62px); }
.home-section__h1 em,
.home-section__h2 em { font-style: italic; color: var(--forest); }

.home-section__lede {
  font-family: var(--font-display);
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.54;
  color: var(--ink-2);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ══════════════════════════════════════════════════════
   SECTION ATMOSPHERES
   ══════════════════════════════════════════════════════ */
.atm-cream {
  background: linear-gradient(180deg,
    transparent,
    oklch(0.95 0.018 75 / 0.55) 20%,
    oklch(0.95 0.018 75 / 0.55) 80%,
    transparent);
}
.atm-sage {
  background: linear-gradient(180deg,
    transparent,
    oklch(0.93 0.032 155 / 0.55) 20%,
    oklch(0.93 0.032 155 / 0.55) 80%,
    transparent);
}
.atm-terra {
  background: linear-gradient(180deg,
    transparent,
    oklch(0.94 0.026 38 / 0.50) 20%,
    oklch(0.94 0.026 38 / 0.50) 80%,
    transparent);
}

/* Proof section — dark/light split */
.proof-section { background: oklch(0.18 0.012 200); }
.proof-left {
  background: oklch(0.18 0.012 200);
  color: oklch(0.92 0.008 145);
}
.proof-left .home-section__h2     { color: oklch(0.96 0.012 145); }
.proof-left .home-section__h2 em  { color: oklch(0.76 0.13 155); }
.proof-left .home-section__lede   { color: oklch(0.78 0.012 145); }
.proof-left .eyebrow              { color: oklch(0.68 0.020 145); }
.proof-right {
  background: oklch(0.975 0.008 145);
  border-left: 1px solid oklch(0.32 0.012 200 / 0.4);
}

/* ══════════════════════════════════════════════════════
   PANEL BASE — absolute-fills .hs-img column
   ══════════════════════════════════════════════════════ */
.hs-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 48px clamp(16px, 2.5vw, 44px);
}

.panel-img-wrap {
  position: relative;
  width: min(90%, 440px);
  /* paper bg gives mix-blend-mode multiply a correct blending target inside stacking contexts */
  background: var(--paper);
}
.panel-img-wrap.dv-wrap {
  width: min(96%, 540px);
  /* Slow, deliberate roll-in — lag behind scroll so the rotation is clearly visible */
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.panel-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Da Vinci images: multiply blends against the panel-img-wrap paper bg inside its transform stacking ctx */
.davinci-panel .panel-img {
  mix-blend-mode: multiply;
}

/* ══════════════════════════════════════════════════════
   HEART PANEL — wraps HeartBase SVG
   ══════════════════════════════════════════════════════ */
.heart-panel {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.heart-panel.panel-in {
  opacity: 1;
}

/* SVG panel container — sizes and centres the heart */
.heart-svg-panel {
  width: min(88%, 460px);
  aspect-ratio: 480 / 520;
  position: relative;
}

/* The SVG itself */
.heart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── Draw-on paths (pathLength="1" trick) ─────────────
   Before .drawn: hidden (dashoffset=1).
   After .drawn added via JS: transition to dashoffset=0.
   --dur and --del are set inline per path. */
.dp {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: none;
}
.heart-svg.drawn .dp {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--dur, 0.8s) cubic-bezier(0.4, 0, 0.2, 1) var(--del, 0s);
}

/* ── Halo — slow radial pulse ──────────────────────── */
.h-halo {
  transform-origin: 240px 295px;
  transform-box: view-box;
  animation: h-halo-pulse 3.8s ease-in-out infinite;
}
@keyframes h-halo-pulse {
  0%, 100% { opacity: 0.82; transform: scale(1); }
  50%       { opacity: 1;    transform: scale(1.04); }
}

/* ══════════════════════════════════════════════════════
   HEART FRAME PLAYER — hero section PNG flipbook
   ══════════════════════════════════════════════════════ */

/* Fill the entire right panel, overflow-clip the wide canvas */
.hfp-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Canvas + overlay container: tall, 16:9 aspect ratio */
.hfp-area {
  position: relative;
  height: min(52vh, calc(100% - 120px));
  aspect-ratio: 16 / 9;
  flex-shrink: 0;          /* allow overflow, clipped by .hfp-wrap */
}

/* Canvas: absolute-fills area, red→CORAL filter + layered glow */
.hfp-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  filter:
    hue-rotate(10deg)
    saturate(0.80)
    brightness(2.1)
    drop-shadow(0 0 20px oklch(0.60 0.17 25 / 0.55))
    drop-shadow(0 0 54px oklch(0.60 0.17 25 / 0.22));
  transition: opacity 0.5s ease;
  transform-origin: center center;
}

/* Overlay SVG: same footprint as canvas, can bleed outside (clipped by wrap) */
.hfp-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* ── All overlay elements: hidden until drawing starts ─ */
.hfp-el {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.hfp-probe { transition: opacity 1.0s ease var(--del, 0s); }
.hfp-corner { transition: opacity 0.8s ease var(--del, 0s); }
.hfp-pulse-ring { opacity: 0; }

/* ── Reveal on drawing phase ───────────────────────── */
.hfp-drawing .hfp-halo       { opacity: 1;    transition-delay: 0.6s; }
.hfp-drawing .hfp-center-dot { opacity: 1;    transition-delay: 0.6s; }
.hfp-drawing .hfp-ring-1     { opacity: 0.52; transition-delay: 1.0s; }
.hfp-drawing .hfp-ring-2     { opacity: 0.34; transition-delay: 1.7s; }
.hfp-drawing .hfp-ring-3     { opacity: 0.20; transition-delay: 2.4s; }
.hfp-drawing .hfp-tick-group { opacity: 1;    transition-delay: 2.8s; }
.hfp-drawing .hfp-corner     { opacity: 1; }

/* ── Full reveal + beating animations ──────────────── */
.hfp-beating .hfp-halo       { opacity: 1; }
.hfp-beating .hfp-center-dot { opacity: 1; }
.hfp-beating .hfp-ring-1     { opacity: 0.55; }
.hfp-beating .hfp-ring-2     { opacity: 0.36; }
.hfp-beating .hfp-ring-3     { opacity: 0.22; }
.hfp-beating .hfp-tick-group { opacity: 1; }
.hfp-beating .hfp-corner     { opacity: 1; }
.hfp-beating .hfp-probe      { opacity: 1; }

/* ── Ring slow rotation ────────────────────────────── */
.hfp-ring {
  transform-box: view-box;
  transform-origin: 640px 360px;
}
.hfp-drawing .hfp-ring-1, .hfp-beating .hfp-ring-1 {
  animation: hfp-spin-cw  26s linear infinite;
}
.hfp-drawing .hfp-ring-2, .hfp-beating .hfp-ring-2 {
  animation: hfp-spin-ccw 38s linear infinite;
}
.hfp-drawing .hfp-ring-3, .hfp-beating .hfp-ring-3 {
  animation: hfp-spin-cw  54s linear infinite;
}
@keyframes hfp-spin-cw  { to { transform: rotate(360deg);  } }
@keyframes hfp-spin-ccw { to { transform: rotate(-360deg); } }

/* ── Halo slow breathe ──────────────────────────────── */
.hfp-halo {
  transform-box: view-box;
  transform-origin: 640px 360px;
}
.hfp-drawing .hfp-halo, .hfp-beating .hfp-halo {
  animation: hfp-halo-breathe 4.2s ease-in-out infinite;
}
@keyframes hfp-halo-breathe {
  0%, 100% { transform: scale(1);     opacity: 0.82; }
  50%       { transform: scale(1.06); opacity: 1;    }
}

/* ── Probe dot pulse ────────────────────────────────── */
.hfp-probe-dot {
  transform-box: fill-box;
  transform-origin: center center;
}
.hfp-beating .hfp-probe-dot {
  animation: hfp-probe-pulse 2.5s ease-in-out infinite;
}
@keyframes hfp-probe-pulse {
  0%, 100% { opacity: 0.80; transform: scale(1);    }
  50%       { opacity: 1;   transform: scale(1.28); }
}

/* ── Canvas heartbeat (lub-dub scale) ──────────────── */
.hfp-beating .hfp-canvas {
  animation: hfp-heartbeat 1.05s ease-in-out infinite;
}
@keyframes hfp-heartbeat {
  0%   { transform: scale(1);     }
  12%  { transform: scale(1.055); }
  22%  { transform: scale(1);     }
  34%  { transform: scale(1.032); }
  52%  { transform: scale(1);     }
  100% { transform: scale(1);     }
}

/* ── Pulse ring: expands and fades on each beat ─────── */
.hfp-pulse-ring {
  transform-box: view-box;
  transform-origin: 640px 360px;
}
.hfp-beating .hfp-pulse-ring {
  animation: hfp-beat-pulse 1.05s ease-out infinite;
}
@keyframes hfp-beat-pulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  14%  { transform: scale(1.07); opacity: 0.70; }
  42%  { transform: scale(1.22); opacity: 0;    }
  100% { transform: scale(1.22); opacity: 0;    }
}

/* ── Scan sweep — one-shot horizontal line ──────────── */
.hfp-scanline {
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
}
.hfp-drawing .hfp-scanline {
  /* duration matches 120 frames @ 20fps = 6.0s */
  animation: hfp-scan 6.0s linear 0s 1 forwards;
}
@keyframes hfp-scan {
  0%   { transform: translateY(0);    opacity: 0;   }
  2%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateY(720px); opacity: 0;  }
}

/* ── View annotation + status label ────────────────── */
.hfp-annotation { transition: opacity 1.2s ease var(--del, 0.5s); }

.hfp-drawing .hfp-annotation { opacity: 1; }
.hfp-beating .hfp-annotation { opacity: 1; }

.hfp-status { transition: opacity 0.8s ease var(--del, 0.2s); }
.hfp-drawing .hfp-status { opacity: 1; }
.hfp-beating .hfp-status { opacity: 1; }

/* Blink during drawing */
.hfp-status-blink {
  animation: hfp-blink 1.2s ease-in-out infinite;
}
.hfp-status-steady { opacity: 1; }
@keyframes hfp-blink {
  0%, 100% { opacity: 0.80; }
  50%       { opacity: 0.22; }
}

/* Data value readout fade-in (larger text at probe endpoints) */
.hfp-data-value {
  transition: opacity 0.6s ease 0.3s;
}
/* Live flicker — brief update pulse every ~4s during beating */
.hfp-beating .hfp-data-value {
  animation: hfp-data-update 4.2s ease-in-out infinite;
}
@keyframes hfp-data-update {
  0%, 84%, 100% { opacity: 0.82; }
  90%            { opacity: 0.28; }
  96%            { opacity: 0.82; }
}

/* ── Quadrant arcs ─────────────────────────────────────── */
.hfp-arc { transition: opacity 1.0s ease var(--del, 0s); }
.hfp-drawing .hfp-arc { opacity: 0.34; }
.hfp-beating .hfp-arc { opacity: 0.38; }

/* ── Probe health bar indicators ───────────────────────── */
.hfp-probe-bar-group {
  opacity: 0;
  transition: opacity 0.7s ease calc(0.6s + var(--del, 0s));
}
.hfp-beating .hfp-probe-bar-group { opacity: 1; }

.hfp-probe-bar {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transform: scaleX(0);
}
.hfp-beating .hfp-probe-bar {
  animation: hfp-bar-fill 1.6s cubic-bezier(0.34, 1.1, 0.64, 1) var(--del, 0s) 1 both;
}
@keyframes hfp-bar-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ══════════════════════════════════════════════════════
   ECG PANEL — section 4 (Proof) cardiac monitor
   ══════════════════════════════════════════════════════ */
.ecg-panel {
  opacity: 0;
  transition: opacity 0.9s ease;
}
.ecg-panel.panel-in { opacity: 1; }

/* Wrapper: centres the monitor card in the right column */
.ecg-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 52px clamp(20px, 3vw, 52px);
}

/* Header bar above the strip */
.ecg-header {
  width: min(100%, 540px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid oklch(0.40 0.13 155 / 0.20);
  border-bottom: none;
  background: oklch(0.97 0.010 155);
}
.ecg-header-label {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: oklch(0.40 0.13 155);
  opacity: 0.65;
}
.ecg-header-bpm {
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: oklch(0.40 0.13 155);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}
.ecg-bpm-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: oklch(0.50 0.11 155);
  animation: ecg-bpm-blink 0.86s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ecg-bpm-blink {
  0%, 100% { opacity: 1;    transform: scale(1);    }
  45%       { opacity: 0.25; transform: scale(0.75); }
  50%       { opacity: 0.25; transform: scale(0.75); }
}

/* SVG strip */
.ecg-svg {
  width: min(100%, 540px);
  height: auto;
  display: block;
  border: 1px solid oklch(0.40 0.13 155 / 0.20);
}

/* Footer below the strip */
.ecg-footer {
  width: min(100%, 540px);
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  border: 1px solid oklch(0.40 0.13 155 / 0.20);
  border-top: none;
  background: oklch(0.97 0.010 155);
  font-family: var(--font-mono, "Geist Mono", monospace);
  font-size: 8.5px;
  letter-spacing: 0.10em;
  color: oklch(0.40 0.13 155);
  opacity: 0.50;
}

/* ── Scrolling waveform animation ───────────────────── */
.ecg-track {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: ecg-scroll var(--ecg-dur, 0.86s) linear var(--ecg-del, 0s) infinite;
}
@keyframes ecg-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-40%); }  /* -320/800 = -40% of viewBox width */
}

/* ── Recording cursor ───────────────────────────────── */
.ecg-cursor {
  opacity: 0;
  transition: opacity 0.7s ease 1.6s;
}
.ecg-panel.panel-in .ecg-cursor { opacity: 1; }

.ecg-cursor-line {
  opacity: 0.55;
  animation: ecg-cursor-pulse 0.86s ease-in-out infinite;
}
@keyframes ecg-cursor-pulse {
  0%   { opacity: 0.45; }
  7%   { opacity: 1.00; }
  22%  { opacity: 0.45; }
  100% { opacity: 0.45; }
}

.ecg-cursor-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: ecg-cursor-dot-pulse 0.86s ease-out infinite;
}
@keyframes ecg-cursor-dot-pulse {
  0%   { transform: scale(1.0); opacity: 0.90; }
  28%  { transform: scale(1.8); opacity: 0.15; }
  100% { transform: scale(1.0); opacity: 0.90; }
}

/* ── Coronary flow pulse highlights ───────────────── */
@keyframes cor-flow {
  0%   { stroke-dashoffset: 0;    opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { stroke-dashoffset: -440; opacity: 0; }
}
/* cor-1 and cor-2 classes used in heart.jsx */
.cor-1 { animation: cor-flow 3.2s linear 2.1s infinite; }
.cor-2 { animation: cor-flow 3.7s linear 2.9s infinite; }

/* ── Modalities section — probe lines & anchor dots ─ */
.probe-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: svgDrawIn 0.55s ease var(--delay, 0s) both;
}
.probe-dot {
  opacity: 0;
  animation: fadeIn 0.30s ease var(--delay, 0s) both;
}

/* ── Flow section — numbered nodes + arcs ──────────── */
.flow-node {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: flowNodeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--delay, 0s) both;
}
@keyframes flowNodeIn {
  from { opacity: 0; transform: scale(0.35); }
  to   { opacity: 1; transform: scale(1); }
}
.flow-arc {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: svgDrawIn 0.65s ease var(--delay, 0s) both;
}

/* ── Audience section — zone circles ───────────────── */
.aud-zone {
  opacity: 0;
  animation: fadeIn 0.38s ease var(--delay, 0s) both;
}
.aud-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: audPulse 1.9s ease-out infinite;
}
@keyframes audPulse {
  from { opacity: 0.18; transform: scale(1); }
  to   { opacity: 0;    transform: scale(1.65); }
}

/* ── Proof section — expanding rings + anchor dots ── */
.proof-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: svgDrawIn 1.5s cubic-bezier(0.4, 0, 0.2, 1) var(--delay, 0s) both;
}
.proof-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: svgDrawIn 0.60s ease var(--delay, 0s) both;
}
.proof-dot {
  opacity: 0;
  animation: fadeIn 0.30s ease var(--delay, 0s) both;
}

/* ── CTA section — concentric pulsing rings ────────── */
.cta-ring {
  transform-box: view-box;
  transform-origin: 240px 290px;
}
.cta-ring-1 { animation: ctaPulse 2.6s ease-in-out 0.0s infinite; }
.cta-ring-2 { animation: ctaPulse 2.6s ease-in-out 0.3s infinite; }
.cta-ring-3 { animation: ctaPulse 2.6s ease-in-out 0.6s infinite; }
.cta-ring-4 { animation: ctaPulse 2.6s ease-in-out 0.9s infinite; }
@keyframes ctaPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%       { opacity: 0.90; transform: scale(1.025); }
}

/* ── Shared SVG keyframe ───────────────────────────── */
@keyframes svgDrawIn { to { stroke-dashoffset: 0; } }

/* ══════════════════════════════════════════════════════
   DAVINCI PANEL — modalities & flow sections
   Roll is scroll-driven via inline style transform from JS.
   ══════════════════════════════════════════════════════ */
.davinci-panel {
  /* no opacity fade — roll transform controls entry */
}

/* Remove rectangular paper background from both DaVinci panels */
.davinci-panel .panel-img-wrap {
  background: transparent;
}

/* Coral PNG — natural colours, no blend mode (sits on section gradient) */
.dv-mod-img {
  /* natural coral display */
}

/* Green-tinted PNG for flow section.
   sepia→hue≈35°, +120°→155° = oklch forest green hue; brightness for dark ink look. */
.dv-flow-img {
  filter: sepia(0.9) hue-rotate(120deg) saturate(2.0) brightness(0.68);
  /* z-index: 1 set below so image sits above the circular bg */
  position: relative;
  z-index: 1;
}

/* Circular light background — sits behind the green portrait (z:0 < image z:1) */
.dv-flow-bg-circle {
  position: absolute;
  left: 50%;
  top: 51%;  /* figure centre ≈ 51% down the image */
  transform: translate(-50%, -50%);
  /* diameter ≈ 44% of wrap width ≈ 240px; tightly frames the figure (~113px arm radius) */
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: oklch(0.975 0.008 145);
  z-index: 0;
}

/* ══════════════════════════════════════════════════════
   DA VINCI BRIDGE — fixed overlay for the S2 → S3 transition
   Rolls from left column (coral) to right column (green)
   while the vertical scroll snap plays beneath it.
   ══════════════════════════════════════════════════════ */

/* Hide the actual section panels while the bridge is animating
   so only one Da Vinci is visible at a time. */
@media (min-width: 1101px) {
  .bridge-active .davinci-panel {
    opacity: 0 !important;
    transition: none !important;
  }
}

/* Smooth fade-in when bridge hands off to S3's panel */
.davinci-panel {
  transition: opacity 0.25s ease-out;
}

/* Bridge container — fixed viewport overlay.
   Starts centred in S2's left column (25vw from left),
   transitions to S3's right column (75vw from left). */
.davinci-bridge {
  position: fixed;
  top: 50%;
  left: 0;
  /* match section panel image size */
  width: min(48vw, 540px);
  z-index: 500;
  pointer-events: none;
  /* initial position: centre at 25vw (S2 left column) */
  transform: translate(calc(25vw - 50%), -50%) rotate(-360deg);
}

/* When .dvb-rolling is added (double-rAF after mount): roll to S3's position */
.davinci-bridge.dvb-rolling {
  transform: translate(calc(75vw - 50%), -50%) rotate(0deg);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Background: paper → sage, so mix-blend-mode on image
   matches the section context at each end of the roll. */
.dvb-bg {
  background: var(--paper);
  position: relative;
}
.dvb-bg.dvb-bg-rolling {
  background: oklch(0.93 0.032 155 / 0.55);
  transition: background 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.dvb-img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

/* ── Reverse bridge: S3 right column → S2 left column ─────────────────────
   Overrides the default forward positions (higher specificity wins).        */
.davinci-bridge.dvb-reverse {
  /* Start centred at 75vw (S3 right column), pre-spun clockwise */
  transform: translate(calc(75vw - 50%), -50%) rotate(360deg);
}
.davinci-bridge.dvb-reverse.dvb-rolling {
  /* Roll left to 25vw (S2 left column) */
  transform: translate(calc(25vw - 50%), -50%) rotate(0deg);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reverse background: start sage (S3 context) → end paper (S2 context) */
.dvb-bg.dvb-bg-reverse {
  background: oklch(0.93 0.032 155 / 0.55);
}
.dvb-bg.dvb-bg-reverse.dvb-bg-rolling {
  background: var(--paper);
  transition: background 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Disable bridge on narrow screens (single-column layout, different geometry) */
@media (max-width: 1100px) {
  .davinci-bridge { display: none; }
}

/* ══════════════════════════════════════════════════════
   FLOW SECTION — Da Vinci rolls from S2 left → S3 right
   overflow:visible lets the image show in the left-column
   area while it's mid-roll (desktop only).
   ══════════════════════════════════════════════════════ */
@media (min-width: 1101px) {
  #s-flow .hs-img-r { overflow: visible; }
}

/* Text starts hidden; appears after the image has crossed the centre line.
   Direct children of .flow-txt-content stagger in individually. */
.flow-txt-content > * {
  opacity: 0;
  transform: translateX(-14px);
  transition: none;
}

/* When .flow-txt-in is added (800ms after section activates), each child
   transitions in with a cascading delay. */
.flow-txt-content.flow-txt-in > *:nth-child(1) {
  opacity: 1; transform: none;
  transition: opacity 0.52s ease-out 0s, transform 0.52s ease-out 0s;
}
.flow-txt-content.flow-txt-in > *:nth-child(2) {
  opacity: 1; transform: none;
  transition: opacity 0.52s ease-out 0.13s, transform 0.52s ease-out 0.13s;
}
.flow-txt-content.flow-txt-in > *:nth-child(3) {
  opacity: 1; transform: none;
  transition: opacity 0.52s ease-out 0.26s, transform 0.52s ease-out 0.26s;
}

/* ══════════════════════════════════════════════════════
   CALLOUT OVERLAY — anatomy lines & labels (modalities)
   z-index: 2 ensures overlay renders above the image (z:1) and bg circle (z:0)
   ══════════════════════════════════════════════════════ */
.dv-callout {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* SVG fills the panel-img-wrap; overflow visible so labels can escape */
.callout-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Anatomy anchor dot */
.ca-dot {
  opacity: 0;
  animation: fadeIn 0.25s ease var(--del, 0s) both;
}

/* Pulse ring around anchor */
.ca-ring {
  opacity: 0;
  animation: fadeIn 0.40s ease calc(var(--del, 0s) + 0.06s) both;
}

/* Callout line — pathLength="1" on the <line> enables this trick */
.ca-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: ca-line-draw 0.55s ease var(--del, 0s) both;
}
@keyframes ca-line-draw { to { stroke-dashoffset: 0; } }

/* HTML label chips anchored at the line end point */
.ca-label {
  position: absolute;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-2);
  box-shadow: 0 1px 4px oklch(0.20 0.012 200 / 0.10);
  opacity: 0;
  animation: ca-label-in-r 0.35s ease var(--del, 0s) both;
}

/* Left-side label: shift left of its anchor point */
.ca-l {
  transform: translateX(-100%) translateY(-50%);
  animation-name: ca-label-in-l;
}

/* Centre label: centred above anchor point (used for hands / head) */
.ca-c {
  transform: translate(-50%, -100%);
  animation-name: ca-label-in-c;
}
@keyframes ca-label-in-c {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 5px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}

@keyframes ca-label-in-r {
  from { opacity: 0; transform: translateY(-50%) translateX(5px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes ca-label-in-l {
  from { opacity: 0; transform: translateX(calc(-100% - 5px)) translateY(-50%); }
  to   { opacity: 1; transform: translateX(-100%) translateY(-50%); }
}

/* ══════════════════════════════════════════════════════
   FLOW MARKERS — numbered badges on Da Vinci (flow)
   ══════════════════════════════════════════════════════ */
.fm-badge {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  animation: fm-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) var(--del, 0s) both;
}
@keyframes fm-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.fm-num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.04em;
  line-height: 1;
}
.fm-label {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: oklch(0.30 0.06 38);
  background: oklch(0.98 0.006 75);
  padding: 2px 7px;
  border-radius: 3px;
  opacity: 0.92;
}

/* SVG circle and ring for flow markers */
.fm-circle {
  opacity: 0;
  animation: fm-circle-in 0.35s ease var(--del, 0s) both;
}
@keyframes fm-circle-in { to { opacity: 1; } }

.fm-ring {
  opacity: 0;
  animation: fm-ring-in 0.55s ease calc(var(--del, 0s) + 0.10s) both;
}
@keyframes fm-ring-in { to { opacity: 0.4; } }

/* ══════════════════════════════════════════════════════
   HERO ELEMENTS
   ══════════════════════════════════════════════════════ */
.section-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.hero-scroll-cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.cue-line {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--ink-4);
  position: relative;
  overflow: hidden;
}
.cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-2);
  animation: cue-travel 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes cue-travel {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* ══════════════════════════════════════════════════════
   SIDE INDEX
   ══════════════════════════════════════════════════════ */
.home-side-index {
  position: fixed;
  left: clamp(14px, 1.8vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.home-side-index button {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-4);
  transition: color 0.3s;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
}
.home-side-index button .tick {
  display: inline-block;
  width: 12px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s;
  flex-shrink: 0;
}
.home-side-index button.active { color: var(--ink); }
.home-side-index button.active .tick { width: 28px; background: var(--forest); height: 1.5px; }
.home-side-index .ix-num { font-weight: 500; min-width: 20px; }
.home-side-index .ix-lbl { opacity: 0; transition: opacity 0.3s; }
.home-side-index button:hover .ix-lbl,
.home-side-index button.active .ix-lbl { opacity: 1; }

/* On dark-background sections (Proof), flip to light green text */
.home-side-index.on-dark button              { color: oklch(0.62 0.07 155); }
.home-side-index.on-dark button.active       { color: oklch(0.88 0.11 155); }
.home-side-index.on-dark button.active .tick { background: oklch(0.76 0.13 155); }

/* ══════════════════════════════════════════════════════
   MODALITY LIST
   ══════════════════════════════════════════════════════ */
.mods-mini { display: grid; gap: 6px; margin-top: 4px; }
.mods-mini .mm {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  transition: border-color 0.28s, background 0.28s, transform 0.28s cubic-bezier(0.4,0,0.2,1);
  cursor: default;
}
.mods-mini .mm:hover {
  border-color: var(--forest);
  background: var(--paper);
  transform: translateX(4px);
}
.mods-mini .mm .num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.10em;
}
.mods-mini .mm h5 {
  font-family: var(--font-display);
  font-size: 14px;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.mods-mini .mm p { margin: 1px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.42; }
.mods-mini .mm .arrow {
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 12px;
  transition: color 0.25s, transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
}
.mods-mini .mm:hover .arrow { color: var(--forest); transform: translateX(3px); }

/* ══════════════════════════════════════════════════════
   FLOW STEPS
   ══════════════════════════════════════════════════════ */
.steps-mini { margin-top: 4px; }
.steps-mini .sm {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
  align-items: start;
}
.steps-mini .sm:last-child { border-bottom: 1px solid var(--line-soft); }
.steps-mini .sm .num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--forest);
  padding-top: 3px;
}
.steps-mini .sm h5 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 2px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--ink);
}
.steps-mini .sm p { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }

/* ══════════════════════════════════════════════════════
   AUDIENCE TABS
   ══════════════════════════════════════════════════════ */
.aud-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.aud-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  background: transparent;
  font: inherit;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.aud-tab:hover { border-color: var(--ink-2); background: var(--paper-2); }
.aud-tab.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tab-num {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.10em;
  opacity: 0.55;
}
.aud-tab.active .tab-num { opacity: 0.65; }
.tab-who {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.aud-blurb {
  padding-top: 22px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 60ch;
  border-top: 1px solid var(--line-soft);
}
.orbit-label {
  font-family: "Geist Mono", monospace;
  font-size: 4px;
  letter-spacing: 0.18em;
  dominant-baseline: middle;
  text-transform: uppercase;
}

@keyframes radarPulse {
  0% { transform: scale(1); opacity: 1; stroke-width: 0.5px; }
  100% { transform: scale(5); opacity: 0; stroke-width: 0.1px; }
}

.ca-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: radarPulse 2s ease-out infinite;
  /* Stagger the pulse so they don't all beat at the exact same time */
  animation-delay: var(--del); 
}

/* Fade in the targets and icons smoothly */
.ca-fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-out forwards;
  animation-delay: var(--del);
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* Make the line draw itself from the body to the label */
.ca-draw-line {
  stroke-dashoffset: 50;
  stroke-dasharray: 50;
  animation: drawDashed 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc(var(--del) + 0.2s);
}

@keyframes drawDashed {
  to { stroke-dashoffset: 0; }
}

/* A very subtle, continuous breathing pulse on the anatomy nodes */
.ca-pulse-ring {
  transform-origin: center;
  transform-box: fill-box;
  animation: gentlePulse 3s ease-in-out infinite;
  animation-delay: var(--del);
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(0.8); opacity: 0.2; }
  50% { transform: scale(1.2); opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════
   PROOF SECTION CONTENT
   ══════════════════════════════════════════════════════ */
.proof-overlay { display: flex; flex-direction: column; gap: 30px; }
.proof-overlay blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.24;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: oklch(0.94 0.012 145);
  max-width: 30ch;
}
.proof-overlay blockquote::before {
  content: "\201C";
  font-size: 1.3em;
  color: oklch(0.76 0.13 155);
  line-height: 0;
  margin-right: 4px;
}
.proof-overlay .metric-row-inline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  border-top: 1px solid oklch(0.36 0.012 200);
  padding-top: 20px;
  max-width: 460px;
}
.proof-overlay .m .v {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 38px);
  letter-spacing: -0.022em;
  line-height: 1;
  color: oklch(0.94 0.012 145);
}
.proof-overlay .m .v sup { font-size: 0.5em; color: oklch(0.76 0.13 155); vertical-align: top; }
.proof-overlay .m .k { margin-top: 7px; font-size: 10.5px; color: oklch(0.70 0.012 145); line-height: 1.42; }

/* ══════════════════════════════════════════════════════
   CTA CARD
   ══════════════════════════════════════════════════════ */
.cta-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4.5vw, 54px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
}
.cta-card h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 2.9vw, 46px);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.06;
}
.cta-card h2 em { font-style: italic; color: oklch(0.76 0.13 155); }
.cta-card p {
  margin: 0;
  color: oklch(0.76 0.012 145);
  font-size: 13.5px;
  line-height: 1.58;
  max-width: 36ch;
}

/* ══════════════════════════════════════════════════════
   SHARED KEYFRAME
   ══════════════════════════════════════════════════════ */
@keyframes fadeIn { to { opacity: 1; } }

/* ══════════════════════════════════════════════════════
   SIDE INDEX — only visible on proper desktop (1280px+)
   ══════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  .home-side-index { display: none; }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — ≤ 1100px
   ══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hs-grid {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
  }
  /* On narrow screens text always comes first */
  .hs-img-l { order: 2; }
  .hs-txt-r { order: 1; }

  .hs-txt-l,
  .hs-txt-r {
    padding-top: 110px;
    padding-bottom: 32px;
    padding-inline: var(--gutter);
  }
  .hs-img {
    height: 48vh;
    min-height: 280px;
  }
  .proof-right    { display: none; }
  .home-side-index { display: none; }

  /* Da Vinci figure: slightly smaller on mobile so it fits the narrower column */
  #s-modalities .panel-img-wrap.dv-wrap,
  #s-flow .panel-img-wrap.dv-wrap {
    width: min(72%, 320px);
  }
}

@media (max-width: 720px) {
  /* Reduce nav-clearance padding — still clears fixed nav */
  .hs-txt-l,
  .hs-txt-r {
    padding-top: 88px;
    padding-bottom: 20px;
  }

  /* Shrink image column so stacked layout fits comfortably */
  .hs-img {
    height: 38vh;
    min-height: 200px;
  }

  /* Modalities mini-list: 11px is unreadable on phone */
  .mods-mini .mm p { font-size: 12px; }

  /* Flow steps mini-list */
  .steps-mini .sm h5 { font-size: 15px; }
  .steps-mini .sm p  { font-size: 12px; }

  /* Audience tabs: smaller pill buttons */
  .aud-tab { padding: 9px 14px; }
  .tab-who { font-size: 14px; }

  /* Proof left blockquote: reduce leading slightly */
  .proof-overlay { gap: 20px; }
}

@media (max-width: 480px) {
  /* Tightest mobile: bring image column further down */
  .hs-img {
    height: 32vh;
    min-height: 176px;
  }
  /* Slightly less top padding — every px matters on 390px screens */
  .hs-txt-l,
  .hs-txt-r { padding-top: 80px; }

  /* Metric row in proof section: 2 columns on tiny screen */
  .proof-overlay .metric-row-inline {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* ══════════════════════════════════════════════════════
   MOBILE BALL-DROP — S2 & S3: DaVinci drops to bottom on entry
   Text fades in on top after the drop settles.
   Desktop: completely unaffected.
   ══════════════════════════════════════════════════════ */

/* Ball-drop with bouncing settle */
@keyframes dvBallDrop {
  0%   { opacity: 0.35; transform: translateY(-65vh); }
  14%  { opacity: 1; }
  62%  { transform: translateY(0); }
  74%  { transform: translateY(-14px); }
  84%  { transform: translateY(5px); }
  93%  { transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Description panel fade-slide */
@keyframes mobDescIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  /* ── DaVinci image column: hidden above section before drop ── */
  #s-modalities .hs-img,
  #s-flow .hs-img {
    opacity: 0;
    transform: translateY(-65vh);
  }

  /* Drop animation fires when section is active */
  #s-modalities .hs-img.img-drop-active,
  #s-flow .hs-img.img-drop-active {
    animation: dvBallDrop 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  /* S2: lock to 100vh — compact tab grid fits cleanly */
  #s-modalities {
    height: 100vh;
    overflow: hidden;
  }

  /* Text overlay: hidden until DaVinci drop settles */
  .mob-txt-delayed {
    opacity: 0;
    transition: opacity 0.45s ease-out;
  }
  .mob-txt-delayed.ready { opacity: 1; }

  /* ── 2×2 + 1 modality tab grid ───────────────────── */
  .mob-mod-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .mob-mod-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--line-soft);
    border-radius: 10px;
    background: color-mix(in oklab, var(--paper) 85%, transparent);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
  }
  .mob-mod-tab .num {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--ink-3);
    letter-spacing: 0.12em;
  }
  .mob-mod-tab .tab-title {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
  }

  /* Selected tab: coral ring */
  .mob-mod-tab.selected {
    border-color: oklch(0.65 0.15 35);
    background: oklch(0.65 0.15 35 / 0.09);
  }
  .mob-mod-tab.selected .num      { color: oklch(0.65 0.15 35); }
  .mob-mod-tab.selected .tab-title{ color: oklch(0.50 0.12 35); }

  /* 5th tab: spans full row, centred at half width */
  .mob-mod-tab:nth-child(5) {
    grid-column: 1 / -1;
    width: calc(50% - 4px);
    justify-self: center;
  }

  /* Description panel beneath the grid */
  .mob-mod-desc {
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in oklab, var(--paper) 90%, transparent);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-2);
    border-left: 2px solid oklch(0.65 0.15 35 / 0.7);
    animation: mobDescIn 0.3s ease both;
  }
}

/* Skip drop for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #s-modalities .hs-img,
  #s-flow .hs-img {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .mob-txt-delayed {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════
   DAVINCI PNG — base image styling
   ══════════════════════════════════════════════════════ */
@keyframes levitate {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Add this to the class of your central image (or its wrapper, but NOT the rings) */
.davinci-png {
  animation: levitate 5s ease-in-out infinite;
  will-change: transform; /* Keeps the animation buttery smooth */
}

/* Create the drawing keyframe */
@keyframes drawRing {
  0% { stroke-dashoffset: 500; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0.65; }
}

/* Apply to the circles inside your active orbit group */
.orbit-in circle {
  /* 500 is roughly larger than the circumference of your biggest ring */
  stroke-dasharray: 500; 
  stroke-dashoffset: 500;
  
  /* The animation uses the CSS --del variable you already set in React! */
  animation: drawRing 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--del);
}

/* ══════════════════════════════════════════════════════
   ORBIT CIRCLES — flow section (Ingest / Model / Monitoring)
   ══════════════════════════════════════════════════════ */
.orbit-callout {
  overflow: visible; /* circles extend beyond wrap */
}

.orbit-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* Orbit groups fade in then spin around the figure centre (50%, 51% in view-box space).
   Each group gets its own duration and direction via per-class rules. */
.orbit-grp {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 51%;
}

.orbit-grp-0.orbit-in {
  animation:
    orbit-appear 0.7s ease var(--del, 0s) both,
    orbit-spin 24s linear var(--del, 0s) infinite;
}
.orbit-grp-1.orbit-in {
  animation:
    orbit-appear 0.7s ease var(--del, 0s) both,
    orbit-spin 32s linear var(--del, 0s) infinite reverse;
}
.orbit-grp-2.orbit-in {
  animation:
    orbit-appear 0.7s ease var(--del, 0s) both,
    orbit-spin 44s linear var(--del, 0s) infinite;
}

@keyframes orbit-appear {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Add/verify this in your CSS */
/* --- SVG Rings Animations --- */
.dv-ring-wrapper {
  transform-origin: 70px 70px; /* Important: Matches CX, CY in the SVG */
  animation: spinRing var(--spin-dur) linear infinite;
  animation-direction: var(--spin-dir);
}

/* The draw-in effect when scrolling into view */
.panel-in .dv-ring-wrapper circle {
  stroke-dashoffset: 500;
  animation: drawRing 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--draw-del);
}

@keyframes spinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes drawRing {
  100% { stroke-dashoffset: 0; }
}

/* Subtle breathing effect for DaVinci */
.dv-explorer-img {
  animation: levitate 8s ease-in-out infinite;
  will-change: transform;
}

/* ══════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .heart-panel {
    transition: none !important;
    opacity: 1 !important;
  }
  .heart-svg.drawn .dp,
  .dp {
    transition: none !important;
    stroke-dashoffset: 0 !important;
  }
  .panel-img-wrap {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  /* Flow text: skip the delay for users who prefer no motion */
  .flow-txt-content > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .h-halo,
  .cor-1,
  .cor-2,
  .heart-beat,
  .probe-line,
  .probe-dot,
  .flow-node,
  .flow-arc,
  .aud-zone,
  .aud-pulse,
  .proof-ring,
  .proof-line,
  .proof-dot,
  .cta-ring,
  .ca-dot,
  .ca-ring,
  .ca-line,
  .ca-label,
  .fm-badge,
  .fm-circle,
  .fm-ring,
  .orbit-grp,
  .cue-line::after {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
}