/* Neural Hustle global atmosphere
   One fixed, decorative layer shared by the complete page. */
html {
  background: #05060a;
}

html.light {
  background: #f3f7fc;
}

body {
  background: transparent !important;
}

#neural-atmosphere {
  --atmosphere-x: 0px;
  --atmosphere-y: 0px;
  position: fixed;
  inset: -14px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translate3d(var(--atmosphere-x), var(--atmosphere-y), 0) scale(1.015);
  transform-origin: center;
  background: #05060a;
  transition: opacity 220ms ease;
  contain: strict;
}

#neural-atmosphere::before,
#neural-atmosphere::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dark-mode A/B preview: remove all teal/purple haze entirely so the
   star field is judged against a neutral near-black background. */
#neural-atmosphere::before {
  z-index: 0;
  background: none;
  filter: none;
}

/* Neutral fallback dust only; no colored haze or colored fallback specks. */
#neural-atmosphere::after {
  z-index: 0;
  opacity: 0.17;
  background-image:
    radial-gradient(circle, rgba(230, 238, 246, 0.34) 0 0.68px, transparent 0.95px),
    radial-gradient(circle, rgba(186, 199, 212, 0.22) 0 0.58px, transparent 0.84px),
    radial-gradient(circle, rgba(144, 157, 170, 0.18) 0 0.56px, transparent 0.82px);
  background-size: 193px 173px, 271px 239px, 337px 307px;
  background-position: 23px 41px, 111px 79px, 193px 131px;
}

#neural-atmosphere[data-motion='animated']::after {
  opacity: 0.07;
}

#neural-atmosphere > canvas {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}

#hero-vanta,
main,
.footer {
  position: relative;
  z-index: 1;
}

#hero-vanta {
  background: transparent !important;
}

/* No hero hue either: only a neutral translucent dark surface over the stars. */
.hero {
  background: rgba(5, 6, 10, 0.34) !important;
}

/* Light mode intentionally remains identical to the published version in this
   preview so the comparison only tests removal of dark-mode hue. */
html.light #neural-atmosphere {
  background:
    radial-gradient(ellipse 68% 58% at 16% 6%, rgba(121, 104, 201, 0.105), transparent 74%),
    radial-gradient(ellipse 62% 52% at 84% 8%, rgba(31, 146, 145, 0.09), transparent 76%),
    radial-gradient(ellipse 58% 46% at 52% 84%, rgba(109, 136, 166, 0.075), transparent 78%),
    #f3f7fc;
}

html.light #neural-atmosphere::before {
  background:
    radial-gradient(circle at 18% 26%, rgba(50, 151, 147, 0.055), transparent 22%),
    radial-gradient(circle at 77% 38%, rgba(116, 94, 188, 0.055), transparent 24%),
    radial-gradient(circle at 48% 76%, rgba(98, 132, 162, 0.05), transparent 26%);
  filter: blur(30px);
}

html.light #neural-atmosphere::after {
  opacity: 0.15;
  background-image:
    radial-gradient(circle, rgba(57, 79, 103, 0.36) 0 0.62px, transparent 0.9px),
    radial-gradient(circle, rgba(24, 117, 117, 0.27) 0 0.56px, transparent 0.82px),
    radial-gradient(circle, rgba(100, 82, 151, 0.25) 0 0.56px, transparent 0.82px);
}

html.light #neural-atmosphere[data-motion='animated']::after {
  opacity: 0.085;
}

html.light .hero {
  background: linear-gradient(135deg, rgba(247, 250, 253, 0.62), rgba(239, 246, 250, 0.44)) !important;
}

html.profile-background-paused #neural-atmosphere {
  opacity: 0.72;
}

@media (hover: hover) and (pointer: fine) {
  #neural-atmosphere {
    will-change: transform;
  }
}

@media (max-width: 720px) {
  #neural-atmosphere {
    inset: -8px;
    transform: none !important;
  }

  #neural-atmosphere::after {
    opacity: 0.14;
  }

  #neural-atmosphere[data-motion='animated']::after {
    opacity: 0.06;
  }

  html.light #neural-atmosphere::after {
    opacity: 0.12;
  }

  html.light #neural-atmosphere[data-motion='animated']::after {
    opacity: 0.07;
  }
}

@media (prefers-reduced-motion: reduce) {
  #neural-atmosphere {
    transform: none !important;
  }

  #neural-atmosphere::after,
  #neural-atmosphere[data-motion='static']::after {
    opacity: 0.21;
  }

  html.light #neural-atmosphere::after,
  html.light #neural-atmosphere[data-motion='static']::after {
    opacity: 0.16;
  }
}