/* 40 — Voice (builder B3). Live canvas waveform of a raw take; the marked breath / um / restart lift out as particles,
   the wave closes up and turns blue. Glass toggle floats over the wave's reflection (moving content). */
.vo{overflow:clip;padding-block:clamp(72px,8vw,120px)}
.vo-head{text-align:center;display:grid;justify-items:center;gap:0}
.vo-title{max-width:14ch}
.vo-sub{margin-top:22px;max-width:46ch}

.vo-demo{--vo-h:clamp(230px,24vw + 40px,370px);position:relative;isolation:isolate;margin-top:clamp(40px,5vw,72px);display:grid;justify-items:center;text-align:center}
.vo-glow{position:absolute;inset:8% -12% 4%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 62%,rgba(59,99,255,.18),rgba(59,99,255,.05) 48%,transparent 72%)}

/* timecodes */
.vo-readout{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,28px);margin-bottom:clamp(16px,2vw,22px)}
.vo-tc{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.vo-tc__l{font-size:14px;font-weight:500;color:var(--fg-3);letter-spacing:.005em}
.vo-tc__n{font-size:clamp(22px,1.2vw + 14px,30px);font-weight:600;letter-spacing:-.02em;color:var(--fg-2);transition:color .4s var(--e-io)}
.vo-tc--raw .vo-tc__n{color:var(--fg)}
.vo-tc--clean .vo-tc__l{transition:color .4s}
.vo-tc--clean .vo-tc__n{color:var(--fg-4)}
.vo-demo.is-clean .vo-tc--clean .vo-tc__n{color:var(--fg)}
.vo-demo.is-clean .vo-tc--clean .vo-tc__l{color:var(--blue-2)}
.vo-tc__arrow{position:relative;width:clamp(28px,5vw,64px);height:1px;background:var(--line-3)}
.vo-tc__arrow::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid var(--line-3);border-right:1px solid var(--line-3);transform:rotate(45deg)}
.vo-tc__arrow i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--vo-p,0));background:var(--blue)}

/* transcript */
.vo-line{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;row-gap:4px;max-width:min(100%,900px);
  font-size:clamp(17px,.9vw + 12px,25px);font-weight:500;letter-spacing:-.01em;line-height:1.35;color:var(--fg);min-height:1.4em}
.vo-w{display:inline-block;white-space:nowrap;padding-right:.27em;position:relative;transform-origin:50% 60%}
.vo-w:last-child{padding-right:0}
.vo-x{color:var(--cut);overflow:hidden;vertical-align:bottom}
.vo-x::after{content:"";position:absolute;left:0;right:.27em;top:54%;height:2px;border-radius:2px;background:var(--cut);
  transform-origin:0 50%;transform:scaleX(var(--strike,0))}
.vo-x[data-seg="0"]{font-style:italic;font-weight:400}

/* waveform */
.vo-wave{position:relative;width:100%;margin-top:clamp(10px,1.4vw,18px);height:var(--vo-h)}
.vo-canvas{position:absolute;inset:0;width:100%;height:100%}
.vo-fallback{display:none}
html:not(.js) .vo-fallback{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:var(--r-media)}

/* toggle + stats: the toggle sits on the reflection */
.vo-controls{display:grid;justify-items:center;gap:16px;margin-top:calc(var(--vo-h) * -.34 + 8px);position:relative;z-index:2}
.vo-toggle{display:grid;grid-template-columns:1fr 1fr;padding:5px;min-height:54px;--x:0%}
.vo-toggle__thumb{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--r-chip);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.1),0 6px 18px -6px rgba(0,0,0,.6);
  transform:translateX(var(--x));transition:transform .2s var(--e-out)}
.vo-toggle.is-clean{--x:100%}
.vo-toggle__b{position:relative;z-index:2;min-height:44px;padding:0 clamp(16px,2vw,24px);border-radius:var(--r-chip);font-size:15px;font-weight:600;
  letter-spacing:-.005em;color:var(--fg-3);white-space:nowrap;transition:color .2s}
.vo-toggle__b.is-on{color:var(--fg)}
.vo-toggle__b[data-vo-to="clean"].is-on{color:#fff;text-shadow:0 0 18px rgba(59,99,255,.65)}
@media (hover:hover) and (pointer:fine){.vo-toggle__b:not(.is-on):hover{color:var(--fg-2)}}
.vo-stat{display:flex;gap:10px;font-size:15px;color:var(--fg-3)}
.vo-stat b{font-weight:600;color:var(--fg)}
.vo-stat__dot{color:var(--fg-4)}
.vo-note{margin-top:clamp(28px,3vw,40px)}

@media (max-width:733px){
  .vo-readout{gap:12px}
  .vo-tc{flex-direction:column;align-items:center;gap:2px}
  .vo-tc__l{font-size:13px}
  .vo-tc__arrow{margin-top:16px}
  .vo-line{max-width:340px}
  .vo-demo{--vo-h:240px}
}