/* Two seamless, pre-painted cloud banks. Motion changes transforms only. */
.atmosphere{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;contain:strict}
.cloud-bank{position:absolute;left:0;width:200%;height:clamp(260px,48vh,530px);background:url('/assets/cloud-bank.svg') 0 0/50% 100% repeat-x;pointer-events:none;will-change:transform;animation:cloud-drift 132s linear infinite;animation-delay:var(--cloud-far-offset,-47s);opacity:.16}
.cloud-bank-far{top:3%;transform:translate3d(0,0,0)}
.cloud-bank-near{top:32%;height:clamp(230px,42vh,460px);opacity:.11;animation-duration:96s;animation-delay:var(--cloud-near-offset,-63s);animation-direction:reverse}
@keyframes cloud-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.motion-off .cloud-bank,.page-sleeping .cloud-bank{animation-play-state:paused;will-change:auto}
.motion-constrained .cloud-bank-near{display:none}
.page-sleeping *,.page-sleeping *::before,.page-sleeping *::after{animation-play-state:paused!important}
@media(max-width:600px){.cloud-bank{height:320px;opacity:.14;top:5%}.cloud-bank-near{display:none}}
@media(prefers-reduced-motion:reduce){.cloud-bank{animation:none!important;transform:translate3d(-18%,0,0);will-change:auto}.cloud-bank-near{transform:translate3d(-36%,0,0)}}