/* The three-step story plays once when visible; text is always readable. */
#how .section-head{align-items:end}
.process-control{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:transparent;border-radius:100px;min-height:44px;padding:12px 18px;font:inherit;font-size:12px;font-weight:bold;cursor:pointer;white-space:nowrap}
.process-control:hover{background:white;border-color:var(--accent)}
.step{position:relative;--delay:0s}
.step:nth-child(2){--delay:2.2s}.step:nth-child(3){--delay:4.4s}
.step:before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--accent)}
.step-visual{height:154px;background:#eae9e2;border-radius:14px;margin:0 0 28px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mini-camera{width:190px;aspect-ratio:16/9;background:#1b1b1f url('media/recording-poster.jpg') center/cover;border:5px solid #1b1b1f;border-radius:9px;position:relative;box-shadow:0 8px 20px #20211f1a}
.mini-crop{position:absolute;top:0;bottom:0;width:31.64%;left:26.18%;border:1px solid #a5e7ff;background:#a5e7ff16}
.mini-crop:before,.mini-crop:after{content:"";position:absolute;width:6px;height:6px;background:#a5e7ff;top:50%;transform:translateY(-50%)}
.mini-crop:before{left:-3px}.mini-crop:after{right:-3px}
.mini-caption{position:absolute;left:7px;bottom:5px;color:white;font-size:8px;font-weight:bold;text-shadow:0 1px 3px black}
.mini-rec{position:absolute;top:7px;left:7px;display:flex;gap:5px;align-items:center;color:white;font-size:8px;font-weight:bold}
.mini-rec-dot{width:6px;height:6px;border-radius:50%;background:#ff5545}
.mini-timer{position:absolute;right:7px;top:7px;color:white;font-size:9px;font-family:monospace;background:#20211f80;padding:1px 4px;border-radius:3px}
.mini-record{position:absolute;width:30px;height:30px;border:1px solid white;border-radius:50%;bottom:8px;left:50%;transform:translateX(-50%);display:grid;place-items:center}
.mini-record:after{content:"";width:13px;height:13px;border-radius:3px;background:#ff5545}
.mini-record:before{content:"";position:absolute;inset:-4px;border:1px solid #ff5545;border-radius:50%;opacity:0}
.waveform{position:absolute;bottom:9px;right:8px;display:flex;gap:2px;align-items:center;height:12px}
.waveform i{width:2px;height:8px;background:white;display:block;--bar:0s}.waveform i:nth-child(2){--bar:.1s;height:12px}.waveform i:nth-child(3){--bar:.2s;height:5px}.waveform i:nth-child(4){--bar:.3s;height:10px}
.mini-output{background:#1b1b1f url('media/recording-poster.jpg') center/cover;border:4px solid #1b1b1f;border-radius:7px;position:relative;box-shadow:0 6px 16px #20211f20}
.mini-output.landscape{width:130px;aspect-ratio:16/9}.mini-output.vertical{width:49px;aspect-ratio:9/16;margin-left:18px;background-size:auto 100%}
.mini-output:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:9px solid white;border-top:6px solid transparent;border-bottom:6px solid transparent;filter:drop-shadow(0 1px 2px #20211f)}
.export-check{position:absolute;bottom:-10px;right:-10px;background:#b83829;color:white;width:24px;height:24px;border-radius:50%;font-size:13px;display:grid;place-items:center;border:2px solid #eae9e2;z-index:1}
.step .big{margin-bottom:18px}
@keyframes process-line{from{width:0}to{width:100%}}
@keyframes process-number{0%{color:#a3a397}25%,100%{color:var(--accent)}}
@keyframes frame-position{0%{left:55%;background:#a5e7ff00}70%,100%{left:26.18%;background:#a5e7ff20}}
@keyframes process-record{0%,100%{opacity:.2}25%,75%{opacity:1}}
@keyframes process-ring{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
@keyframes audio-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes output-wide{0%{opacity:.2;transform:translateX(28px) scale(.85)}50%,100%{opacity:1;transform:none}}
@keyframes output-tall{0%{opacity:.2;transform:translateX(-28px) scale(.85)}60%,100%{opacity:1;transform:none}}
@keyframes output-check{0%,55%{opacity:0;transform:scale(.6)}80%,100%{opacity:1;transform:scale(1)}}
.process-running .step:before{animation:process-line 2s var(--delay) both}
.process-running .step .big{animation:process-number 2s var(--delay) both}
.process-running .mini-crop{animation:frame-position 2s both}
.process-running .mini-rec-dot{animation:process-record .65s 2.2s 3}
.process-running .mini-record:before{animation:process-ring .65s 2.2s 3}
.process-running .waveform i{animation:audio-wave .45s calc(2.2s + var(--bar)) 4}
.process-running .mini-output.landscape{animation:output-wide 2s 4.4s both}
.process-running .mini-output.vertical{animation:output-tall 2s 4.4s both}
.process-running .export-check{animation:output-check 2s 4.4s both}
.process-paused .step:before,.process-paused .step .big,.process-paused .step-visual *,.process-paused .step-visual *:before{animation-play-state:paused!important}
@media(max-width:640px){#how .section-head .process-control{margin-top:22px}.step-visual{height:144px;margin-bottom:22px}.step .big{margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){#how *{animation:none!important}.process-control{display:none}.step:before{width:100%}.step .big{color:var(--accent)}}