.scene{
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;

  /* Time Machine-ish cool tint + deep-space vignette */
  background:
    radial-gradient(1200px 900px at 50% 38%, rgba(70,160,255,.16), rgba(2,4,11,0) 56%),
    radial-gradient(900px 700px at 55% 45%, rgba(30,90,190,.14), rgba(2,4,11,0) 62%),
    radial-gradient(1200px 1000px at 50% 55%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.92) 100%),
    linear-gradient(#02040b, #01020a);
}

/* Starfield: zooming layers towards the viewer.
   Desync across layers reduces perceived looping.
*/
.stars{
  position: absolute;
  inset: 0;
  pointer-events: none;

  --tex: var(--stars-a);
  --dur: 10s;
  --opacity: .6;
  --delay-mul: -0.5;

  opacity: var(--opacity);
  filter: drop-shadow(0 0 2px rgba(110,180,255,.16));
}
.stars::before,
.stars::after{
  content: "";
  position: absolute;
  inset: -70%;
  background-image: var(--tex);
  background-size: 1024px 1024px;
  background-repeat: repeat;
  transform-origin: 50% 50%;
  animation: warp var(--dur) linear infinite;
  will-change: transform, opacity;
}
.stars::after{
  animation-delay: calc(var(--dur) * var(--delay-mul));
}

/* Constant-speed, 25% faster than a classic 18/12/7.5 baseline */
.stars.far   { --tex: var(--stars-a); --dur: 13.5s;  --opacity: .34; --delay-mul: -0.52; }
.stars.far2  { --tex: var(--stars-b); --dur: 14.7s;  --opacity: .24; --delay-mul: -0.37; }
.stars.mid   { --tex: var(--stars-b); --dur: 9s;     --opacity: .50; --delay-mul: -0.48; }
.stars.mid2  { --tex: var(--stars-a); --dur: 10.1s;  --opacity: .32; --delay-mul: -0.33; }
.stars.near  { --tex: var(--stars-a); --dur: 5.625s; --opacity: .72; --delay-mul: -0.51;
               filter: drop-shadow(0 0 3px rgba(110,180,255,.22)); }

.galaxy-glow{
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(520px 380px at 50% 38%, rgba(210,240,255,.30) 0%, rgba(120,180,255,.18) 32%, rgba(10,20,40,0) 70%);
  mix-blend-mode: screen;
  opacity: .22;
  filter: blur(6px);
}

@keyframes warp{
  0%   { transform: translate3d(0,0,0) scale(0.35) rotate(0deg);  opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { transform: translate3d(0,0,0) scale(3.25) rotate(12deg); opacity: 0; }
}

/* Subtle haze drift (constant speed) */
.nebula{
  position: absolute;
  inset: -22%;
  pointer-events: none;
  background:
    radial-gradient(700px 520px at 36% 55%, rgba(110,190,255,.09), rgba(0,0,0,0) 60%),
    radial-gradient(600px 500px at 64% 40%, rgba(70,140,255,.07), rgba(0,0,0,0) 62%),
    radial-gradient(900px 700px at 55% 70%, rgba(40,90,170,.09), rgba(0,0,0,0) 70%);
  filter: blur(18px);
  mix-blend-mode: screen;
  opacity: .45;
  transform-origin: 50% 50%;
  animation: nebula 90s linear infinite;
  will-change: transform;
}
@keyframes nebula{
  0%   { transform: translate3d(-1.2%, 0.7%, 0) scale(1.04) rotate(-2deg); }
  100% { transform: translate3d( 1.2%,-0.7%, 0) scale(1.04) rotate( 2deg); }
}

/* Tiny dust specks for extra depth */
.dust{
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 20% 25%, rgba(220,235,255,.22) 0 1px, rgba(0,0,0,0) 1px 6px),
    repeating-radial-gradient(circle at 70% 65%, rgba(180,210,255,.18) 0 1px, rgba(0,0,0,0) 1px 8px);
  background-size: 520px 520px, 760px 760px;
  mix-blend-mode: screen;
  opacity: .08;
  transform-origin: 50% 50%;
  animation: dust-drift 96s ease-in-out infinite;
  will-change: transform;
}
@keyframes dust-drift{
  0%   { transform: translate3d(-0.8%, 0.4%, 0) scale(1); }
  100% { transform: translate3d( 0.8%,-0.4%, 0) scale(1.04); }
}

/* Vignette + subtle scanline/grain */
.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(1200px 900px at 50% 45%, rgba(0,0,0,0) 38%, rgba(0,0,0,.35) 62%, rgba(0,0,0,.80) 100%),
    radial-gradient(900px 700px at 50% 45%, rgba(255,255,255,.03), rgba(0,0,0,0) 60%);
  mix-blend-mode: multiply;
}
.grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, rgba(0,0,0,0) 1px 4px);
  opacity: .12;
  mix-blend-mode: overlay;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .stars::before, .stars::after, .nebula, .dust { animation: none !important; }
}