/* HÆLTH · Science page, real 3D (sci3d.js). Scoped to .pg--science; nothing here touches other pages.
   html.s3d-on    : WebGL2 + motion -> sticky vial stage, two-vial sourcing stage, 3D peptide chain
   html.s3d-still : reduced motion  -> the same renders as still frames in the original layout
   html.s3d-ready : the renderer is up (the drawing and the 2D chain step aside)
   html.s3d-anim  : section motion (frames that draw themselves, parallax films) */

.pg--science .s3d-pair{display:none}
.pg--science .s3d-cv{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s var(--ease)}
.pg--science .s3d-cv.is-in{opacity:1}

/* ---------- 01 · the vial stage: sticky behind the statement and the four standards ---------- */
.s3d-on .pg--science .standards{display:block;padding:0 var(--gut)}
.s3d-on .pg--science .standards__statement{position:relative;z-index:2;height:100vh;height:100svh;box-sizing:border-box;padding-top:calc(var(--hdr) + 22px)}
.s3d-on .pg--science .standards .blueprint{position:sticky;top:0;z-index:0;display:block;height:100vh;height:100svh;max-width:none;width:auto;justify-self:stretch;margin:-100vh calc(var(--gut) * -1) 0;margin-top:-100svh;overflow:hidden;background:#06080d;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 92%,transparent 100%)}
.s3d-on .pg--science .standards .blueprint svg,.s3d-still .pg--science .blueprint.is-3d svg{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0}   /* still read out: the drawing keeps its label */
.s3d-on .pg--science .standards .blueprint figcaption{position:absolute;z-index:3;right:var(--gut);bottom:calc(8svh + 6px);margin:0;transition:opacity .6s var(--ease)}
.s3d-on .pg--science .standards__list{position:relative;z-index:2;display:block;border:0;padding:0 0 4svh}
.s3d-on .pg--science .standards__list li{--d:1;display:flex;flex-direction:column;justify-content:center;min-height:86vh;min-height:86svh;padding:0;border:0;max-width:min(34vw,470px);
  opacity:calc(1 - var(--d) * .8);transition:opacity .25s linear}
.s3d-on .pg--science .standards__list li .mono{color:var(--signal);font-size:11px;margin:0 0 22px;display:flex;align-items:center;gap:12px}
.s3d-on .pg--science .standards__list li .mono::after{content:"";width:28px;height:1px;background:currentColor;opacity:.6}
.s3d-on .pg--science .standards__list li b{font:300 clamp(36px,3.5vw,54px)/1 var(--f-sans);letter-spacing:-.04em;margin:0 0 20px;color:var(--fg)}
.s3d-on .pg--science .standards__list li p{font-size:17px;line-height:1.55;max-width:32ch;color:var(--fg-2);margin:0}
@media (min-width:1100px){
  .s3d-on .pg--science .standards__title{font-size:clamp(56px,6.6vw,104px)}
  .s3d-on .pg--science .standards__statement .sec-sub{max-width:40ch}
}
/* stacked layouts: the vial up top, the standard below it over a scrim */
@media (max-width:1099px){
  .s3d-on .pg--science .standards .blueprint::after{content:"";position:absolute;inset:auto 0 0;height:60%;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);background:linear-gradient(0deg,rgba(7,8,12,.98) 0%,rgba(7,8,12,.96) 52%,rgba(7,8,12,.72) 74%,rgba(7,8,12,0) 100%)}
  .s3d-on .pg--science .standards .blueprint.is-past::after{opacity:1}
  .s3d-on .pg--science .standards .blueprint figcaption{top:calc(var(--hdr) + 12px);bottom:auto;left:var(--gut);right:var(--gut);font-size:9px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0}
  .s3d-on .pg--science .standards .blueprint.is-past figcaption{opacity:1}
  .s3d-on .pg--science .standards__list li{min-height:100vh;min-height:100svh;justify-content:flex-end;max-width:560px;padding-bottom:calc(var(--dock) + 92px + env(safe-area-inset-bottom,0px))}
  .s3d-on .pg--science .standards__list li b{font-size:clamp(32px,8.6vw,46px);margin-bottom:14px}
  .s3d-on .pg--science .standards__list li .mono{margin-bottom:16px}
  .s3d-on .pg--science .standards__list li p{font-size:16px}
}
@media (min-width:760px) and (max-width:1099px){.s3d-on .pg--science .standards__list li{padding-bottom:64px}}

/* callouts that hold on to the vial (the reference drawing's own labels) */
.pg--science .s3d-co{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);will-change:transform}
.pg--science .s3d-co.is-on{opacity:1}
.pg--science .s3d-co.is-l{flex-direction:row-reverse}
.pg--science .s3d-co__pt{flex:none;width:7px;height:7px;margin:0 -3px;border:1px solid var(--fg);background:rgba(6,8,13,.5)}
.pg--science .s3d-co__ln{flex:none;width:var(--w,88px);height:1px;background:linear-gradient(90deg,var(--fg),rgba(236,232,223,.3));transform:scaleX(0);transform-origin:0 50%;transition:transform .8s cubic-bezier(.7,0,.2,1) .08s}
.pg--science .s3d-co.is-l .s3d-co__ln{transform-origin:100% 50%;background:linear-gradient(270deg,var(--fg),rgba(236,232,223,.3))}
.pg--science .s3d-co.is-on .s3d-co__ln{transform:none}
.pg--science .s3d-co span{color:var(--fg);white-space:nowrap;opacity:0;transition:opacity .4s var(--ease) .5s}
.pg--science .s3d-co.is-on span{opacity:1}

/* ---------- 02 · sourcing: the two standards as two vials ---------- */
.s3d-on .pg--science .s3d-pair,.s3d-still .pg--science .s3d-pair{display:block;position:relative;height:clamp(300px,50vh,540px);margin:0 0 clamp(10px,2vw,22px);background:#06080d;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 84%,transparent 100%),linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-composite:intersect}
@media (max-width:759px){.s3d-on .pg--science .s3d-pair,.s3d-still .pg--science .s3d-pair{height:clamp(280px,44svh,400px)}}

/* ---------- 03 · peptides: the 3D chain replaces the 2D drawing once it is up ---------- */
.s3d-ready .pg--science .signals__stage canvas.chain{display:none}
.pg--science .signals__stage .s3d-cv{z-index:0}
.pg--science .signals__stage .chain-seq{z-index:2}
.pg--science .s3d-tag{position:absolute;left:0;top:0;z-index:2;color:var(--gold);font-size:10px;letter-spacing:.08em;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);will-change:transform}
.pg--science .s3d-tag.is-on{opacity:1}
.s3d-ready.has-rx .pg--science .signals__stage{cursor:grab}
.s3d-ready.has-rx .pg--science .signals__stage.is-drag{cursor:grabbing}

/* ---------- reduced motion: still renders in the original layout ---------- */
.pg--science .s3d-snapbox{position:relative;width:100%;aspect-ratio:520 / 560;-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
.pg--science .s3d-snap{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- section motion ---------- */
.s3d-anim .pg--science .srcbox{position:relative;border-color:transparent;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.s3d-anim .pg--science .srcbox::before,.s3d-anim .pg--science .srcbox::after{content:"";position:absolute;inset:0;pointer-events:none;border:0 solid var(--line-2);transition:transform 1.3s cubic-bezier(.7,0,.2,1) var(--sd,0s),border-color .5s var(--ease)}
.s3d-anim .pg--science .srcbox::before{border-top-width:1px;border-bottom-width:1px;transform:scaleX(0);transform-origin:0 50%}
.s3d-anim .pg--science .srcbox::after{border-left-width:1px;border-right-width:1px;transform:scaleY(0);transform-origin:50% 0;transition-delay:calc(var(--sd,0s) + .18s)}
.s3d-anim .pg--science .srcbox.is-in::before,.s3d-anim .pg--science .srcbox.is-in::after{transform:none}
.s3d-anim .pg--science .srcbox+.srcbox{--sd:.16s}
.s3d-anim .pg--science .srcbox b{clip-path:inset(0 0 100% 0);transform:translate3d(0,.35em,0);transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) calc(var(--sd,0s) + .25s),transform 1.2s var(--ease) calc(var(--sd,0s) + .25s)}
.s3d-anim .pg--science .srcbox.is-in b{clip-path:inset(-12% -6% -18% -6%);transform:none}
.s3d-anim .pg--science .srcbox p,.s3d-anim .pg--science .srcbox span{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s var(--ease) calc(var(--sd,0s) + .55s),transform 1.1s var(--ease) calc(var(--sd,0s) + .55s)}
.s3d-anim .pg--science .srcbox span{transition-delay:calc(var(--sd,0s) + .75s)}
.s3d-anim .pg--science .srcbox.is-in p,.s3d-anim .pg--science .srcbox.is-in span{opacity:1;transform:none}
.s3d-anim .pg--science .srcbox.is-hot::before,.s3d-anim .pg--science .srcbox.is-hot::after{border-color:rgba(61,123,255,.6)}
.s3d-anim .pg--science .sources__grid.has-hot .srcbox:not(.is-hot){opacity:.55}
.s3d-anim .pg--science .band .filmbg{clip-path:inset(var(--ci,0%) var(--cx,0%))}
.s3d-anim .pg--science .band .filmbg>img,.s3d-anim .pg--science .band .filmbg>video{transform:translate3d(0,var(--py,0px),0) scale(1.14);will-change:transform}
.s3d-anim .pg--science .s3d-up{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s var(--ease) var(--ud,0s),transform 1.1s var(--ease) var(--ud,0s)}
.s3d-anim .pg--science .s3d-up.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.s3d-anim .pg--science .srcbox *,.s3d-anim .pg--science .s3d-up{opacity:1!important;transform:none!important;clip-path:none!important}}
/* r5: phones/tablets: the copy of each stop sits on its own scrim, so the vial's label never reads through the heading */
@media (max-width:1099px){.s3d-on .pg--science .standards__list li{background:linear-gradient(0deg,rgba(7,8,12,.95) 0%,rgba(7,8,12,.9) 30%,rgba(7,8,12,.78) 48%,rgba(7,8,12,0) 68%)}}