사운드 브리지

<div class="stage bridge-demo">
  <div class="monitor">
    <div class="shot dawn"><i class="sun"></i><i class="ridge"></i><span>SHOT A · DAWN</span></div>
    <div class="shot dusk"><i class="sun"></i><i class="ridge"></i><span>SHOT B · DUSK</span></div>
    <div class="bridge-label">ONE SOUND · TWO SHOTS</div>
  </div>
  <div class="timeline">
    <div class="track-row"><b>PICTURE</b><div class="lane"><i class="clip video-a">A · DAWN</i><i class="clip video-b">B · DUSK</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="track-row"><b>AUDIO</b><div class="lane"><i class="clip bridge waveform">MUSIC / AMBIENCE</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="track-row"><b>ROOM TONE</b><div class="lane"><i class="clip tone-a">A</i><i class="clip tone-b">B</i><i class="cut"></i><i class="playhead"></i></div></div>
    <div class="note"><i></i> THE BRIDGE TRACK CROSSES THE PICTURE CUT</div>
  </div>
</div>

.bridge-demo{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.monitor{position:absolute;inset:5% 6% 55%;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.shot{position:absolute;inset:0;overflow:hidden;color:#fff;font:700 clamp(8px,1vw,12px) ui-monospace,monospace;letter-spacing:.08em}
.dawn{background:linear-gradient(180deg,#d4a76e 0 50%,#647d70 50%);animation:dawn-shot 4s steps(1,end) infinite}
.dusk{background:linear-gradient(180deg,#36475b 0 50%,#282f3a 50%);opacity:0;animation:dusk-shot 4s steps(1,end) infinite}
.sun{position:absolute;left:23%;top:20%;width:17%;aspect-ratio:1;border-radius:50%;background:#ffe2a2;box-shadow:0 0 0 10px #ffe2a226}
.dusk .sun{left:68%;top:28%;background:#c5d2db;box-shadow:0 0 0 8px #c5d2db20}
.ridge{position:absolute;left:-5%;right:-5%;bottom:-20%;height:55%;border-radius:48% 48% 0 0;background:#34483f;transform:rotate(-3deg)}
.dusk .ridge{background:#171f2a;transform:rotate(4deg)}
.shot span{position:absolute;left:10px;bottom:8px;text-shadow:0 1px 4px #000}
.bridge-label{position:absolute;right:8px;top:8px;padding:4px 6px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:700 clamp(7px,.9vw,11px) ui-monospace,monospace;letter-spacing:.06em}
.timeline{position:absolute;left:6%;right:6%;top:49%;bottom:6%;display:grid;grid-template-rows:repeat(3,minmax(0,1fr)) auto;gap:4px}
.track-row{display:grid;grid-template-columns:clamp(50px,8vw,96px) 1fr;gap:6px;align-items:stretch;min-height:0}
.track-row>b{display:flex;align-items:center;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.05em}
.lane{position:relative;overflow:visible;min-width:0;border-bottom:1px solid var(--line)}
.clip{position:absolute;top:0;bottom:0;display:flex;align-items:center;overflow:hidden;padding:0 5px;white-space:nowrap;color:var(--fg);font:700 clamp(7px,1vw,12px) ui-monospace,monospace;letter-spacing:.025em}
.video-a{left:0;width:42%;border:1px solid var(--line);background:var(--surface)}
.video-b{left:42%;width:58%;border:1px solid var(--line);background:var(--surface)}
.bridge{left:21%;width:56%;border:1px solid var(--accent);background:var(--surface)}
.waveform:after{content:"";position:absolute;inset:27% 4px;background:repeating-linear-gradient(90deg,transparent 0 4px,currentColor 4px 5px,transparent 5px 8px);opacity:.36;pointer-events:none;color:var(--accent)}
.tone-a{left:0;width:42%;border:1px solid var(--line);background:var(--surface);opacity:.62}
.tone-b{left:42%;width:58%;border:1px solid var(--line);background:var(--surface);opacity:.62}
.cut{position:absolute;z-index:2;left:42%;top:-2px;bottom:-2px;width:1px;background:var(--fg);opacity:.72}
.playhead{position:absolute;z-index:3;top:-3px;bottom:-3px;left:0;width:2px;background:var(--accent);animation:playhead 4s linear infinite}
.note{display:flex;align-items:center;gap:6px;color:var(--muted);font:700 clamp(7px,1vw,11px) ui-monospace,monospace;letter-spacing:.035em}
.note i{width:7px;aspect-ratio:1;border-radius:50%;background:var(--accent);animation:blink 4s linear infinite}
@keyframes dawn-shot{0%,41.9%{opacity:1}42%,100%{opacity:0}}
@keyframes dusk-shot{0%,41.9%{opacity:0}42%,100%{opacity:1}}
@keyframes playhead{from{left:0}to{left:100%}}
@keyframes blink{0%,18%,78%,100%{opacity:.35}24%,74%{opacity:1}}