Vignette

<div class="scene">
  <i class="sun"></i><i class="ridge far"></i><i class="ridge near"></i>
  <div class="tower"><i></i></div>
  <span class="label">CENTER STAYS CLEAR</span>
  <span class="edge-note">SOFT EDGE FALL-OFF</span>
  <div class="vignette"></div>
</div>

.scene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,#91c5c4 0%,#d8d5ad 53%,#efbe79 100%)}
.sun{position:absolute;left:50%;top:15%;width:clamp(35px,19vmin,110px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:#ffe5a5;box-shadow:0 0 44px rgba(255,228,168,.5)}
.ridge{position:absolute;left:-10%;right:-10%;bottom:-25%;height:63%;border-radius:50% 50% 0 0}
.far{background:#719a82;transform:rotate(-4deg) translateY(-12%)}
.near{background:#426e60;transform:rotate(3deg)}
.tower{position:absolute;z-index:1;left:50%;bottom:21%;width:clamp(18px,7vmin,42px);height:31%;transform:translateX(-50%);background:#f6ead0;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);box-shadow:0 0 0 1px rgba(36,31,25,.25)}
.tower i{position:absolute;left:34%;top:13%;width:32%;height:12%;background:var(--accent-3)}
.label,.edge-note{position:absolute;z-index:3;color:#fff8e8;font:700 clamp(8px,2.8vmin,13px)/1.2 ui-monospace,monospace;letter-spacing:.1em;text-shadow:0 1px 5px rgba(0,0,0,.48);white-space:nowrap}
.label{left:5%;top:6%}.edge-note{right:5%;bottom:6%;color:#fff2d4}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 54% 62% at 50% 48%,transparent 45%,rgba(5,8,10,.05) 72%,rgba(5,8,10,.28) 124%);opacity:0;animation:shade 3.6s ease-in-out infinite}
@keyframes shade{0%,12%{opacity:0}34%,73%{opacity:.9}94%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.vignette{animation-duration:8s}}