/* Parallax lives on the outer plane; the inner cloud keeps its own drift. */
.stage,.matcha-playstage { isolation:isolate; }
.cloud-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-2; contain:layout style paint; }
.cloud-plane { position:absolute; display:block; width:clamp(260px,48vw,820px); aspect-ratio:600/210; opacity:.38; transform:translate3d(var(--cloud-parallax-x,0px),var(--cloud-parallax-y,0px),0); }
.clouds-visible .cloud-plane { will-change:transform; }
.cloud { position:absolute; display:block; inset:0; width:100%; height:100%; transform:translate3d(0,0,0); animation:cloud-drift var(--cloud-duration,36s) ease-in-out infinite alternate; animation-delay:var(--cloud-delay,0s); animation-play-state:paused; }
.cloud svg { display:block; width:100%; height:100%; overflow:visible; }
.clouds-visible .cloud { animation-play-state:running; }
.cloud-plane-one { left:-15%; top:8%; opacity:.42; }
.cloud-plane-two { right:-16%; top:44%; width:clamp(290px,55vw,900px); opacity:.34; }
.cloud-plane-three { left:12%; bottom:5%; width:clamp(260px,44vw,740px); opacity:.28; }
.cloud-one { --cloud-x:92px; --cloud-y:-16px; --cloud-duration:32s; --cloud-delay:-17s; }
.cloud-two { --cloud-x:-82px; --cloud-y:19px; --cloud-duration:41s; --cloud-delay:-26s; }
.cloud-three { --cloud-x:68px; --cloud-y:-14px; --cloud-duration:35s; --cloud-delay:-9s; }
.sequence-stage > .cloud-layer .cloud-plane-one { top:9%; left:-20%; width:clamp(310px,57vw,900px); }
.sequence-stage > .cloud-layer .cloud-plane-two { top:42%; right:-20%; }
.sequence-stage > .cloud-layer .cloud-plane-three { left:10%; bottom:4%; }
.matcha-playstage > .cloud-layer .cloud-plane { width:82%; opacity:.3; }
.matcha-playstage > .cloud-layer .cloud-plane-one { top:2%; left:-30%; }
.matcha-playstage > .cloud-layer .cloud-plane-two { top:auto; bottom:4%; right:-30%; }
.matcha-playstage > .cloud-layer .cloud-plane-three { display:none; }
.motion-paused .cloud,.clouds-hidden .cloud { animation-play-state:paused!important; }
.motion-paused .cloud-plane,.clouds-hidden .cloud-plane { will-change:auto; }
@keyframes cloud-drift { from { transform:translate3d(0,0,0); } to { transform:translate3d(var(--cloud-x,50px),var(--cloud-y,-10px),0); } }
@media (max-width:767px) {
  .cloud-plane { width:78%; min-width:250px; opacity:.42; }
  .cloud-plane-one { top:13%; left:-27%; }
  .cloud-plane-two { width:92%; top:43%; right:-36%; opacity:.33; }
  .cloud-plane-three { display:none; }
  .cloud-one { --cloud-x:44px; --cloud-y:-8px; }
  .cloud-two { --cloud-x:-40px; --cloud-y:11px; }
  .sequence-stage > .cloud-layer .cloud-plane-one { width:98%; min-width:290px; left:-36%; top:14%; }
  .sequence-stage > .cloud-layer .cloud-plane-two { top:47%; right:-35%; }
}
@media (prefers-reduced-motion:reduce) {
  .cloud { animation-play-state:paused!important; }
  .cloud-plane { will-change:auto!important; }
}