.immersive .home-screen .home-art.has-menu-atmosphere{
  overflow:hidden;
  isolation:isolate;
  filter:saturate(.82);
}

.menu-atmosphere,
.menu-atmosphere__night,
.menu-atmosphere__cloud,
.menu-atmosphere__water,
.menu-atmosphere__lights{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.menu-atmosphere{
  background-image:inherit;
  background-size:cover;
  background-position:inherit;
  transform-origin:75% 45%;
  animation:menu-camera-drift 32s ease-in-out infinite alternate;
  will-change:transform;
  --menu-night-opacity:0;
  --menu-night-glow:0;
  --menu-cloud-near-opacity:.20;
  --menu-cloud-far-opacity:.12;
  --menu-cloud-brightness:1;
  --menu-cloud-saturation:1;
  z-index:0;
  overflow:hidden;
}

.menu-atmosphere__night{
  z-index:1;
  opacity:var(--menu-night-opacity);
  background:
    radial-gradient(ellipse at 73% 18%,rgba(24,53,89,.16),rgba(4,12,30,.76) 58%,rgba(1,7,19,.93)),
    linear-gradient(180deg,rgba(9,25,61,.88),rgba(5,20,42,.68) 54%,rgba(3,12,24,.88));
  mix-blend-mode:multiply;
}

.menu-atmosphere__water{z-index:0;display:block}

.menu-atmosphere__night::after{
  content:'';
  position:absolute;
  inset:0;
  opacity:var(--menu-night-glow);
  background:radial-gradient(circle at 76% 5%,rgba(101,143,191,.52),transparent 32%);
  mix-blend-mode:screen;
}

.menu-atmosphere__cloud{
  z-index:2;
  inset:-5% -18% auto;
  width:136%;
  height:52%;
  background:url('./assets/menu-clouds.png') center/contain no-repeat;
  opacity:var(--menu-cloud-near-opacity);
  filter:brightness(var(--menu-cloud-brightness)) saturate(var(--menu-cloud-saturation));
  will-change:transform;
}

.menu-atmosphere__cloud--far{
  top:-16%;
  opacity:var(--menu-cloud-far-opacity);
  transform:translate3d(-6%,0,0) scale(.78);
  animation:menu-cloud-far 36s linear -14s infinite alternate;
}

.menu-atmosphere__cloud--near{
  top:0;
  transform:translate3d(4%,0,0) scale(1.02);
  animation:menu-cloud-near 24s linear -9s infinite alternate;
}

.menu-atmosphere__lights{
  z-index:3;
  display:block;
}

.menu-atmosphere.is-paused .menu-atmosphere__cloud,
.menu-atmosphere.is-paused{
  animation-play-state:paused;
}

@keyframes menu-cloud-far{
  from{transform:translate3d(-14%,0,0) scale(.90)}
  to{transform:translate3d(12%,1.5%,0) scale(.94)}
}

@keyframes menu-cloud-near{
  from{transform:translate3d(13%,0,0) scale(1.04)}
  to{transform:translate3d(-14%,1%,0) scale(1.08)}
}

@keyframes menu-camera-drift{
  from{transform:scale(1.025) translate3d(.4%,0,0)}
  to{transform:scale(1.065) translate3d(-.6%,-.4%,0)}
}

@media(max-width:760px){
  .menu-atmosphere__cloud{inset:-1% -36% auto;width:172%;height:48%}
  .menu-atmosphere__cloud--far{top:-13%}
  .menu-atmosphere__night{
    background:
      radial-gradient(ellipse at 66% 20%,rgba(24,53,89,.12),rgba(4,12,30,.72) 56%,rgba(1,7,19,.91)),
      linear-gradient(180deg,rgba(9,25,61,.84),rgba(3,13,29,.82));
  }
}

@media(prefers-reduced-motion:reduce){
  .menu-atmosphere{animation:none;transform:none;will-change:auto}
  .menu-atmosphere__cloud{
    animation:none;
    will-change:auto;
  }
  .menu-atmosphere__cloud--far{transform:translate3d(0,0,0) scale(.79)}
  .menu-atmosphere__cloud--near{transform:translate3d(0,0,0) scale(1.03)}
  .menu-atmosphere__night{transition:none}
}