/*
 * "Twelve languages. One note." — the scroll story under the home hero.
 *
 * One visit, told in four movements while the stage stays pinned: Meena's complaint, heard in any
 * of the twelve languages the eval tested; the findings pulled out of her Marathi in clinical
 * English, the denial kept; the prescription the rules draft from them, J06.9 stamped; and the
 * doctor's signature, with the summary reaching Meena's phone in Marathi. The scroll position is
 * the only driver (assets/story.js), so it plays backwards as faithfully as forwards.
 *
 * House style: the dark ground, the cream accent, Inter Tight with the serif italic for emphasis.
 * Paper is the one warm surface, because a prescription is paper in an Indian OPD.
 */
.story{ position:relative; background:var(--ground, #050505); color:var(--ink, #f4f4f0); }
.story .st-stage{ position:relative; }
.story .st-pin{ position:relative; height:100vh; min-height:620px; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.story .st-pin::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 42% at 50% 56%, rgba(238,240,208,.07), transparent 70%); }

/* ---------- the head: an eyebrow, the four movements, and the line that says which one this is ---------- */
.st-head{ position:relative; z-index:3; width:min(1100px, calc(100% - 48px)); padding-top:max(96px, 11vh); text-align:center; }
.st-eyebrow{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,240,208,.7); }
.st-title{ margin:10px 0 0; font-family:"Inter Tight", var(--font); font-weight:500; font-size:clamp(28px, 3.4vw, 44px); letter-spacing:-.025em; line-height:1.1; color:#fff; }
.st-title em{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:0; font-size:1.08em; color:var(--cream, #eef0d0); }
.st-steps{ list-style:none; display:flex; justify-content:center; gap:6px; margin:22px auto 0; padding:0; }
.st-steps li{ cursor:pointer; position:relative; display:flex; align-items:center; gap:8px; padding:6px 12px 6px 8px; border-radius:99px; font-size:13px; color:rgba(244,244,240,.45); transition:color .3s ease, background .3s ease; }
.st-steps li b{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:600; background:rgba(255,255,255,.07); color:rgba(244,244,240,.6); transition:background .3s ease, color .3s ease; }
.st-steps li.st-on{ color:#fff; background:rgba(238,240,208,.08); }
.st-steps li.st-on b{ background:var(--cream, #eef0d0); color:#16160f; }
.st-steps li.st-done b{ background:rgba(238,240,208,.35); color:#16160f; }
.st-says{ position:relative; height:1.6em; margin-top:14px; font-size:15px; color:rgba(244,244,240,.62); }
.st-says span{ position:absolute; inset:0; opacity:0; transform:translateY(6px); transition:opacity .35s ease, transform .45s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.st-says span.st-on{ opacity:1; transform:none; }

/* a step can be clicked to jump to it */
.st-steps li:hover{ color:rgba(244,244,240,.8); }
/* each chip is a button (T-96): it takes the chip's look and keeps a visible focus ring */
.st-steps li > .st-go{ all:unset; display:flex; align-items:center; gap:inherit; cursor:pointer; }
.st-steps li:has(.st-go:focus-visible){ outline:2px solid var(--cream, #eef0d0); outline-offset:2px; }
.st-replay{ display:block; margin:10px auto 0; padding:4px 12px; border-radius:99px; border:1px solid rgba(244,244,240,.18); background:transparent; color:rgba(244,244,240,.6); font:inherit; font-size:12px; cursor:pointer; }
.st-replay:hover{ color:#fff; border-color:rgba(244,244,240,.4); }
.st-replay:focus-visible{ outline:2px solid var(--cream, #eef0d0); outline-offset:2px; }
/* between one play and the next the scene fades out and comes back at the start */
.story .st-scene, .story .st-says{ transition:opacity .7s ease; }
.story.st-fade .st-scene, .story.st-fade .st-says{ opacity:0; }

/* ---------- the scene ---------- */
.st-scene{ position:relative; flex:1; width:min(1100px, calc(100% - 48px)); margin-top:8px; }

/* movement one: the voice, and the complaint in twelve languages around it */
.st-wave{ position:absolute; left:0; right:0; top:50%; height:160px; transform:translateY(-50%); opacity:var(--wo, 1); pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.st-wave svg{ width:100%; height:100%; display:block; overflow:visible; }
.st-wave path{ fill:none; stroke-linecap:round; }
.st-wave path.a{ stroke:var(--cream, #eef0d0); stroke-width:2; }
.st-wave path.b{ stroke:rgba(238,240,208,.35); stroke-width:1.2; }
.st-wave path.c{ stroke:rgba(125,211,252,.35); stroke-width:1; }

.st-lang{ position:absolute; left:var(--x); top:var(--y); transform:translate(-50%, -50%) translateY(10px); opacity:0; text-align:center; white-space:nowrap;
  transition:opacity .6s ease, transform .9s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; }
.st-lang q{ display:block; quotes:none; font-size:clamp(15px, 1.45vw, 19px); line-height:1.35; color:#fff; }
.st-lang small{ display:block; margin-top:4px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,240,208,.55); }
.st-lang.st-on{ opacity:1; transform:translate(-50%, -50%); }
@media (max-width:760px){ .st-lang{ left:var(--mx, var(--x)); top:var(--my, var(--y)); } }
/* movement two: the others step back, Meena's Marathi comes forward */
/* only transform and opacity move, so the step back and the step forward never re-lay the page */
.story.st-two .st-lang:not(.st-hers){ opacity:.08; transform:translate(-50%, -50%) scale(.94); }
.story.st-two .st-lang.st-hers{ transform:translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) scale(1.25); }
.story.st-three .st-lang, .story.st-three.st-two .st-lang:not(.st-hers){ opacity:0; }

/* the findings, pulled out of her words */
/* above the voice line, and solid enough that the line never runs through a card's words */
.st-finds{ position:absolute; left:0; right:0; top:44%; z-index:2; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.st-find{ position:relative; display:flex; flex-direction:column; gap:3px; min-width:150px; padding:12px 16px 13px; border-radius:14px; background:#141414; box-shadow:0 0 0 6px var(--ground, #050505); border:1px solid rgba(255,255,255,.1); text-align:left; opacity:0; transform:translateY(14px) scale(.97); transition:opacity .5s ease, transform .8s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; }
.st-find.st-on{ opacity:1; transform:none; }
.st-find em{ font-style:normal; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,240,208,.55); }
.st-find b{ font-size:16px; font-weight:500; color:#fff; letter-spacing:-.01em; }
.st-find span{ font-size:12.5px; color:rgba(244,244,240,.55); }
.st-find.st-neg{ border-color:rgba(238,240,208,.35); background:#1a1a17; }
.st-find.st-neg em{ color:var(--cream, #eef0d0); }
.st-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.st-links path{ fill:none; stroke:rgba(238,240,208,.35); stroke-width:1; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--k, 0)); }
.story.st-comb .st-find{ border-color:rgba(238,240,208,.28); }
/* the other languages make room for her record */
.story.st-comb.st-two .st-lang:not(.st-hers){ opacity:0; }
.story.st-three .st-finds, .story.st-three .st-links{ opacity:0; transform:translateY(-24px) scale(.96); transition:opacity .5s ease, transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)); }

/* movement three: the prescription, on paper */
.st-pad{ position:absolute; left:50%; top:50%; width:min(540px, 100%); transform:translate(-50%, -46%) translateY(40px); opacity:0;
  background:#f7f5ee; color:#1c1b17; border-radius:6px; padding:22px 26px 20px; box-shadow:0 40px 90px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.2);
  transition:opacity .6s ease, transform 1s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; font-size:13px; line-height:1.5; }
.story.st-three .st-pad{ opacity:1; transform:translate(-50%, -50%) scale(var(--fit, 1)); }
.story.st-four .st-pad{ transform:translate(calc(-50% - var(--shift, 190px)), -50%) scale(calc(var(--fit, 1) * .94)); }
.st-pad .st-lh{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; border-bottom:2px solid #1c1b17; padding-bottom:10px; }
.st-pad .st-lh b{ display:block; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1.1; }
.st-pad .st-lh small{ display:block; font-size:11px; color:#6b6857; margin-top:2px; }
.st-pad .st-lh .st-clk{ font-size:11px; color:#6b6857; text-align:right; }
.st-pad .st-pt{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #e3dfd0; font-size:12.5px; color:#3d3b33; }
.st-pad .st-row{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; padding:8px 0; border-bottom:1px dashed #e3dfd0; opacity:0; transform:translateY(5px); transition:opacity .35s ease, transform .45s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.st-pad .st-row.st-on{ opacity:1; transform:none; }
.st-pad .st-row > i{ font-style:normal; font-weight:600; font-size:11px; color:#8a8570; padding-top:2px; }
.st-pad .st-row.st-rx > i{ font-family:var(--serif); font-size:24px; line-height:.9; color:#1c1b17; font-weight:400; }
.st-pad .st-row ol{ margin:0; padding-left:1.1em; }
.st-pad .st-row ol li + li{ margin-top:2px; }
.st-pad .st-row{ position:relative; }
.st-pad .st-stamp{ position:absolute; right:0; top:50%; margin-top:-17px; padding:6px 10px; border:2px solid #1d4ed8; color:#1d4ed8; border-radius:6px; font:600 12px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.04em; text-align:center; transform:rotate(-8deg) scale(1.6); opacity:0; transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1); }
.st-pad .st-stamp small{ display:block; font-size:9px; font-weight:500; letter-spacing:.08em; margin-top:2px; }
.st-pad .st-stamp.st-on{ opacity:.9; transform:rotate(-8deg) scale(1); }
.st-pad .st-drafted{ position:absolute; left:50%; top:-14px; transform:translate(-50%, 6px); padding:5px 12px; border-radius:99px; background:#16160f; color:var(--cream, #eef0d0); font-size:12px; font-weight:500; white-space:nowrap; box-shadow:0 8px 20px -8px rgba(0,0,0,.6); opacity:0; transition:opacity .3s ease, transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.st-pad .st-drafted.st-on{ opacity:1; transform:translate(-50%, 0); }
.st-pad .st-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; margin-top:12px; }
.st-pad .st-foot small{ font-size:11px; color:#8a8570; }
.st-pad .st-sig{ width:170px; text-align:center; }
.st-pad .st-sig svg{ width:100%; height:44px; display:block; overflow:visible; }
.st-pad .st-sig path{ fill:none; stroke:#1e3a8a; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--k, 0)); }
.st-pad .st-sig small{ display:block; border-top:1px solid #1c1b17; padding-top:3px; }

/* movement four: Meena's phone */
.st-phone{ position:absolute; left:50%; top:50%; width:270px; transform:translate(calc(-50% + var(--pshift, 250px)), -50%) translateY(40px); opacity:0; border-radius:34px; padding:10px; background:#111; box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -30px rgba(0,0,0,.9); transition:opacity .6s ease, transform 1s cubic-bezier(.22,1,.36,1); will-change:transform, opacity; }
.story.st-send .st-phone{ opacity:1; transform:translate(calc(-50% + var(--pshift, 250px)), -50%) scale(var(--fit, 1)); }
.st-phone .st-scr{ border-radius:26px; overflow:hidden; background:#0b141a; min-height:380px; display:flex; flex-direction:column; }
.st-phone .st-bar{ display:flex; align-items:center; gap:9px; padding:14px 14px 10px; background:#1f2c34; color:#e9edef; }
.st-phone .st-bar i{ width:30px; height:30px; border-radius:50%; background:var(--cream, #eef0d0); color:#16160f; display:grid; place-items:center; font-style:normal; font-weight:600; font-size:12px; }
.st-phone .st-bar b{ display:block; font-size:13px; font-weight:600; }
.st-phone .st-bar small{ display:block; font-size:10.5px; color:#8696a0; }
.st-phone .st-chat{ flex:1; padding:12px 10px; display:flex; flex-direction:column; gap:8px; justify-content:flex-end; }
.st-phone .st-bub{ align-self:flex-start; max-width:92%; background:#202c33; color:#e9edef; border-radius:4px 10px 10px 10px; padding:8px 10px 6px; font-size:12.5px; line-height:1.45; opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .45s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.st-phone .st-bub.st-on{ opacity:1; transform:none; }
.st-phone .st-bub .st-meta{ display:block; text-align:right; font-size:10px; color:#8696a0; margin-top:3px; }
.st-phone .st-bub .st-meta em{ font-style:normal; color:#53bdeb; }

.st-end{ position:absolute; left:0; right:0; top:calc(50% + var(--end-y, 260px)); margin:0; text-align:center; translate:var(--end-x, 0px) 0; line-height:1.2; font-family:var(--serif); font-style:italic; font-size:clamp(20px, 2vw, 26px); color:var(--cream, #eef0d0); opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .6s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.st-end.st-on{ opacity:1; transform:none; }

/* ---------- a tablet: the same story, a little closer together ---------- */
@media (max-width:1000px){
  .story{ --shift:150px; --pshift:210px; }
  .st-pad{ width:min(460px, 100%); padding:18px 20px 16px; font-size:12.5px; }
  .st-phone{ width:240px; }
}
/* ---------- a phone: six languages, and the phone takes the paper's place ---------- */
@media (max-width:760px){
  .story .st-pin{ min-height:0; }
  .st-head{ width:calc(100% - 32px); padding-top:88px; }
  .st-steps{ gap:2px; margin-top:16px; }
  .st-steps li{ padding:5px 8px 5px 5px; font-size:11.5px; gap:5px; }
  .st-steps li span{ display:none; }
  .st-steps li.st-on span{ display:inline; }
  .st-says{ font-size:13.5px; height:3em; }
  .st-scene{ width:calc(100% - 32px); }
  .st-lang.st-far{ display:none; }
  .st-find{ min-width:0; flex:1 1 40%; padding:10px 12px; }
  .st-find b{ font-size:14px; }
  .st-finds{ top:34%; gap:8px; }
  .st-links{ display:none; }
  .st-pad{ padding:16px 14px 14px; font-size:12px; }
  .st-pad .st-lh b{ font-size:18px; }
  .st-pad .st-row{ grid-template-columns:44px minmax(0,1fr); }
  .story.st-three .st-pad{ transform:translate(-50%, -50%) scale(var(--fit-pad, 1)); }
  .story.st-four .st-pad{ transform:translate(-50%, -50%) scale(var(--fit-pad, 1)); }
  .story.st-send .st-phone{ transform:translate(-50%, -50%) scale(var(--fit-phone, 1)); }
  /* the paper keeps what a patient needs to read on a small screen: complaint, records, diagnosis, Rx */
  .st-pad .st-row.st-inv, .st-pad .st-row.st-rev{ display:none; }
  .st-pad .st-stamp{ position:static; grid-column:2; justify-self:start; white-space:nowrap; margin:4px 0 2px; }
  .story.st-send .st-pad{ opacity:0; }
  .st-phone{ --pshift:0px; }
  .st-end{ font-size:18px; }
}

/* ---------- reduced motion: no pin; the finished visit, the paper beside the phone ---------- */
.story.st-still .st-stage{ height:auto; }
.story.st-still .st-pin{ position:relative; height:auto; min-height:0; padding-bottom:60px; }
.story.st-still .st-scene{ height:620px; flex:none; }
.story.st-still .st-wave, .story.st-still .st-lang, .story.st-still .st-finds, .story.st-still .st-links{ display:none; }
.story.st-still *{ transition:none !important; }
.st-pad .st-foot .st-qcl{ color:#15803d; opacity:0; transition:opacity .3s ease; }
.st-pad .st-foot .st-qcl.st-on{ opacity:1; }

/* movement three: her record joins what she said — three files float in at the sides, then fly, with the scroll, to dock under the findings and on into the prescription */
.st-files{ position:absolute; z-index:4; left:0; right:0; top:var(--files-top, 66%); display:flex; justify-content:center; align-items:flex-start; gap:18px; }
.st-from{ position:absolute; left:0; right:0; top:-30px; margin:0; text-align:center; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(238,240,208,.6); opacity:0; transition:opacity .5s ease; }
.st-from.st-on{ opacity:1; }
.st-file{ width:var(--file-w, 168px); display:flex; flex-direction:column; gap:6px; opacity:0; transform-origin:50% 40%; will-change:transform, opacity; }
/* no transition here on purpose: story.js places each file from the scroll position every frame */
.st-file b{ font-size:12.5px; font-weight:500; color:#fff; padding:5px 10px; border-radius:99px; background:rgba(238,240,208,.08); border:1px solid rgba(238,240,208,.3); align-self:flex-start; max-width:100%; line-height:1.3; }
.st-fn{ font-size:10.5px; line-height:1.3; color:rgba(244,244,240,.55); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap:anywhere; }
.st-th{ position:relative; display:block; aspect-ratio:16/10.5; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 18px 34px -16px rgba(0,0,0,.9); }
/* a report: a white page, a letterhead, lines */
.st-th.st-doc{ background:#f5f5f2; }
.st-th.st-doc i{ position:absolute; left:10%; height:5%; border-radius:2px; background:#c9ccd1; }
.st-th.st-doc i:nth-child(1){ top:10%; width:42%; height:8%; background:#2563eb; opacity:.75; }
.st-th.st-doc i:nth-child(2){ top:28%; width:78%; } .st-th.st-doc i:nth-child(3){ top:40%; width:64%; }
.st-th.st-doc i:nth-child(4){ top:52%; width:72%; background:#16a34a; opacity:.6; }
.st-th.st-doc i:nth-child(5){ top:64%; width:56%; } .st-th.st-doc i:nth-child(6){ top:76%; width:68%; }
.st-th.st-doc.st-old i:nth-child(1){ background:#0f766e; } .st-th.st-doc.st-old i:nth-child(4){ background:#c9ccd1; opacity:1; }
/* a chest X-ray: dark, two lung fields, ribs of light */
.st-th.st-xray{ background:radial-gradient(30% 42% at 34% 54%, rgba(226,232,240,.5), transparent 70%), radial-gradient(30% 42% at 66% 54%, rgba(226,232,240,.46), transparent 70%), radial-gradient(9% 70% at 50% 50%, rgba(241,245,249,.7), transparent 70%), #05070a; }
.st-th.st-xray::after{ content:""; position:absolute; inset:18% 18%; background:repeating-linear-gradient(170deg, transparent 0 9px, rgba(255,255,255,.08) 9px 11px); border-radius:40%; }
@media (max-width:760px){
  .st-files{ gap:8px; }
  .st-file b{ font-size:10.5px; padding:4px 7px; white-space:normal; }
}
.story.st-still .st-files{ display:none; }
@media (max-width:760px){ .st-from{ top:-26px; } }

/* a short screen: during Combine her line and its threads step back and the findings rise, so her record fits below them */
.story.st-tight .st-finds{ transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .5s ease; }
.story.st-tight.st-comb .st-finds{ transform:translateY(calc(-1 * var(--lift, 0px))); }
.story.st-tight.st-comb .st-links, .story.st-tight.st-comb.st-two .st-lang.st-hers{ opacity:0; transition:opacity .5s ease; }
.story.st-tight.st-three .st-finds{ transform:translateY(calc(-1 * var(--lift, 0px) - 24px)) scale(.96); }

/* the voice steps back once her words become findings, so no card, fading in or not, has a line through it */
.st-wave{ transition:opacity .5s ease; }
.story.st-two .st-wave, .story.st-comb .st-wave{ opacity:calc(var(--wo, 1) * .18); }