/* ==========================================================================
   BUZZKILL — animated explainers
   1. "Inside the liver"  → how-it-works.html
   2. "The blend at work" → ingredients.html
   Pure SVG + CSS + vanilla JS. No video, no library.
   ========================================================================== */

.viz{
  position:relative;background:var(--asphalt);border:1px solid var(--hair);
  padding:clamp(1.2rem,2.6vw,2.2rem);
}
.light .viz{background:var(--paper);border-color:var(--hair-dark)}
.viz svg{width:100%;height:auto;display:block;overflow:visible}

.viz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.viz-head h3{margin:0}
.viz-cap{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(.82rem,1.1vw,.95rem);font-weight:700;color:var(--voltage);
  min-height:2.6em;display:flex;align-items:center;
}
.light .viz-cap{color:var(--orange)}
.viz-sub{margin:.2rem 0 0;color:var(--smoke);font-size:.95rem;max-width:62ch}
.light .viz-sub{color:rgba(10,10,11,.7)}

/* ---- controls ---- */
.viz-ctrl{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.3rem}
.viz-ctrl button{
  background:transparent;border:1.5px solid var(--hair);color:var(--smoke);
  font-family:var(--util);text-transform:uppercase;letter-spacing:.12em;
  font-size:.76rem;font-weight:700;padding:.6rem 1rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
}
.light .viz-ctrl button{border-color:var(--hair-dark);color:rgba(10,10,11,.6)}
.viz-ctrl button:hover{color:var(--bone);border-color:var(--smoke-dim)}
.light .viz-ctrl button:hover{color:var(--blackout);border-color:rgba(10,10,11,.4)}
.viz-ctrl button[aria-pressed="true"]{background:var(--voltage);border-color:var(--voltage);color:var(--blackout)}

/* ---- explainer video ---- */
.viz-video{margin:0 0 clamp(1.6rem,3vw,2.4rem)}
.viz-video-frame{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border:1px solid var(--hair);overflow:hidden;
}
.light .viz-video-frame{border-color:var(--hair-dark)}
.viz-video-frame iframe,.viz-video-frame video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;object-fit:cover;background:#000}
.viz-video figcaption{
  margin-top:.85rem;font-family:var(--util);text-transform:uppercase;
  letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--smoke-dim);
}
.light .viz-video figcaption{color:rgba(10,10,11,.5)}

/* ==========================  1. LIVER  ========================== */
.liver .chamber{fill:none;stroke:var(--hair);stroke-width:2}
.light .liver .chamber{stroke:rgba(10,10,11,.16)}
.liver .lbl{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;font-size:14px;fill:var(--smoke-dim);
}
.light .liver .lbl{fill:rgba(10,10,11,.5)}
.liver .lbl-lg{font-size:19px;fill:var(--smoke)}
.light .liver .lbl-lg{fill:rgba(10,10,11,.62)}

.liver .gate{stroke-width:3;fill:none;transition:stroke .6s ease,opacity .6s ease}
.liver .gate-adh{stroke:var(--smoke-dim);opacity:.75}
.liver .gate-aldh{stroke:var(--smoke-dim);opacity:.35}
.liver.mode-b .gate-aldh{stroke:var(--voltage);opacity:1}

/* particles */
.liver .p{opacity:0}
.liver.run .p{animation:flowStall 7s linear infinite;animation-delay:var(--d)}
.liver.run.mode-b .p{animation-name:flowClear;animation-duration:5.6s}

@keyframes flowStall{
  0%   {transform:translateX(0);   fill:#F6F4EE; opacity:0}
  6%   {opacity:1}
  28%  {transform:translateX(195px);fill:#F6F4EE}
  34%  {fill:#F5821F}
  60%  {transform:translateX(380px);fill:#F5821F;opacity:1}
  85%  {transform:translateX(415px);fill:#F5821F;opacity:.8}
  100% {transform:translateX(425px);fill:#F5821F;opacity:0}
}
@keyframes flowClear{
  0%   {transform:translateX(0);   fill:#F6F4EE; opacity:0}
  6%   {opacity:1}
  26%  {transform:translateX(195px);fill:#F6F4EE}
  32%  {fill:#F5821F}
  58%  {transform:translateX(435px);fill:#F5821F}
  66%  {fill:#2AA9E0}
  95%  {opacity:1}
  100% {transform:translateX(710px);fill:#2AA9E0;opacity:0}
}

/* the backed-up pile of acetaldehyde */
.liver .pile{opacity:0;transition:opacity .7s ease}
.liver.mode-a .pile{opacity:1}
.liver.run.mode-a .pile circle{animation:jostle 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes jostle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* support tokens dock under the second gate */
.liver .tok{opacity:0;transform:translateY(34px);transition:opacity .55s ease,transform .55s var(--ease)}
.liver.mode-b .tok{opacity:1;transform:translateY(0)}
.liver .tok:nth-of-type(1){transition-delay:.05s}
.liver .tok:nth-of-type(2){transition-delay:.15s}
.liver .tok:nth-of-type(3){transition-delay:.25s}
.liver .tok:nth-of-type(4){transition-delay:.35s}
.liver .tok rect{fill:var(--voltage)}
.liver .tok text{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;fill:#0A0A0B;text-anchor:middle;text-transform:uppercase;
}

/* acetaldehyde load meter */
.liver .meter-bg{fill:var(--hair)}
.light .liver .meter-bg{fill:rgba(10,10,11,.1)}
.liver .meter-fill{fill:var(--orange);transition:width .9s var(--ease),fill .9s ease}
.liver.mode-b .meter-fill{fill:var(--voltage)}

/* ==========================  2. BLEND  ========================== */
.blend .ring{fill:none;stroke:var(--hair-dark);stroke-width:1.5;stroke-dasharray:3 7}
.blend .hub{fill:var(--blackout)}
.blend .hub-t{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;fill:var(--voltage);
  text-anchor:middle;text-transform:uppercase;letter-spacing:.06em;
}
.blend .node{cursor:pointer}
.blend .node circle{
  stroke-width:2;transition:r .35s var(--ease),fill .35s ease,stroke .35s ease;
}
.blend .node text{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:12.5px;
  letter-spacing:.07em;text-anchor:middle;text-transform:uppercase;
  fill:rgba(10,10,11,.62);transition:fill .3s ease;pointer-events:none;
}
.blend .node[data-job="liver"] circle{fill:#FDF0E2;stroke:var(--orange)}
.blend .node[data-job="anti"] circle{fill:#EAF6FC;stroke:var(--berry)}
.blend .node[data-job="fuel"] circle{fill:#FCFAD6;stroke:#C8BC00}
.blend .node[data-job="calm"] circle{fill:#F0F0EE;stroke:#7A7A72}
.blend .node.on circle{filter:drop-shadow(0 6px 14px rgba(10,10,11,.22))}
.blend .node.on text{fill:var(--blackout)}
.blend .spoke{stroke:var(--hair-dark);stroke-width:1.5;opacity:.5;transition:opacity .35s ease,stroke .35s ease}
.blend .spoke.on{opacity:1;stroke-width:2.5}

.blend-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:1.2rem}
.blend-legend span{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.13em;font-size:.74rem;
  font-weight:700;color:rgba(10,10,11,.55);display:flex;align-items:center;gap:.45rem;
}
.blend-legend i{width:11px;height:11px;border-radius:50%;display:block}

.blend-panel{
  margin-top:1.4rem;border-top:2px solid var(--blackout);padding-top:1.1rem;
  min-height:8.5rem;
}
.blend-panel h4{
  font-family:var(--util);text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(1.1rem,1.7vw,1.4rem);font-weight:700;margin:0 0 .2rem;
}
.blend-panel .latin{font-style:italic;font-size:.86rem;color:rgba(10,10,11,.5);display:block;margin-bottom:.6rem}
.blend-panel p{margin:0;color:rgba(10,10,11,.72);max-width:64ch}
.blend-panel .job{
  display:inline-block;font-family:var(--util);text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;font-weight:700;padding:.25rem .6rem;margin-bottom:.7rem;color:#0A0A0B;
}

@media(max-width:720px){
  .blend .node text{font-size:15px}
  .viz-cap{min-height:3.6em}
  /* the diagram scales down with the viewBox, so scale the type back up
     or none of the labels are readable on a phone */
  .liver .lbl{font-size:28px;letter-spacing:.08em}
  .liver .lbl-lg{font-size:32px}
  .liver .tok text{font-size:23px}
  .viz{padding:.9rem}
  .liver .p,.liver .pile circle{r:9}
}

@media(prefers-reduced-motion:reduce){
  .liver.run .p,.liver.run.mode-b .p,.liver.run.mode-a .pile circle{animation:none}
  .liver .p{opacity:.9}
  .liver .tok{opacity:1;transform:none}
}