/* Low opacity drifting cloud field. Three layers, each translating exactly one
   tile width per cycle, so every loop lands on the frame it started from. The
   layer durations are coprime, which means the combined pattern does not visibly
   repeat. Transform only, so it stays on the compositor. */
.cloudscape{position:fixed;inset:-6% 0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;
  transform:translate3d(0,var(--pxc,0px),0);will-change:transform}
.cloudscape>span{position:absolute;left:0;top:0;height:100%;width:200%;display:block;
  will-change:transform;backface-visibility:hidden}
.cloudscape .c1{
  background-image:
    radial-gradient(38% 46% at 12% 34%,rgba(255,255,255,.99),rgba(206,228,250,.55) 58%,transparent 74%),
    radial-gradient(30% 38% at 30% 62%,rgba(255,255,255,.97),rgba(199,224,248,.5) 60%,transparent 76%),
    radial-gradient(34% 40% at 44% 22%,rgba(255,255,255,.95),rgba(203,226,249,.5) 58%,transparent 74%);
  background-size:50% 100%;background-repeat:repeat-x;
  filter:blur(30px);opacity:.9;animation:cdrift 91s linear infinite}
.cloudscape .c2{
  background-image:
    radial-gradient(26% 34% at 18% 70%,rgba(255,255,255,.97),rgba(196,222,247,.5) 60%,transparent 76%),
    radial-gradient(32% 36% at 38% 30%,rgba(255,255,255,.95),rgba(190,218,246,.5) 58%,transparent 76%);
  background-size:50% 100%;background-repeat:repeat-x;
  filter:blur(40px);opacity:.75;animation:cdrift 137s linear infinite}
.cloudscape .c3{
  background-image:
    radial-gradient(22% 30% at 26% 46%,rgba(255,255,255,.85),transparent 74%),
    radial-gradient(28% 26% at 8% 18%,rgba(214,235,253,.8),transparent 74%);
  background-size:50% 100%;background-repeat:repeat-x;
  filter:blur(52px);opacity:.6;animation:cdrift 199s linear infinite}
@keyframes cdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
body[data-theme=dark] .cloudscape .c1{opacity:.13}
body[data-theme=dark] .cloudscape .c2{opacity:.1}
body[data-theme=dark] .cloudscape .c3{opacity:.08}
.hero,main,footer{position:relative;z-index:1}
.site-header{position:fixed;inset:0 0 auto;z-index:200}
@media (prefers-reduced-motion:reduce){.cloudscape>span{animation:none}}
@media (max-width:600px){.cloudscape .c3{display:none}}