.sky{position:absolute;left:0;right:0;top:0;height:55vh;overflow:visible}

.clouds{position:absolute;left:0;right:0;top:6%;height:150px;pointer-events:none;z-index:3}
.cloud{
  position:absolute;background:#fff;border-radius:60px;filter:drop-shadow(var(--shadow-soft));
  height:58px;width:180px;animation: cloudMove var(--dur-sky-move) linear infinite;
}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud:before{width:76px;height:76px;left:14px;top:-30px}
.cloud:after{width:62px;height:62px;left:110px;top:-24px}

.c1{left:-40%;top:14%}
.c2{left:-65%;top:26%;transform:scale(.95)}
.c3{left:-20%;top:18%;transform:scale(1.1)}
.c4{left:-85%;top:10%; transform:scale(1.2)}
.c5{left:-10%;top:30%;transform:scale(1.05)}
.c6{left:-55%;top:22%;transform:scale(.9)}
@keyframes cloudMove{from{transform:translateX(0)}to{transform:translateX(180vw)}}

.sun,.moon{
  position:absolute; border-radius:50%;
  left:-80px; top:22%; width:110px; height:110px;
  offset-path: path('M 0,120 C 320,30 680,30 1000,120');
  offset-rotate: 0deg;
  animation: orbit var(--dur-sky-move) linear infinite;
  filter: blur(.2px);
  z-index:2;  
}
@keyframes orbit{to{offset-distance:100%}}

.sun{
  background:radial-gradient(#fff8a8,#ffd54d 60%,#ffb300);
  box-shadow:0 0 60px rgba(255,180,0,.6);
  animation-name: orbit, spinSun, dayFade;
  animation-duration: var(--dur-sky-move), 20s, var(--dur-daynight);
  animation-iteration-count: infinite, infinite, infinite;
}
@keyframes spinSun{to{transform:rotate(360deg)}}
@keyframes dayFade{0%,49%{opacity:1}51%,100%{opacity:0}}

.moon{
  width:86px;height:86px;background:radial-gradient(#ffffff,#cbd3df);
  box-shadow:0 0 22px rgba(200,210,220,.6);
  animation-name: orbitMoon, spinMoon, nightFade;
  animation-duration: var(--dur-sky-move), 28s, var(--dur-daynight);
  animation-iteration-count: infinite, infinite, infinite;
}
@keyframes orbitMoon{0%{offset-distance:50%}100%{offset-distance:150%}}
@keyframes spinMoon{to{transform:rotate(-360deg)}}
@keyframes nightFade{0%,49%{opacity:0}51%,98%{opacity:1}100%{opacity:0}}