/* Public deck sky treatment. Imported by deck listing/detail routes only. */
.public-deck-atmosphere {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background:
    radial-gradient(
      ellipse 38rem 24rem at 16% 0%,
      color-mix(in srgb, var(--color-mz-yellow) 20%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 36rem 26rem at 86% 10%,
      color-mix(in srgb, var(--color-aura-water) 18%, transparent),
      transparent 70%
    ),
    radial-gradient(
      ellipse 34rem 38rem at 50% 100%,
      color-mix(in srgb, var(--color-cosmic-ooze) 14%, transparent),
      transparent 72%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-midnight-deep) 94%, black 6%) 0%,
      var(--color-midnight-deep) 46%,
      color-mix(in srgb, var(--color-midnight) 52%, var(--color-midnight-deep)) 100%
    );
}

.public-deck-atmosphere::before,
.public-deck-atmosphere::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.public-deck-atmosphere::before {
  background-image:
    radial-gradient(circle at 5% 14%, rgba(244, 236, 216, 0.84) 0 1px, transparent 1.8px),
    radial-gradient(circle at 12% 39%, rgba(200, 210, 224, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 20% 23%, rgba(212, 255, 122, 0.56) 0 1px, transparent 2px),
    radial-gradient(circle at 43% 19%, rgba(200, 210, 224, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 16%, rgba(244, 236, 216, 0.82) 0 1.15px, transparent 2.25px),
    radial-gradient(circle at 79% 34%, rgba(244, 236, 216, 0.8) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 12%, rgba(212, 255, 122, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 96% 48%, rgba(244, 236, 216, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 8% 78%, rgba(55, 127, 192, 0.58) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 77%, rgba(244, 236, 216, 0.52) 0 1px, transparent 2px);
  background-repeat: no-repeat;
  filter: blur(0.2px) drop-shadow(0 0 5px rgba(244, 236, 216, 0.34));
  mix-blend-mode: screen;
  opacity: 0.5;
  animation: public-deck-star-twinkle 5.2s ease-in-out infinite;
}

.public-deck-atmosphere::after {
  inset: -34vh -48vw;
  background-image:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 42%,
      rgba(55, 127, 192, 0.08) 48%,
      rgba(244, 236, 216, 0.5) 50%,
      rgba(182, 255, 74, 0.08) 52%,
      transparent 59%,
      transparent 100%
    ),
    radial-gradient(ellipse 44rem 18rem at 12% 18%, rgba(55, 127, 192, 0.14), transparent 72%),
    radial-gradient(ellipse 38rem 16rem at 86% 26%, rgba(182, 255, 74, 0.12), transparent 74%),
    repeating-linear-gradient(
      90deg,
      rgba(251, 229, 1, 0.035) 0 1px,
      transparent 1px 4.5rem
    );
  background-position: center, 12% 18%, 86% 26%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 44rem 18rem, 38rem 16rem, 4.5rem 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translate3d(-46vw, -20vh, 0);
  will-change: transform, opacity;
  animation: public-deck-sky-drift 7s linear infinite;
}

.public-deck-atmosphere > * {
  position: relative;
  z-index: 1;
}

@keyframes public-deck-sky-drift {
  0%,
  70% {
    transform: translate3d(-46vw, -20vh, 0);
    opacity: 0;
  }
  74% {
    opacity: 0.18;
  }
  82% {
    transform: translate3d(0, 0, 0);
    opacity: 0.56;
  }
  90% {
    transform: translate3d(46vw, 20vh, 0);
    opacity: 0.18;
  }
  100% {
    transform: translate3d(46vw, 20vh, 0);
    opacity: 0;
  }
}

@keyframes public-deck-star-twinkle {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.82) drop-shadow(0 0 1px rgba(244, 236, 216, 0.1));
  }
  37% {
    opacity: 1;
    filter:
      brightness(2.25)
      drop-shadow(0 0 10px rgba(244, 236, 216, 0.68))
      drop-shadow(0 0 16px rgba(55, 127, 192, 0.22));
  }
  63% {
    opacity: 0.68;
    filter: brightness(1.26) drop-shadow(0 0 6px rgba(212, 255, 122, 0.36));
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-deck-atmosphere::before,
  .public-deck-atmosphere::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}