/* Pixel clouds extracted from generated/clouds.png; decorative only. */
.sky-cloud{
  position:absolute;
  z-index:1;
  display:block;
  width:var(--cloud-width);
  height:auto;
  opacity:.46;
  image-rendering:pixelated;
  will-change:transform,opacity;
  animation:cloud-drift var(--cloud-speed,72s) steps(96,end) infinite alternate;
}
.sky-cloud.cloud-left{left:-3vw;top:14vh;--cloud-width:clamp(148px,16vw,286px);--cloud-travel:8vw;--cloud-speed:88s}
.sky-cloud.cloud-mid{left:37vw;top:26vh;--cloud-width:clamp(112px,12vw,224px);--cloud-travel:6vw;--cloud-speed:74s;opacity:.36}
.sky-cloud.cloud-right{right:-2vw;top:10vh;--cloud-width:clamp(126px,14vw,250px);--cloud-travel:-7vw;--cloud-speed:96s;opacity:.4}
.sky-cloud.cloud-sub-left{left:4vw;top:13vh;--cloud-width:clamp(142px,15vw,264px);--cloud-travel:7vw;--cloud-speed:92s}
.sky-cloud.cloud-sub-right{right:5vw;top:25vh;--cloud-width:clamp(108px,12vw,210px);--cloud-travel:-6vw;--cloud-speed:78s;opacity:.38}
body.tone-sunset .sky-cloud{opacity:.34;filter:saturate(.82) brightness(.9)}
body.tone-evening .sky-cloud,
body.tone-night .sky-cloud,
body[data-sky-phase="evening"] .sky-cloud,
body[data-sky-phase="night"] .sky-cloud,
body[data-sky-phase="moonrise"] .sky-cloud,
body[data-sky-phase="deep-night"] .sky-cloud{opacity:0}
@keyframes cloud-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--cloud-travel),0,0)}
}
@media (prefers-reduced-motion:reduce){.sky-cloud{animation:none}}
@media (max-width:620px){
  .sky-cloud.cloud-mid{display:none}
  .sky-cloud{opacity:.32}
}

/* The index had a reserved 18px separator for the cloud sheet. Keep the rule
   thin and let one small cloud bridge the sunset transition unobtrusively. */
.multi-divider.cloud-divider::before{
  content:"";
  position:absolute;
  z-index:2;
  left:24%;
  top:50%;
  width:clamp(82px,9vw,138px);
  height:clamp(34px,4vw,58px);
  transform:translate(-50%,-50%);
  background:url(generated/cloud-5.png) center/contain no-repeat;
  image-rendering:pixelated;
  opacity:.34;
}