/* One soft atmosphere for the site and the viewer's existing color clouds.
   The viewer continues to supply its memory palette and state-dependent opacity. */
:is(#site-atmosphere, #app .ambient-plasma, #orb-atmosphere-handoff .ambient-plasma) {
  pointer-events:none; overflow:hidden; contain:strict;
  mask-image:linear-gradient(90deg,#000,#0000 40% 60%,#000);
}
:is(#site-atmosphere, #app .ambient-plasma, #orb-atmosphere-handoff .ambient-plasma) .plasma-cloud {
  position:absolute; display:block; border-radius:50%;
  filter:blur(64px); transform-origin:45% 60%;
  animation:ambient-drift 36s ease-in-out infinite alternate;
}
:is(#site-atmosphere, #app .ambient-plasma, #orb-atmosphere-handoff .ambient-plasma) .plasma-cloud-a {
  left:-35%; top:-22%; width:95%; height:140%;
  background:radial-gradient(ellipse at 42% 48%,rgb(var(--plasma-primary,108 16 27) / .65),rgb(var(--plasma-secondary,72 6 16) / .35) 35%,transparent 70%);
}
:is(#site-atmosphere, #app .ambient-plasma, #orb-atmosphere-handoff .ambient-plasma) .plasma-cloud-b {
  left:-28%; bottom:-65%; width:105%; height:130%;
  background:radial-gradient(ellipse at 45% 45%,rgb(var(--plasma-accent,181 43 52) / .36),transparent 66%);
  animation-duration:43s; animation-delay:-17s;
}
:is(#site-atmosphere, #app .ambient-plasma, #orb-atmosphere-handoff .ambient-plasma) .plasma-cloud-c {
  right:-40%; top:-35%; width:95%; height:145%;
  background:radial-gradient(ellipse at 52% 48%,rgb(var(--plasma-secondary,88 12 26) / .55),transparent 68%);
  animation-duration:49s; animation-delay:-29s;
}
#site-atmosphere {
  position:fixed; inset:0; z-index:0; opacity:0; visibility:hidden;
  transition:opacity 1.4s ease,visibility 0s 1.4s;
}
#world { z-index:1; }
body:is([data-view=home],[data-view=profile]) #site-atmosphere {
  opacity:.55; visibility:visible; transition-delay:0s;
}
body:is(.menu-open,.join-open) #site-atmosphere { opacity:0; transition-duration:.6s; }
body:is(.menu-open,.join-open) #site-atmosphere .plasma-cloud { animation-play-state:paused; }
#app:is([data-hidden=true],[data-state=LOADING]) .ambient-plasma .plasma-cloud { animation-play-state:paused; }
/* Keep the glow present throughout opening; the viewer's palette still changes. */
#app[data-entry=share] .ambient-plasma { opacity:.18; }
#app[data-entry=share]:is([data-state=SHARE],[data-state=EXIT]) .ambient-plasma,
#app[data-entry=share][data-state=INTRO]:not([data-formed=true]) .ambient-plasma { opacity:.55; }
/* A frozen copy of the departing clouds survives the document navigation. */
#orb-atmosphere-handoff { position:fixed; inset:0; z-index:18; pointer-events:none; background:#030303; }
#orb-atmosphere-handoff .ambient-plasma { position:absolute; inset:0; }
#orb-atmosphere-handoff .ambient-plasma .plasma-cloud { animation:none; }
.orb-arriving #app[data-entry=share] .ambient-plasma { opacity:0; transition:none; }
@keyframes ambient-drift {
  from { transform:translate(-2%,-3%) rotate(-7deg) scale(.96,1.04); }
  to { transform:translate(4%,5%) rotate(8deg) scale(1.08,.97); }
}
@media (prefers-reduced-motion:reduce) {
  :is(#site-atmosphere, #app .ambient-plasma) .plasma-cloud { animation:none; }
  #site-atmosphere { transition:none; }
}

/* One shared flow renderer; original clouds remain available on WebGL failure. */
.shared-flow-atmosphere { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.shared-flow-atmosphere[hidden] { display:none; }
#site-flow-atmosphere { position:fixed; z-index:0; }
.viewer-flow-atmosphere { mix-blend-mode:screen; }
.flow-ready .plasma-cloud { visibility:hidden; animation-play-state:paused; }
#app[data-hidden=true] .viewer-flow-atmosphere,
#app[data-effects=minimal] .viewer-flow-atmosphere { display:none; }
/* Match the existing site's fade without filtering or scaling its final dither. */
#site-flow-atmosphere { opacity:0; transition:opacity 1.4s ease; }
body:is([data-view=home],[data-view=profile]) #site-flow-atmosphere { opacity:1; }
body:is(.menu-open,.join-open) #site-flow-atmosphere { opacity:0; transition-duration:.6s; }
@media (prefers-reduced-motion:reduce) { #site-flow-atmosphere { transition:none; } }