레터박스

<div class="stage">
  <div class="viewer">
    <div class="picture">
      <i class="sun"></i><i class="cloud"></i><i class="ridge back"></i><i class="ridge front"></i>
      <span class="note source">SOURCE FRAME · 16:9</span>
      <span class="note mask">BARS MASK · FRAME UNCHANGED</span>
    </div>
    <i class="bar top"></i><i class="bar bottom"></i>
  </div>
</div>

.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.viewer{position:absolute;left:50%;top:50%;width:min(100vw,177.78vh);aspect-ratio:16/9;transform:translate(-50%,-50%);overflow:hidden;background:#15222a}
.picture{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#7fb4bd 0%,#c8d5bd 54%,#e9bd77 100%)}
.sun{position:absolute;left:67%;top:21%;width:clamp(24px,12vmin,80px);aspect-ratio:1;border-radius:50%;background:#ffe2a0;box-shadow:0 0 34px rgba(255,225,159,.32)}
.cloud{position:absolute;left:-16%;top:29%;width:28%;height:10%;border-radius:999px;background:rgba(255,255,255,.48);filter:blur(2px);animation:drift 7s ease-in-out infinite alternate}
.ridge{position:absolute;left:-8%;right:-8%;bottom:-34%;height:75%;border-radius:50% 50% 0 0}
.back{background:#567a73;transform:rotate(4deg) translateY(-10%)}
.front{background:#315b54;transform:rotate(-3deg)}
.note{position:absolute;z-index:2;color:#fff7e5;font:700 clamp(8px,2.8vmin,13px)/1.2 ui-monospace,monospace;letter-spacing:.09em;text-shadow:0 1px 5px rgba(0,0,0,.7);white-space:nowrap}
.source{left:5%;top:16%}.mask{right:5%;bottom:15%;text-align:right}
.bar{position:absolute;z-index:3;left:0;right:0;height:0;background:#080807;animation:bars 3.6s cubic-bezier(.24,.78,.22,1) infinite}
.bar.top{top:0;transform-origin:top}.bar.bottom{bottom:0;transform-origin:bottom}
@keyframes bars{0%,9%{height:0}27%,75%{height:13%}93%,100%{height:0}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(210%)}}
@media(prefers-reduced-motion:reduce){.bar,.cloud{animation-duration:8s}}