/* ============================================================================
   Cellivoo · graphics and motion layer
   Every figure animated here is a real measured number. Nothing counts up to
   an invented statistic, and every element renders its final value in the HTML
   so a reader with no JavaScript, or reduced motion set, sees the same facts.
   ========================================================================== */

/* ---- count up figures ---- */
.num{font-variant-numeric:tabular-nums}

/* ---- the 900 mg composition bar ---- */
.comp{margin-top:clamp(1.5rem,3vw,2.5rem)}
.comp__bar{display:flex;height:clamp(3rem,6vw,4.5rem);overflow:hidden;background:var(--sand)}
.comp__seg{position:relative;display:grid;place-content:center;color:var(--paper);
  width:0;transition:width 1.1s var(--ease);overflow:hidden;white-space:nowrap}
.comp.is-on .comp__seg{width:var(--w)}
@media(prefers-reduced-motion:reduce){.comp__seg{transition:none}.comp .comp__seg{width:var(--w)}}
.comp__seg:nth-child(1){background:var(--green)}
.comp__seg:nth-child(2){background:var(--olive)}
.comp__seg:nth-child(3){background:var(--sea-dk)}
.comp__seg b{font:500 clamp(.8rem,1.5vw,1rem)/1 var(--m);display:block;text-align:center}
.comp__seg span{font:400 .58rem/1 var(--t);letter-spacing:.14em;text-transform:uppercase;
  display:block;text-align:center;margin-top:.4rem;opacity:.82}
.comp__key{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1rem;
  font:400 .68rem/1 var(--t);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.comp__key i{display:inline-block;width:10px;height:10px;margin-right:.5rem;vertical-align:-1px;font-style:normal}

/* ---- horizontal comparison bars ---- */
.bars{display:grid;gap:clamp(1.2rem,2.5vw,2rem);margin-top:clamp(1.8rem,3.5vw,2.8rem)}
.cbar__h{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.6rem}
.cbar__n{font:400 .95rem/1.3 var(--t)}
.cbar__v{font:500 1rem/1 var(--m);color:var(--green);font-variant-numeric:tabular-nums;white-space:nowrap}
.cbar__t{height:14px;background:var(--sand);position:relative;overflow:hidden}
.cbar__f{position:absolute;inset:0 auto 0 0;width:0;background:var(--ink-faint);
  transition:width 1.3s var(--ease)}
.bars.is-on .cbar__f{width:var(--w)}
@media(prefers-reduced-motion:reduce){.cbar__f{transition:none}.bars .cbar__f{width:var(--w)}}
.cbar--us .cbar__f{background:var(--green)}
.cbar--us .cbar__n{font-weight:500}
.cbar__note{font:400 .74rem/1.5 var(--t);color:var(--ink-faint);margin:.5rem 0 0}

/* ---- the beta glucan molecule ---- */
.mol{width:100%;height:auto;overflow:visible}
.mol .bb,.mol .br{fill:none;stroke:var(--green);stroke-width:2.4;stroke-linecap:round}
.mol .br{stroke:var(--olive)}
.mol circle{fill:var(--paper);stroke:var(--green);stroke-width:2.2}
.mol .bcirc{stroke:var(--olive)}
.mol text{font:400 .62rem/1 var(--m);fill:var(--ink-faint);letter-spacing:.08em}
@media(prefers-reduced-motion:no-preference){
  .mol .bb,.mol .br{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
    transition:stroke-dashoffset 1.4s var(--ease)}
  .mol circle{opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
    transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .mol.is-on .bb,.mol.is-on .br{stroke-dashoffset:0}
  .mol.is-on circle{opacity:1;transform:scale(1)}
  .mol circle:nth-of-type(n){transition-delay:calc(var(--i,0)*70ms)}
}
/* One column. Nested inside a split section this was resolving to 242px wide. */
.molwrap{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:1fr;align-items:center}
.molwrap figcaption{border:0;padding:0;margin:0;text-transform:none;letter-spacing:0;
  font:400 .88rem/1.6 var(--t);color:var(--ink-soft)}
.molwrap figcaption b{display:block;font-family:var(--d);font-size:1.25rem;font-weight:400;
  color:var(--ink);margin-bottom:.5rem;letter-spacing:-.01em}


/* ---- the log scale spectrum ---- */
.spec{margin-top:clamp(2rem,4vw,3rem)}
.spec__t{position:relative;height:120px;border-bottom:1px solid var(--ink)}
.spec__b{position:absolute;bottom:0;width:6px;margin-left:-3px;background:var(--green);
  height:0;transition:height .8s var(--ease);opacity:.85}
.spec.is-on .spec__b{height:var(--h)}
@media(prefers-reduced-motion:reduce){.spec__b{transition:none}.spec .spec__b{height:var(--h)}}
.spec__b[data-c="profile"]{background:var(--ink-faint)}
.spec__b[data-c="trace"]{background:var(--olive)}
.spec__b:hover{opacity:1;width:10px;margin-left:-5px}
.spec__b::after{content:attr(data-l);position:absolute;bottom:100%;left:50%;translate:-50% -6px;
  font:400 .6rem/1 var(--m);color:var(--ink);background:var(--paper);padding:.3rem .4rem;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.spec__b:hover::after{opacity:1}
.spec__ax{display:flex;justify-content:space-between;margin-top:.6rem;
  font:400 .64rem/1 var(--m);color:var(--ink-faint)}

/* ---- copy parallax on the film plates ---- */
@media(prefers-reduced-motion:no-preference){@supports(animation-timeline:view()){
  .plate__in{animation:plx linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  @keyframes plx{from{transform:translateY(60px)}to{transform:translateY(-60px)}}
  .stagger>*{animation:sg linear both;animation-timeline:view();animation-range:entry 4% cover 30%}
  .stagger>*:nth-child(2){animation-range:entry 8% cover 34%}
  .stagger>*:nth-child(3){animation-range:entry 12% cover 38%}
  .stagger>*:nth-child(4){animation-range:entry 16% cover 42%}
  @keyframes sg{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}}

/* ---- the learn more call, a real destination not a decoration ---- */
.deep{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);
  align-items:center;background:var(--green);color:var(--paper);
  padding:clamp(2rem,5vw,4.5rem);margin-top:clamp(3rem,6vw,5rem)}
.deep h3{font-size:clamp(1.8rem,4vw,3rem);color:var(--paper)}
.deep p{color:rgba(250,247,240,.8);margin:1.2rem 0 2rem;max-width:44ch}
.deep .cta{background:var(--paper);color:var(--green)}
.deep .cta:hover{background:#fff}
.deep figure img{aspect-ratio:4/3;object-fit:cover}
@media(max-width:820px){.deep{grid-template-columns:1fr}}

/* ---- ambient video ----------------------------------------------------
   Plays only while it is on screen, pauses when it is not, and never
   autoplays under reduced motion. Muted and loopable, so it is B roll
   rather than something the reader has to manage. */
.vid{max-width:38rem;margin-top:clamp(2rem,4vw,3rem);background:var(--sand)}
.vid__el{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--sand)}
.vid__frame{position:relative;line-height:0}
.vid__btn{position:absolute;left:0;bottom:0;display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(250,247,240,.92);color:var(--ink);border:0;cursor:pointer;
  padding:.7rem 1.1rem;font:400 .68rem/1 var(--t);letter-spacing:.15em;text-transform:uppercase;
  transition:background .15s}
.vid__btn:hover{background:var(--paper)}
.vid__btn i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent var(--green);display:inline-block}
.vid[data-playing="1"] .vid__btn i{width:8px;height:10px;border:0;background:var(--green);
  box-shadow:inset 3px 0 0 var(--paper),inset -3px 0 0 var(--paper)}
.vid figcaption{border-top:1px solid var(--line-soft);margin-top:.9rem;padding-top:.9rem}
@media(max-width:900px){.vid{max-width:none}}


/* A plate carrying a video needs the copy column washed the whole way down,
   not just the bottom 70%, or the video sits on bare photograph. */
.plate--vid{align-items:center;padding-block:clamp(4rem,9vw,7rem)}
.plate--vid .wash{inset:0;height:100%;background:
  linear-gradient(90deg,var(--paper) 0%,rgba(250,247,240,.94) 40%,rgba(250,247,240,.5) 64%,transparent 84%)}
.plate--vid .plate__in{padding-bottom:0}
@media(max-width:900px){
  .plate--vid .wash{background:linear-gradient(0deg,var(--paper) 10%,rgba(250,247,240,.94) 55%,rgba(250,247,240,.5) 80%,transparent)}
}


/* A video filling a grid column rather than sitting under a paragraph. */
.vid--flush{max-width:none;margin-top:0}