Push / slide

<div class="frame">
  <div class="shot old"><i class="sun"></i><i class="hill"></i><b>01</b></div>
  <div class="shot next"><i class="moon"></i><i class="hill"></i><b>02</b></div>
  <div class="arrow">PUSH <span>→</span></div>
</div>

.frame{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.shot{position:absolute;inset:0;overflow:hidden}
.old{background:linear-gradient(135deg,#f0d394,var(--accent-3));animation:old 3.6s ease-in-out infinite}
.next{background:linear-gradient(135deg,var(--accent-2),#182839);transform:translateX(100%);animation:next 3.6s ease-in-out infinite}
.sun,.moon{position:absolute;left:18%;top:19%;width:clamp(38px,20vmin,110px);aspect-ratio:1;border-radius:50%;background:#fff1b1}
.moon{left:auto;right:18%;background:var(--surface)}
.hill{position:absolute;left:-12%;right:-12%;bottom:-22%;height:60%;border-radius:50% 50% 0 0;background:var(--fg);opacity:.7;transform:rotate(-7deg)}
.next .hill{background:#101923;transform:rotate(7deg)}
.shot b{position:absolute;left:7%;bottom:9%;font:700 clamp(18px,5vmin,32px) ui-monospace,monospace;color:var(--surface)}
.arrow{position:absolute;right:5%;top:6%;padding:5px 8px;background:var(--surface);color:var(--fg);font:700 clamp(8px,2.2vmin,12px) ui-monospace,monospace;letter-spacing:.08em}
.arrow span{color:var(--accent)}
@keyframes old{0%,32%{transform:translateX(0)}62%,100%{transform:translateX(-100%)}}
@keyframes next{0%,32%{transform:translateX(100%)}62%,100%{transform:translateX(0)}}