/* 2D atmosphere: textured plates, vector ornaments and shared artwork grounding. */
.hero {
  --hero-background: radial-gradient(ellipse at 52% 31%, #303341, #181b27 47%, #10121b 85%);
}
.hero::before {
  background:
    linear-gradient(90deg, #11131b99, transparent 32% 69%, #11131b99),
    linear-gradient(0deg, #14161f, #14161f66 24%, transparent 48% 80%, #14161f55),
    url("assets/atmosphere/studio.webp") center 40% / cover no-repeat,
    var(--hero-background);
}
.art-stage {
  --ground: 92%;
  --scene-tint: 156 157 206;
  --moon-color: #edbaa9;
  isolation: isolate;
}
.art-stage[data-character="frost"] {
  --scene-tint: 135 182 213;
}
.art-stage[data-character="companion"] {
  --scene-tint: 171 159 190;
}
.scene-halo,
.scene-orbits,
.scene-moon,
.scene-particles,
.scene-floor {
  position: absolute;
  pointer-events: none;
}
.scene-halo {
  inset: -12% -28% 0;
  z-index: -3;
  background: radial-gradient(ellipse at 50% 35%, rgb(var(--scene-tint) / 0.14), transparent 64%);
  /* Fade the layer at its bounds so its rectangular top never forms a band. */
  mask-image: linear-gradient(to bottom, transparent, #000 20% 80%, transparent);
}
.scene-orbits {
  /* A uniformly scaled reference frame, positioned by alignGround(). */
  left: var(--orbit-left, 0px);
  top: var(--orbit-top, 0px);
  width: var(--orbit-width, 0px);
  height: var(--orbit-height, 0px);
  z-index: -2;
}
.scene-orbits svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.scene-orbits circle {
  vector-effect: non-scaling-stroke;
  stroke-width: 0.8px;
  animation: orbit-breathe 24s ease-in-out infinite alternate;
}
.scene-orbits circle:nth-of-type(2) {
  animation-delay: -12s;
}
.scene-moon {
  width: clamp(20px, 2.4vw, 34px);
  right: 3%;
  top: 54%;
  z-index: -1;
  color: var(--moon-color);
  filter: drop-shadow(0 0 8px rgb(236 177 172 / 0.4));
  transform: rotate(-14deg);
}
.scene-moon svg {
  display: block;
  width: 100%;
}
.scene-particles {
  inset: -9% -17% 4%;
  z-index: -1;
}
.scene-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  opacity: var(--alpha);
  animation: dust-drift var(--duration) ease-in-out var(--delay) infinite alternate;
}
.scene-dust {
  border-radius: 50%;
  background: #d3c0ef;
  box-shadow: 0 0 4px #b8a6dc55;
}
.scene-sparkle {
  background: #f4c6e8;
  clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 63%, 50% 100%, 37% 63%, 0 50%, 37% 36%);
}
.scene-particles i.scene-sparkle {
  animation-name: sparkle-pulse;
}
.scene-floor {
  left: -48%;
  right: -48%;
  top: calc(var(--ground) - 90px);
  height: 200px;
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 44%, rgb(var(--scene-tint) / 0.12), transparent 57%),
    url("assets/atmosphere/studio.webp") center bottom / 100% auto no-repeat;
  mask-image: radial-gradient(ellipse at 50% 48%, #000 5%, #0009 35%, transparent 70%);
  opacity: 0.38;
}
#art {
  z-index: 1;
}
.scene-paused .scene-orbits circle,
.scene-paused .scene-particles i,
.scene-hidden .scene-orbits circle,
.scene-hidden .scene-particles i {
  animation-play-state: paused !important;
}
@keyframes dust-drift {
  from {
    transform: translateY(0);
    opacity: var(--alpha);
  }
  to {
    transform: translate(4px, -12px);
    opacity: 0.18;
  }
}
@keyframes sparkle-pulse {
  0%,
  100% {
    opacity: var(--alpha);
    transform: scale(0.8);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.12);
  }
}
@keyframes orbit-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 760px) {
  .hero::before {
    background: var(--hero-background);
  }
  .scene-halo {
    background:
      radial-gradient(ellipse, transparent 20%, #14161f 73%),
      url("assets/atmosphere/studio.webp") center / cover;
    inset: -5% -5% -12%;
  }
  .scene-particles {
    inset: 0;
  }
  .scene-particles i:nth-child(2n) {
    display: none;
  }
  .scene-moon {
    right: 9%;
    top: 51%;
    width: 23px;
  }
  .scene-floor {
    left: -5%;
    right: -5%;
    height: 125px;
    top: calc(var(--ground) - 55px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .art-stage *,
  .art-stage *::before,
  .art-stage *::after {
    animation: none !important;
    transition: none !important;
  }
}