컬러 그레이딩

<div class="wrap">
  <div class="scene base"><div class="sky"></div><div class="hill"></div><div class="sun2"></div></div>
  <div class="scene graded"><div class="sky"></div><div class="hill"></div><div class="sun2"></div></div>
  <div class="divider"></div>
</div>
<span class="tag left">FLAT</span>
<span class="tag right">GRADED</span>

.wrap{position:absolute;inset:0;overflow:hidden}
.scene{position:absolute;inset:0}
.scene .sky{position:absolute;inset:0;background:linear-gradient(180deg,#9fb2c2,#d9dbcf 65%)}
.scene .hill{position:absolute;left:0;right:0;bottom:0;height:38%;background:#4c5a4c;
  clip-path:polygon(0 100%,0 40%,30% 70%,55% 30%,80% 65%,100% 20%,100% 100%)}
.scene .sun2{position:absolute;right:16%;top:18%;width:12%;aspect-ratio:1;border-radius:50%;background:#e8e2c8}
.scene.graded{filter:saturate(1.35) contrast(1.12);animation:reveal 4.2s ease-in-out infinite alternate}
.scene.graded::after{content:'';position:absolute;inset:0;
  background:linear-gradient(200deg,rgba(0,160,150,.4),transparent 45%,rgba(255,130,40,.4));
  mix-blend-mode:color}
@keyframes reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}}
.divider{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8);
  animation:sweep 4.2s ease-in-out infinite alternate}
@keyframes sweep{from{left:0%}to{left:100%}}
.tag{position:absolute;top:5%;font:700 10px ui-monospace,monospace;padding:2px 8px;border-radius:20px;
  background:rgba(0,0,0,.45);color:#fff}
.tag.left{left:5%}
.tag.right{right:5%}