/* ═══════════════════════════════════════════════════════════════════════════
   WELL RUN · SIGNAL SYSTEM — IMARA · SITE
   FRAMEWORK FLOW — immersive scroll journey
   A single line you follow with scroll. Nodes light up one after another as
   they reach a focus band; circular documentary images alternate beside each
   step; tier "chapters" punctuate the path.
   ═══════════════════════════════════════════════════════════════════════════ */

.flow-section{background:#47201b;color:var(--on-dark);position:relative;
  overflow:hidden;padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(56px,6vw,88px)}
.flow-section::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% -12%,rgba(0,0,0,.30),transparent 62%),
    radial-gradient(85% 60% at 112% 82%,rgba(201,240,255,.14),transparent 55%),
    radial-gradient(85% 60% at -12% 30%,rgba(201,240,255,.08),transparent 55%)}
.flow-section .wrap{position:relative;z-index:1}

/* intro heading */
.flow-head{max-width:62ch;margin-inline:auto;text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.flow-head .eyebrow{color:var(--sky);margin-bottom:20px;justify-content:center}
.flow-head .eyebrow::before{background:var(--sky)}
.flow-head h2{color:var(--cream);margin-bottom:22px}
.flow-head .lead{color:var(--on-dark-soft);max-width:54ch;margin-inline:auto}

/* ── the journey ─────────────────────────────────────────────────────────── */
.flow{position:relative;max-width:1000px;margin-inline:auto}

/* the line we follow */
.spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:rgba(249,243,220,.12);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.spine-fill{position:absolute;left:0;top:0;width:100%;height:0;border-radius:2px;
  background:rgba(249,243,220,.7);
  box-shadow:0 0 8px rgba(249,243,220,.3),0 0 22px rgba(249,243,220,.12);
  will-change:height}
.comet{position:absolute;left:50%;top:0;width:10px;height:10px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--cream);opacity:0;z-index:1;
  box-shadow:0 0 0 4px rgba(249,243,220,.1),0 0 14px 4px rgba(249,243,220,.45);
  will-change:top;transition:opacity .4s var(--ease)}
.flow.live .comet{opacity:1}

/* generic node on the spine */
.node{position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--plum);box-shadow:0 8px 22px -10px rgba(0,0,0,.6);
  color:var(--cream);font-weight:700;font-size:1.02rem;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;z-index:2;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),
    background-color .45s var(--ease),color .45s var(--ease)}
.node.done{background:var(--cream);color:var(--plum);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.55)}
.node.active{background:var(--sky);color:var(--plum);transform:scale(1.16);
  box-shadow:0 0 0 6px rgba(201,240,255,.22),0 0 32px 6px rgba(201,240,255,.55)}
/* chapter icon markers highlight in sky (not cream) */
.chapter .node.done{background:var(--sky);color:var(--plum)}
.chapter .node.active{background:var(--sky);color:var(--plum)}

/* ── tier chapter markers ────────────────────────────────────────────────── */
.chapter{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;
  justify-items:center;padding:clamp(34px,5vw,58px) 0 clamp(20px,3vw,34px)}
.chapter .node{grid-column:2;width:72px;height:72px;
  background:var(--plum)}
.chapter .node svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:1.85;
  stroke-linecap:round;stroke-linejoin:round}
.chapter .clabel{grid-column:1 / -1;text-align:center;margin-top:20px;max-width:46ch;
  position:relative;z-index:3;
  opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.chapter.in .clabel{opacity:1;transform:none}
.chapter .ckick{display:inline-flex;align-items:center;gap:.6em;font-size:.76rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sky);margin-bottom:12px}
.chapter .ckick::before{content:"";width:24px;height:1.5px;background:var(--sky)}
.chapter .ckick::after{content:"";width:24px;height:1.5px;background:var(--sky)}
.chapter h3{font-size:clamp(1.5rem,3vw,2.2rem);color:var(--cream);line-height:1.08}
.chapter p{margin-top:12px;color:var(--on-dark-soft);font-size:1.02rem;line-height:1.55;
  margin-inline:auto;max-width:40ch}

/* ── steps ───────────────────────────────────────────────────────────────── */
.fstep{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;
  min-height:clamp(260px,30vw,330px);opacity:1;transition:opacity .55s var(--ease)}
.fstep.in.dim{opacity:.42}
.fstep .node{grid-column:2;justify-self:center}
/* keep all three items on the same grid row — left-side cards reverse the
   column order vs DOM order, which otherwise spills them onto separate rows */
.fstep .node,.fstep .panel,.fstep .media{grid-row:1}

/* branch line from the spine toward the panel */
.fstep .node::after{content:"";position:absolute;top:50%;width:clamp(22px,4vw,52px);height:2px;
  background:linear-gradient(90deg,var(--cream),transparent);opacity:0;transform:translateY(-50%);
  transition:opacity .5s var(--ease)}
.fstep[data-side="l"] .node::after{right:100%;
  background:linear-gradient(270deg,var(--cream),transparent)}
.fstep[data-side="r"] .node::after{left:100%}
.fstep.in .node::after{opacity:.4}

/* panel (text) */
.panel{display:flex;flex-direction:column;position:relative;max-width:430px;
  padding:26px 28px;border-radius:18px;
  background:#c9f0ff;box-shadow:0 30px 60px -38px rgba(0,0,0,.6);
  opacity:0;transform:translateX(42px);
  transition:opacity .8s var(--ease),transform .8s var(--ease),
    box-shadow .45s var(--ease),background-color .45s var(--ease)}
.fstep[data-side="l"] .panel{grid-column:1;justify-self:end;align-items:flex-end;text-align:right;
  transform:translateX(-42px)}
.fstep[data-side="r"] .panel{grid-column:3;justify-self:start}
.fstep.in .panel{opacity:1;transform:none}
.fstep.active .panel{background:var(--sky);
  box-shadow:0 0 0 2px rgba(249,243,220,.5),0 36px 70px -34px rgba(0,0,0,.7)}
.panel .ghost{display:none}
.panel .ptag{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--plum);margin-bottom:12px}
.panel h4{font-size:clamp(1.2rem,2vw,1.55rem);color:#47201b;line-height:1.12;
  letter-spacing:-.01em}
.panel p{margin-top:10px;color:var(--ink-soft);font-size:1rem;line-height:1.55;max-width:34ch}

/* media (circular image) */
.media{position:relative;width:clamp(180px,23vw,266px);aspect-ratio:1/1;
  opacity:0;transform:translateY(34px) scale(.92);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.fstep[data-side="l"] .media{grid-column:3;justify-self:start}
.fstep[data-side="r"] .media{grid-column:1;justify-self:end}
.fstep.in .media{opacity:1;transform:none}
.media img.ph{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  box-shadow:0 34px 64px -32px rgba(0,0,0,.8);animation:floatY 7.5s ease-in-out infinite}
.fstep[data-side="r"] .media img.ph{animation-duration:9s;animation-delay:-3s}
.media .m-ring{position:absolute;width:30%;height:30%;border-radius:50%;
  background:var(--sky);opacity:.9;right:-7%;top:-2%;box-shadow:0 12px 28px -10px rgba(0,0,0,.55);will-change:transform}
.media .m-dot{position:absolute;width:18px;height:18px;border-radius:50%;
  background:var(--cream);left:4%;bottom:6%;box-shadow:0 6px 16px -6px rgba(0,0,0,.55);will-change:transform}
.media.cross .m-ring{background:var(--cream)}
.media.cross .m-dot{background:var(--sky)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}

/* start / arrival caps */
.cap{position:relative;display:grid;grid-template-columns:1fr 96px 1fr;justify-items:center;
  text-align:center}
.cap.start{padding-bottom:clamp(20px,3vw,30px)}
.cap.end{padding-top:clamp(34px,5vw,56px);padding-bottom:clamp(52px,9vw,104px)}
.cap .node{grid-column:2;width:64px;height:64px;background:var(--plum)}
.cap .node svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.cap .caplabel{grid-column:1 / -1;margin-top:16px;max-width:40ch;
  position:relative;z-index:3;
  opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cap.in .caplabel{opacity:1;transform:none}
.cap .caplabel .ck{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sky)}
.cap .caplabel h3{margin-top:10px;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--cream)}
.cap .caplabel p{margin-top:10px;color:var(--on-dark-soft);font-size:1rem;margin-inline:auto;
  max-width:38ch}
.cap.end .node{background:var(--sky);color:var(--plum);
  box-shadow:0 0 0 6px rgba(201,240,255,.18),0 0 32px 7px rgba(201,240,255,.5)}

/* ── responsive: collapse to a left-rail timeline ───────────────────────────── */
@media (max-width:860px){
  .flow{max-width:560px}
  .spine{left:27px;transform:none}
  .comet{left:27px}

  .fstep{display:block;position:relative;padding-left:74px;min-height:0;
    margin-bottom:clamp(74px,16vw,112px)}
  .fstep .node{position:absolute;left:27px;top:4px;transform:translateX(-50%)}
  .fstep.active .node{transform:translateX(-50%) scale(1.16)}
  .fstep .node::after{display:none}
  .fstep .media,.fstep[data-side="l"] .media,.fstep[data-side="r"] .media{
    width:clamp(150px,42vw,210px);margin-bottom:24px;margin-inline:auto;justify-self:center}
  .fstep .panel,.fstep[data-side="l"] .panel,.fstep[data-side="r"] .panel{
    max-width:none;justify-self:stretch;align-items:flex-start;text-align:left;transform:none}

  .chapter{display:block;position:relative;padding-left:74px;text-align:left;
    padding-block:clamp(62px,14vw,90px) clamp(34px,6vw,48px)}
  .chapter .node{position:absolute;left:27px;transform:translateX(-50%)}
  .chapter .clabel{text-align:left;margin-top:0;margin-inline:0;max-width:none}
  .chapter p{margin-inline:0}
  .chapter .ckick::after{display:none}

  .cap{display:block;position:relative;padding-left:74px;text-align:left}
  .cap .node{position:absolute;left:27px;transform:translateX(-50%)}
  .cap .caplabel{text-align:left;margin-inline:0}
  .cap .caplabel p{margin-inline:0}
}

@media (prefers-reduced-motion:reduce){
  .spine-fill,.comet{transition:none}
  .panel,.media,.chapter .clabel,.cap .caplabel{opacity:1;transform:none;transition:none}
  .media img.ph{animation:none}
  .fstep.in.dim{opacity:1}
}

/* ── wide / ultrawide: widen the journey to match the page ─────────────────── */
@media (min-width:1600px){
  .flow{max-width:1120px}
  .fstep{min-height:clamp(300px,28vw,360px)}
}
@media (min-width:2000px){
  .flow{max-width:1240px}
}

/* ═══ fixes & polish ═══════════════════════════════════════════════════════ */

/* Cap icon nodes (start person / end check) must light up sky like the chapter
   icon nodes — not stay plum. `.cap .node{background:plum}` was overriding the
   generic .active/.done states by source order; these higher-specificity rules
   restore the sky treatment so the icon (now plum) reads on a sky disc. */
.cap .node.done,.cap .node.active{background:var(--sky);color:var(--plum)}

/* Keep labels crisp over the gradient + faint spine with a soft text-shadow —
   legibility without any visible backing box. */
.chapter .clabel,.cap .caplabel{text-shadow:0 1px 14px rgba(18,7,5,.6),0 1px 3px rgba(18,7,5,.5)}

/* Dither the background so the gradient reads smooth instead of 8-bit banded.
   A true 10/12-bit gradient needs a wide-gamut display; the correct fix for the
   banding you see is fine grain that breaks the flat steps up. */
.flow-section::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.06;mix-blend-mode:soft-light;background-size:140px 140px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}