/* Static atmosphere behind the homepage only. No layout, interaction or motion. */
#home-view {
  --atmos-blue: .28;
  --atmos-gold: .085;
  --atmos-dust: .38;
  position: relative;
  isolation: isolate;
}

#home-view::before,
#home-view::after {
  content: "";
  position: absolute;
  inset: -24px 0 auto;
  pointer-events: none;
  user-select: none;
}

#home-view::before {
  z-index: -2;
  height: 1100px;
  background:
    radial-gradient(ellipse 52% 44% at 18% 12%, rgb(57 100 166 / var(--atmos-blue)), transparent 78%),
    radial-gradient(ellipse 38% 35% at 92% 8%, rgb(190 151 80 / var(--atmos-gold)), transparent 80%);
  mask-image: linear-gradient(transparent 0%, #000 7%, #000 34%, transparent 100%);
}

#home-view::after {
  z-index: -1;
  height: 1000px;
  background-image: url('./assets/atmosphere/dust.svg'), url('./assets/atmosphere/grain.svg');
  background-size: 1440px 900px, 128px 128px;
  background-position: center top;
  background-repeat: no-repeat, repeat;
  opacity: var(--atmos-dust);
  mask-image: linear-gradient(transparent 0%, #000 7%, #000 24%, transparent 93%);
}

@media (max-width: 600px) {
  #home-view::before,
  #home-view::after {
    top: -16px;
  }
  #home-view::before {
    height: 850px;
    background:
      radial-gradient(ellipse 110% 44% at 0% 14%, rgb(57 100 166 / var(--atmos-blue)), transparent 80%),
      radial-gradient(ellipse 90% 32% at 100% 5%, rgb(190 151 80 / var(--atmos-gold)), transparent 80%);
  }
  #home-view::after {
    height: 800px;
    background-size: 900px 600px, 128px 128px;
  }
}