/* Deep-space background layer. */
.backdrop {
  background:
    radial-gradient(ellipse at 18% 8%, rgba(30, 100, 142, .18), transparent 38%),
    radial-gradient(ellipse at 82% 76%, rgba(43, 91, 147, .11), transparent 42%),
    radial-gradient(ellipse at 45% 105%, rgba(30, 127, 114, .12), transparent 36%),
    linear-gradient(155deg, #020711 0%, #06101d 48%, #020812 100%);
  background-size: auto;
}

.backdrop::before {
  z-index: 2;
  opacity: .55;
  background:
    radial-gradient(ellipse at 34% 32%, rgba(80, 142, 183, .07), transparent 26%),
    radial-gradient(ellipse at 72% 15%, rgba(75, 93, 167, .055), transparent 23%),
    linear-gradient(180deg, transparent 0%, rgba(1, 6, 12, .24) 100%);
  mask-image: none;
}

#starfield {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .92;
}

.aurora { z-index: 0; filter: blur(130px); opacity: .09; }
.aurora-a { background: #3065c0; }
.aurora-b { background: #2ba98f; }

.research-intro, .auth-panel, .topbar, .ai-card {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

@media (max-width: 520px) {
  #starfield { opacity: .78; }
}

/* A model switch is navigation-critical on phones. Keep the visual shell
   lightweight so the first tap is handled without a compositor backlog. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  #starfield { display: none; }
  .backdrop::before,
  .aurora { display: none; }
  .research-intro, .auth-panel, .topbar, .ai-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #starfield { opacity: .82; }
}