html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 22%, rgba(96, 179, 255, 0.16), transparent 0 18%),
    radial-gradient(circle at 78% 14%, rgba(157, 78, 221, 0.18), transparent 0 20%),
    radial-gradient(circle at 32% 78%, rgba(94, 234, 212, 0.14), transparent 0 18%),
    radial-gradient(circle at 82% 76%, rgba(255, 255, 255, 0.08), transparent 0 12%),
    linear-gradient(180deg, #030712 0%, #08111f 48%, #050816 100%);
  color: #fff;
}

body {
  position: relative;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: -1;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

body::before {
  opacity: 0.95;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 120px 80px, rgba(186,230,253,0.95), transparent 60%),
    radial-gradient(2px 2px at 220px 160px, rgba(255,255,255,0.90), transparent 60%),
    radial-gradient(1.5px 1.5px at 80px 220px, rgba(167,243,208,0.90), transparent 60%),
    radial-gradient(2px 2px at 280px 60px, rgba(221,214,254,0.95), transparent 60%),
    radial-gradient(1.5px 1.5px at 340px 260px, rgba(255,255,255,0.88), transparent 60%);
  background-size: 320px 320px, 430px 430px, 540px 540px, 650px 650px, 760px 760px, 880px 880px;
  animation:
    rikoStarDriftA 95s linear infinite,
    rikoStarPulse 18s ease-in-out infinite alternate;
}

body::after {
  opacity: 0.52;
  filter: blur(0.8px);
  background-image:
    radial-gradient(2px 2px at 40px 120px, rgba(255,255,255,0.80), transparent 60%),
    radial-gradient(1.5px 1.5px at 160px 40px, rgba(191,219,254,0.85), transparent 60%),
    radial-gradient(2px 2px at 260px 200px, rgba(255,255,255,0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 360px 100px, rgba(196,181,253,0.80), transparent 60%),
    radial-gradient(2px 2px at 440px 260px, rgba(255,255,255,0.70), transparent 60%);
  background-size: 390px 390px, 520px 520px, 700px 700px, 840px 840px, 980px 980px;
  animation:
    rikoStarDriftB 140s linear infinite,
    rikoStarPulse 24s ease-in-out infinite alternate-reverse;
}

@keyframes rikoStarDriftA {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  18%  { transform: translate3d(-1.8%, 1.2%, 0) scale(1.01); }
  36%  { transform: translate3d(1.1%, 2.8%, 0) scale(1.02); }
  54%  { transform: translate3d(2.3%, -1.7%, 0) scale(1.015); }
  72%  { transform: translate3d(-2.2%, -2.4%, 0) scale(1.01); }
  100% { transform: translate3d(0%, 0%, 0) scale(1); }
}

@keyframes rikoStarDriftB {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  20%  { transform: translate3d(2.0%, -1.2%, 0) scale(1.015); }
  40%  { transform: translate3d(-1.4%, -2.8%, 0) scale(1.01); }
  60%  { transform: translate3d(-2.6%, 1.8%, 0) scale(1.02); }
  80%  { transform: translate3d(1.5%, 2.2%, 0) scale(1.01); }
  100% { transform: translate3d(0%, 0%, 0) scale(1); }
}

@keyframes rikoStarPulse {
  0%   { opacity: 0.45; }
  25%  { opacity: 0.62; }
  50%  { opacity: 0.88; }
  75%  { opacity: 0.58; }
  100% { opacity: 0.78; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}


/* RIKO: visible, slowly wandering stars */
body::before,
body::after {
  z-index: 100 !important;
  pointer-events: none !important;
}

body::before {
  animation:
    rikoVisibleStarsA 28s ease-in-out infinite,
    rikoStarPulse 8s ease-in-out infinite alternate !important;
}

body::after {
  animation:
    rikoVisibleStarsB 37s ease-in-out infinite,
    rikoStarPulse 11s ease-in-out infinite alternate-reverse !important;
}

@keyframes rikoVisibleStarsA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-5vw, 3vh, 0); }
  43% { transform: translate3d(4vw, -4vh, 0); }
  68% { transform: translate3d(7vw, 5vh, 0); }
  84% { transform: translate3d(-3vw, -5vh, 0); }
}

@keyframes rikoVisibleStarsB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  18% { transform: translate3d(5vw, -4vh, 0); }
  39% { transform: translate3d(-6vw, 3vh, 0); }
  63% { transform: translate3d(3vw, 6vh, 0); }
  83% { transform: translate3d(-4vw, -3vh, 0); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}


/* RIKO REDTAIL OVERRIDE */
body::before,
body::after {
  z-index: 100 !important;
  pointer-events: none !important;
  opacity: 0.96 !important;
}

body::before {
  background-image:
    radial-gradient(3.2px 3.2px at 24px 36px, rgba(255,255,255,0.98), transparent 62%),
    radial-gradient(2.8px 2.8px at 118px 84px, rgba(186,230,253,0.98), transparent 62%),
    radial-gradient(3.4px 3.4px at 214px 154px, rgba(255,255,255,0.96), transparent 62%),
    radial-gradient(2.8px 2.8px at 88px 228px, rgba(167,243,208,0.95), transparent 62%),
    radial-gradient(3.2px 3.2px at 282px 64px, rgba(221,214,254,0.98), transparent 62%),
    radial-gradient(2.8px 2.8px at 338px 258px, rgba(255,255,255,0.92), transparent 62%);
  background-size: 320px 320px, 430px 430px, 540px 540px, 650px 650px, 760px 760px, 880px 880px;
  filter:
    drop-shadow(-1px 0 1px rgba(255,70,70,0.26))
    drop-shadow(-3px 0 3px rgba(255,45,45,0.18))
    drop-shadow(0 0 2px rgba(255,255,255,0.08));
  animation:
    rikoRedTailDriftA 26s ease-in-out infinite,
    rikoRedTailBlinkA 7.5s ease-in-out infinite alternate !important;
}

body::after {
  background-image:
    radial-gradient(2.8px 2.8px at 42px 122px, rgba(255,255,255,0.88), transparent 62%),
    radial-gradient(2.5px 2.5px at 164px 38px, rgba(191,219,254,0.90), transparent 62%),
    radial-gradient(3.0px 3.0px at 262px 204px, rgba(255,255,255,0.84), transparent 62%),
    radial-gradient(2.5px 2.5px at 358px 102px, rgba(196,181,253,0.88), transparent 62%),
    radial-gradient(3.0px 3.0px at 438px 262px, rgba(255,255,255,0.82), transparent 62%);
  background-size: 390px 390px, 520px 520px, 700px 700px, 840px 840px, 980px 980px;
  filter:
    drop-shadow(-1px 0 1px rgba(255,60,60,0.22))
    drop-shadow(-2px 0 3px rgba(255,40,40,0.14));
  animation:
    rikoRedTailDriftB 34s ease-in-out infinite,
    rikoRedTailBlinkB 9.5s ease-in-out infinite alternate !important;
}

@keyframes rikoRedTailDriftA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(-4vw, 2.5vh, 0); }
  46% { transform: translate3d(3.5vw, -3.5vh, 0); }
  70% { transform: translate3d(5vw, 4vh, 0); }
  86% { transform: translate3d(-2.5vw, -4vh, 0); }
}

@keyframes rikoRedTailDriftB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(4vw, -3vh, 0); }
  42% { transform: translate3d(-5vw, 2.5vh, 0); }
  66% { transform: translate3d(2.5vw, 5vh, 0); }
  84% { transform: translate3d(-3vw, -2.5vh, 0); }
}

@keyframes rikoRedTailBlinkA {
  0%   { opacity: 0.52; }
  20%  { opacity: 0.68; }
  45%  { opacity: 0.92; }
  70%  { opacity: 0.62; }
  100% { opacity: 0.86; }
}

@keyframes rikoRedTailBlinkB {
  0%   { opacity: 0.36; }
  25%  { opacity: 0.58; }
  55%  { opacity: 0.82; }
  78%  { opacity: 0.50; }
  100% { opacity: 0.74; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after {
    animation: none !important;
  }
}