/* ============ SCENE ============ */
.scene {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, var(--bg-2) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
}

/* Star field */
.stars, .stars::before, .stars::after {
  position: absolute; inset: -20%;
  background-repeat: repeat;
  pointer-events: none;
}
.stars {
  background-image:
    radial-gradient(1px 1px at 13% 22%, #ffffff 50%, transparent 100%),
    radial-gradient(1px 1px at 28% 71%, #d8e4ff 50%, transparent 100%),
    radial-gradient(2px 2px at 47% 14%, #ffffff 50%, transparent 100%),
    radial-gradient(1px 1px at 62% 88%, #cfe1ff 50%, transparent 100%),
    radial-gradient(1px 1px at 79% 41%, #ffffff 50%, transparent 100%),
    radial-gradient(2px 2px at 91% 67%, #ffefc4 50%, transparent 100%),
    radial-gradient(1px 1px at 8% 55%, #ffffff 50%, transparent 100%),
    radial-gradient(1px 1px at 35% 33%, #b3d4ff 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, #ffffff 50%, transparent 100%),
    radial-gradient(1px 1px at 70% 12%, #ffdada 50%, transparent 100%);
  background-size: 600px 600px;
  opacity: 0.55;
  animation: starsDrift 120s linear infinite;
}
@keyframes starsDrift {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-600px,-600px,0); }
}

/* Subtle aurora */
.aurora {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(78, 205, 255, 0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(255, 78, 205, 0.10), transparent 60%);
  filter: blur(20px);
  animation: auroraSlow 22s ease-in-out infinite alternate;
}
@keyframes auroraSlow {
  0%   { transform: translate(0,0) scale(1); opacity: 0.6; }
  100% { transform: translate(40px,-30px) scale(1.1); opacity: 0.9; }
}

/* Cosmic overlay (Infinite Rare mode) */
.cosmic {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 40%, rgba(255, 78, 205, 0.45), transparent 60%),
    radial-gradient(ellipse 60% 50% at 70% 60%, rgba(78, 205, 255, 0.45), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 80%, rgba(255, 225, 78, 0.35), transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(78, 255, 139, 0.30), transparent 60%);
  mix-blend-mode: screen;
  filter: blur(40px);
  transition: opacity 1s ease;
}
body.cosmic-mode .cosmic { opacity: 1; animation: cosmicSwirl 10s ease-in-out infinite alternate; }
@keyframes cosmicSwirl {
  0%   { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.15) rotate(8deg); }
}

/* Vignette */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 200px 40px rgba(0,0,0,0.65);
}