Cross-cutting

<div class="frame">
  <div class="shot a"><i class="sun"></i><b>PLACE A</b></div>
  <div class="shot b"><i class="moon"></i><b>PLACE B</b></div>
  <div class="lanes"><span>A</span><i></i><b>B</b><i></i><em></em></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0 0 24%;display:grid;place-items:center;overflow:hidden}
.a{background:linear-gradient(145deg,#e6c77f,#a66c52);animation:a 3.6s steps(1,end) infinite}
.b{background:linear-gradient(145deg,#1f6372,#26334b);opacity:0;animation:b 3.6s steps(1,end) infinite}
.shot i{width:clamp(48px,27vmin,145px);aspect-ratio:1;border-radius:50%;background:#fff1b1;box-shadow:0 0 0 18px rgba(255,255,255,.15)}
.b i{border-radius:18%;background:var(--surface);box-shadow:0 0 0 13px rgba(255,255,255,.12);transform:rotate(45deg)}
.shot b{position:absolute;left:6%;bottom:7%;font:700 clamp(9px,2.3vmin,13px) ui-monospace,monospace;letter-spacing:.14em;color:var(--surface)}
.lanes{position:absolute;left:7%;right:7%;bottom:6%;height:15%;display:grid;grid-template-columns:20px 1fr 20px 1fr 2px;grid-template-rows:1fr 1fr;align-items:center;gap:2px;color:var(--fg);font:700 clamp(8px,2vmin,11px) ui-monospace,monospace}
.lanes span{grid-column:1;grid-row:1}.lanes b{grid-column:1;grid-row:2}
.lanes i{height:4px;background:var(--line)}
.lanes i:nth-of-type(1){grid-column:2;grid-row:1;background:var(--accent)}
.lanes i:nth-of-type(2){grid-column:2 / 5;grid-row:2;background:var(--accent-2)}
.lanes em{position:absolute;left:24%;top:0;bottom:0;width:2px;background:var(--accent-3);animation:cursor 3.6s linear infinite}
@keyframes a{0%,47.9%{opacity:1}48%,100%{opacity:0}}
@keyframes b{0%,47.9%{opacity:0}48%,100%{opacity:1}}
@keyframes cursor{from{left:24%}to{left:98%}}