/*
 * Langris: atmospheric adaptation of the user's licensed Animmaster pack.
 * Source: Background Animations / 7 / code.zip / files/script.js (Galaxy).
 * Drive file: 1-Q-bmKdq81kcNwmvDQ7X1wKD8RTK_s5i
 * The source's two monochrome star layers and restrained twinkle are translated
 * to CSS. No pack shader, external font, or library is distributed here.
 * Commercial use/modification permitted by the supplied pack license;
 * do not redistribute this as a component pack, source library, or template.
 */

.exp-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: paint;
}

.exp-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 77% 30%, rgb(190 139 83 / 9%), transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgb(80 110 116 / 6%), transparent 48%);
}

.exp-atmosphere__field {
  position: absolute;
  inset: -4%;
  display: block;
  background-repeat: repeat;
  animation: exp-atmosphere-drift 38s ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: 70% 38%;
}

.exp-atmosphere__field--far {
  opacity: .33;
  background-image:
    radial-gradient(circle at 7% 16%, rgb(241 236 222 / 70%) .65px, transparent 1.2px),
    radial-gradient(circle at 18% 64%, rgb(241 236 222 / 60%) .6px, transparent 1.1px),
    radial-gradient(circle at 32% 31%, rgb(241 236 222 / 80%) .7px, transparent 1.3px),
    radial-gradient(circle at 46% 84%, rgb(241 236 222 / 65%) .6px, transparent 1.2px),
    radial-gradient(circle at 61% 13%, rgb(241 236 222 / 75%) .7px, transparent 1.3px),
    radial-gradient(circle at 74% 56%, rgb(241 236 222 / 70%) .6px, transparent 1.2px),
    radial-gradient(circle at 88% 26%, rgb(241 236 222 / 80%) .7px, transparent 1.3px),
    radial-gradient(circle at 95% 90%, rgb(241 236 222 / 60%) .6px, transparent 1.1px);
  background-size: 347px 281px;
}

.exp-atmosphere__field--near {
  opacity: .45;
  background-image:
    radial-gradient(circle at 12% 42%, rgb(250 246 233 / 80%) .8px, transparent 1.5px),
    radial-gradient(circle at 36% 12%, rgb(250 246 233 / 75%) .8px, transparent 1.4px),
    radial-gradient(circle at 56% 69%, rgb(250 246 233 / 85%) .9px, transparent 1.6px),
    radial-gradient(circle at 79% 34%, rgb(250 246 233 / 75%) .8px, transparent 1.5px),
    radial-gradient(circle at 93% 82%, rgb(250 246 233 / 70%) .8px, transparent 1.4px);
  background-size: 479px 367px;
  animation-name: exp-atmosphere-drift, exp-atmosphere-twinkle;
  animation-duration: 47s, 11s;
  animation-delay: -9s, -3s;
  animation-direction: alternate-reverse, alternate;
}

/* The lifecycle controller opts in only while this surface is visible. */
.exp-atmosphere.exp-motion-active .exp-atmosphere__field {
  animation-play-state: running;
}

@keyframes exp-atmosphere-drift {
  from { transform: translate3d(-.5%, 0, 0) rotate(-.3deg); }
  to { transform: translate3d(.7%, -.8%, 0) rotate(.3deg); }
}

@keyframes exp-atmosphere-twinkle {
  from { opacity: .39; }
  to { opacity: .45; }
}

@media (max-width: 700px) {
  .exp-atmosphere__field--far { display: none; }
  .exp-atmosphere__field--near { opacity: .3; animation-name: exp-atmosphere-drift; }
  .exp-atmosphere::before { opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-atmosphere__field,
  .exp-atmosphere.exp-motion-active .exp-atmosphere__field {
    animation: none;
    transform: none;
  }
}

@media print, (forced-colors: active) {
  .exp-atmosphere { display: none; }
}