/* ================================================================
   REEL: the motion layer. Full-screen scenes, one idea each,
   scroll-driven. Reads like a Reel, scans in about a second.
   Loads after site.css + ui.css.
================================================================ */

/* gentle snap: guides the scroll without fighting it */
html{ scroll-snap-type:y proximity; }
@media(prefers-reduced-motion:reduce){ html{ scroll-snap-type:none } }

/* the helix now lives behind the whole page, not just the hero */
#bg{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.55}
/* on mobile the helix sits centred, directly behind the type, pull it back */
@media(max-width:900px){#bg{opacity:.28}}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,transparent 30%,rgba(8,9,11,.72) 78%)}
/* content sits above the background, nav/.dock keep their own fixed layers */
.scene,footer{position:relative;z-index:1}

/* ---------------- scene ---------------- */
.scene{
  min-height:100svh;display:flex;align-items:center;
  scroll-snap-align:center;position:relative;padding:96px 0;
}
.scene.tall{min-height:auto;scroll-snap-align:none;padding:110px 0}
.scene-in{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px}
@media(max-width:560px){.scene-in{padding:0 22px}.scene{padding:80px 0}}

/* label above each scene */
.lab{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim);margin-bottom:22px;display:flex;align-items:center;gap:12px}
.lab::before{content:"";width:26px;height:1px;background:var(--acid)}

/* ---------------- type ---------------- */
.xl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.035em;
  line-height:.93;font-size:clamp(42px,8.4vw,118px)}
.lg{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.03em;
  line-height:.98;font-size:clamp(34px,6.4vw,86px)}
.md{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;letter-spacing:-.02em;
  line-height:1.04;font-size:clamp(24px,3.4vw,44px)}
.say{font-size:clamp(16px,2vw,21px);color:var(--bone-2);line-height:1.45;max-width:30ch;margin-top:24px}
.say.wide{max-width:44ch}
.tiny{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.06em;color:var(--dim);margin-top:20px}

/* ---------------- reveal ---------------- */
/* Hidden states apply only once JS has run (html.js). If the script is
   blocked or errors, every word stays visible instead of invisible. */
.rv{transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .rv{opacity:0;transform:translateY(26px)}
html.js .rv.in{opacity:1;transform:none}
.rv2{transition-delay:.1s}.rv3{transition-delay:.2s}.rv4{transition-delay:.3s}.rv5{transition-delay:.4s}
/* line mask, type wipes up from behind a bar.
   padding + negative margin so descenders aren't clipped by the wipe */
.mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.mask>span{display:block;transition:transform .9s cubic-bezier(.16,1,.3,1)}
html.js .mask>span{transform:translateY(105%)}
html.js .mask.in>span{transform:none}
/* second line steps down so a whole sentence fits on one line under the first */
.xl .l2{display:block;font-size:.5em;line-height:1.02;margin-top:.1em}
@media(prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none}html.js .mask>span{transform:none}
}

/* ---------------- reel progress rail ---------------- */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:60;
  display:flex;flex-direction:column;gap:9px}
.rail b{display:block;width:2px;height:15px;border-radius:2px;background:rgba(236,234,227,.22);
  transition:background .35s,height .35s;cursor:pointer}
.rail b.on{background:var(--acid);height:30px}
@media(max-width:900px){.rail{display:none}}

/* ---------------- big number ---------------- */
.fig{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.05em;
  line-height:.84;font-size:clamp(96px,22vw,300px);color:var(--acid);
  display:flex;align-items:baseline;gap:.06em}
.fig small{font-size:.18em;letter-spacing:-.01em;color:var(--bone-2);font-weight:600}

/* ---------------- step scenes ---------------- */
.stepbig{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.stepbig .no{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(64px,13vw,190px);
  line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px var(--acid);opacity:.55}
@media(max-width:640px){.stepbig{grid-template-columns:1fr;gap:14px}
  .stepbig .no{font-size:64px;-webkit-text-stroke-width:1.2px}}

/* ---------------- marquee of test names ---------------- */
.mq{overflow:hidden;white-space:nowrap;margin-top:44px;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-t{display:inline-flex;gap:14px;animation:mqs 38s linear infinite}
.mq-t:nth-child(2){animation-duration:46s;animation-direction:reverse}
@keyframes mqs{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mq .pill{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.02em;color:var(--bone-2);
  border:1px solid var(--line);border-radius:999px;padding:11px 20px;background:rgba(17,19,24,.55)}
.mq .pill.k{border-color:rgba(203,255,53,.4);color:var(--acid)}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}

/* ---------------- three-up ---------------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.trio .t{border-top:1px solid var(--line);padding-top:20px}
.trio .t .k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acid);margin-bottom:10px}
.trio .t .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:clamp(19px,2.3vw,26px);letter-spacing:-.015em;line-height:1.1}
.trio .t p{font-size:14px;color:var(--dim);margin-top:8px;line-height:1.45}
@media(max-width:760px){.trio{grid-template-columns:1fr;gap:22px;margin-top:36px}}

/* ---------------- price pair ---------------- */
.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px}
.pc{border:1px solid var(--line);border-radius:8px;padding:32px;background:rgba(17,19,24,.6);
  backdrop-filter:blur(8px);display:flex;flex-direction:column}
.pc.hi{border-color:rgba(203,255,53,.4)}
.pc .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-2)}
.pc .p{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(40px,5.5vw,66px);
  letter-spacing:-.04em;line-height:1;margin:14px 0 4px}
.pc .p i{font-style:normal;font-family:'Space Mono',monospace;font-size:13px;color:var(--dim);letter-spacing:0}
.pc ul{list-style:none;margin:20px 0 26px}
.pc li{font-size:14.5px;color:var(--bone-2);padding:9px 0;border-top:1px solid var(--line-2);display:flex;gap:10px}
.pc li::before{content:"→";color:var(--acid);flex-shrink:0}
.pc .go{margin-top:auto;width:100%;justify-content:center}
@media(max-width:760px){.pair{grid-template-columns:1fr}}

/* ---------------- doors ---------------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:46px}
.dr{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:10px;
  padding:38px 32px;min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;
  background:rgba(17,19,24,.55);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s}
.dr:hover{transform:translateY(-6px)}
.dr .gl{position:absolute;inset:auto -25% -60% auto;width:80%;aspect-ratio:1;border-radius:50%;filter:blur(34px)}
.dr.h{border-color:rgba(90,169,255,.3)}.dr.h .gl{background:radial-gradient(circle,rgba(90,169,255,.3),transparent 65%)}
.dr.s{border-color:rgba(247,182,121,.3)}.dr.s .gl{background:radial-gradient(circle,rgba(247,182,121,.28),transparent 65%)}
.dr.h:hover{border-color:rgba(90,169,255,.65)}.dr.s:hover{border-color:rgba(247,182,121,.65)}
.dr>*{position:relative;z-index:2}
.dr .k{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.dr.h .k{color:#8FC4FF}.dr.s .k{color:#F7C79B}
.dr .v{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:clamp(24px,3.2vw,36px);letter-spacing:-.02em;line-height:1.05}
.dr .go{margin-top:16px;font-family:'Space Mono',monospace;font-size:12.5px;display:inline-flex;gap:9px;align-items:center}
.dr:hover .go .arw{transform:translateX(5px)}
.dr .go .arw{transition:transform .2s}
@media(max-width:760px){.two{grid-template-columns:1fr}}

/* ---------------- sticky mobile CTA ---------------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,rgba(8,9,11,.92) 38%);display:none;
  transform:translateY(120%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.dock.up{transform:none}
.dock .btn{width:100%;justify-content:center}
@media(max-width:900px){.dock{display:block}}

/* collapsed detail, keeps the depth without the wall of text */
/* details already carries a bottom rule from site.css, one line per row */
.more{margin-top:0;border-top:1px solid var(--line);border-bottom:none}
.more:first-of-type{margin-top:34px}
.more summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;
  align-items:center;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.more summary::-webkit-details-marker{display:none}
.more summary:hover{color:var(--bone)}
.more summary .pm{color:var(--acid);font-size:16px;transition:transform .3s}
.more[open] summary .pm{transform:rotate(45deg)}
.more .body{padding-bottom:24px;font-size:15px;line-height:1.6;color:var(--bone-2);max-width:62ch}
.more .body p+p{margin-top:12px}
.more .body b{color:var(--bone)}

/* ---------------- photography ----------------
   Concept imagery, so every one carries a visible note saying so.
   The kit is not manufactured yet and the page must not imply it is. */
.shot{margin-top:42px;max-width:640px}
.shot img{width:100%;height:auto;display:block;border-radius:10px;
  border:1px solid var(--line);background:var(--panel)}
.shot figcaption{margin-top:10px;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.shot.wide{max-width:100%}
@media(max-width:560px){.shot{margin-top:30px}}

/* ---------------- sperm field ----------------
   Two panels, same drawing, different density. Labelled as a
   simulation: it is not a micrograph of anyone's sample. */
.field{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:44px}
.fp{position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:linear-gradient(160deg,rgba(90,169,255,.10),rgba(8,9,11,.55))}
.fp canvas{display:block;width:100%;height:230px}
.fp .fl{position:absolute;top:12px;left:12px;font-family:'Space Mono',monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  background:rgba(8,9,11,.62);padding:5px 9px;border-radius:3px}
.field-note{margin-top:12px;font-family:'Space Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;color:var(--dim)}
@media(max-width:640px){.field{grid-template-columns:1fr}.fp canvas{height:180px}}

/* ---------------- chart ---------------- */
.chart{margin-top:40px;max-width:720px}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .cx-grid{stroke:var(--line);stroke-width:1}
.chart .cx-axis{stroke:var(--line);stroke-width:1}
.chart .cx-line{fill:none;stroke:var(--acid);stroke-width:2;stroke-linecap:round}
.chart .cx-dot{fill:var(--acid)}
.chart .cx-ring{fill:none;stroke:var(--void);stroke-width:2}
.chart .cx-tick{font-family:'Space Mono',monospace;font-size:10.5px;fill:var(--dim);letter-spacing:.06em}
.chart .cx-val{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  font-size:19px;fill:var(--bone);font-variant-numeric:tabular-nums lining-nums}
.chart .cx-cap{font-family:'Space Mono',monospace;font-size:10px;fill:var(--dim);letter-spacing:.1em}
.chart figcaption{margin-top:14px;font-size:13.5px;color:var(--bone-2);line-height:1.5;max-width:62ch}
.chart figcaption b{color:var(--bone)}
.chart .grade{display:inline-block;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--void);background:var(--dim);
  padding:3px 8px;border-radius:3px;margin-right:8px;vertical-align:1px}

/* ---------------- stepper ----------------
   Named steps on the left, an accurate interface on the right,
   auto-advancing. Drawn rather than photographed: the report panel
   shows real markers against real reference ranges, which is more
   convincing than a stock photo of a phone. */
.stepper{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);margin-top:44px;align-items:start}
.stx{list-style:none}
.stx li{border-top:1px solid var(--line);padding:18px 0;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  opacity:.42;transition:opacity .35s}
.stx li:last-child{border-bottom:1px solid var(--line)}
.stx li.on{opacity:1}
.stx li .n{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--acid)}
.stx li h4{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:17px;letter-spacing:-.01em;line-height:1.2}
.stx li p{font-size:14px;color:var(--bone-2);margin-top:6px;line-height:1.45}
.stx li .bar{grid-column:1/-1;height:2px;background:var(--line);margin-top:14px;border-radius:2px;overflow:hidden}
.stx li .bar i{display:block;height:100%;width:0;background:var(--acid)}
.stx li.on .bar i{animation:stfill 6s linear forwards}
@keyframes stfill{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.stx li.on .bar i{animation:none;width:100%}}

.stp{position:relative;min-height:420px}
.stp .pane{position:absolute;inset:0;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.stp .pane.on{opacity:1;transform:none;pointer-events:auto}
@media(max-width:860px){.stepper{grid-template-columns:1fr}.stp{min-height:390px}}

/* the drawn device */
.dev{border:1px solid var(--line);border-radius:12px;background:var(--panel);
  padding:22px 24px;box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.dev .dh{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.dev .dh b{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em}
.dev .dh span{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.mk{display:grid;grid-template-columns:1fr auto;gap:6px 14px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.mk:last-child{border-bottom:0}
.mk .nm{font-size:14.5px;color:var(--bone)}
.mk .vl{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums lining-nums;text-align:right}
.mk .rg{grid-column:1/-1;height:5px;border-radius:3px;background:var(--line);position:relative;margin-top:2px}
.mk .rg i{position:absolute;top:0;bottom:0;background:var(--range-fill,rgba(203,255,53,.22));border-radius:3px}
.mk .rg b{position:absolute;top:-3px;width:3px;height:11px;border-radius:2px;background:var(--bone)}
.mk .lo{grid-column:1/-1;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.08em;color:var(--dim)}
.mk.flag .vl{color:#FF9C6E}
.mk.flag .rg b{background:#FF9C6E}

/* chat pane */
.chat{display:flex;flex-direction:column;gap:10px}
.bub{max-width:78%;padding:12px 15px;border-radius:14px;font-size:14.5px;line-height:1.45}
.bub.them{background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--bone-2)}
.bub.you{align-self:flex-end;background:var(--acid);color:var(--void);border-bottom-right-radius:4px}
.bub .who{display:block;font-family:'Space Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}