/* Night sky base + CSS starfield (no images). */

:root {
  --brand-sky: #0f222d;
  --brand-sky-mid: #132a38;
  --brand-sky-deep: #0a1820;
}

.font-body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.font-display {
  font-family: "Space Grotesk", system-ui, sans-serif;
}

.hero-sky-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 130% 90% at 50% -15%,
      rgba(56, 130, 246, 0.1),
      transparent 55%
    ),
    radial-gradient(
      ellipse 100% 70% at 100% 80%,
      rgba(15, 34, 45, 0.65),
      transparent 50%
    ),
    linear-gradient(
      168deg,
      var(--brand-sky-deep) 0%,
      var(--brand-sky-mid) 45%,
      var(--brand-sky) 100%
    );
}

.star-drift {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.star-drift--a {
  animation: star-drift-a 36s ease-in-out infinite alternate;
}

.star-drift--b {
  animation: star-drift-b 46s ease-in-out infinite alternate;
}

.star-drift--c {
  animation: star-drift-c 28s ease-in-out infinite alternate;
}

.star-field {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  will-change: opacity;
}

.star-field--fine {
  box-shadow:
    58.12vw 19.48vh 1px 0.5px rgba(255, 255, 255, 0.926),
    92.4vw 46.71vh 1px 0.5px rgba(255, 255, 255, 0.714),
    21.45vw 22.17vh 1px 0.5px rgba(255, 255, 255, 0.452),
    69.24vw 21.24vh 1px 0.5px rgba(255, 255, 255, 0.93),
    7.04vw 19.33vh 1px 0.5px rgba(255, 255, 255, 0.312),
    76.99vw 36.65vh 1px 0.5px rgba(255, 255, 255, 0.58),
    32.6vw 63.74vh 1px 0.5px rgba(255, 255, 255, 0.533),
    20.83vw 43.02vh 1px 0.5px rgba(255, 255, 255, 0.463),
    11.08vw 82.34vh 1px 0.5px rgba(255, 255, 255, 0.726),
    66.48vw 88.24vh 1px 0.5px rgba(255, 255, 255, 0.526),
    37.93vw 42.3vh 1px 0.5px rgba(255, 255, 255, 0.533),
    66.89vw 0.65vh 1px 0.5px rgba(255, 255, 255, 0.575),
    53.51vw 34.55vh 1px 0.5px rgba(255, 255, 255, 0.265),
    70.46vw 0.94vh 1px 0.5px rgba(255, 255, 255, 0.645),
    15.34vw 3.46vh 1px 0.5px rgba(255, 255, 255, 0.377),
    6.57vw 15.08vh 1px 0.5px rgba(255, 255, 255, 0.729),
    72.83vw 36.28vh 1px 0.5px rgba(255, 255, 255, 0.707),
    47.51vw 49.85vh 1px 0.5px rgba(255, 255, 255, 0.863),
    31.13vw 87vh 1px 0.5px rgba(255, 255, 255, 0.734),
    68.35vw 0.59vh 1px 0.5px rgba(255, 255, 255, 0.309),
    3.2vw 34.58vh 1px 0.5px rgba(255, 255, 255, 0.912),
    87.57vw 83.86vh 1px 0.5px rgba(255, 255, 255, 0.333),
    70.57vw 77.45vh 1px 0.5px rgba(255, 255, 255, 0.816),
    79.22vw 14.03vh 1px 0.5px rgba(255, 255, 255, 0.375),
    79.26vw 73.82vh 1px 0.5px rgba(255, 255, 255, 0.875),
    44.65vw 88.96vh 1px 0.5px rgba(255, 255, 255, 0.348),
    95.71vw 88.45vh 1px 0.5px rgba(255, 255, 255, 0.486),
    6.76vw 54.85vh 1px 0.5px rgba(255, 255, 255, 0.732),
    35.04vw 5.75vh 1px 0.5px rgba(255, 255, 255, 0.445),
    82.45vw 9.06vh 1px 0.5px rgba(255, 255, 255, 0.906),
    25vw 20.44vh 1px 0.5px rgba(255, 255, 255, 0.329),
    98.1vw 90.11vh 1px 0.5px rgba(255, 255, 255, 0.473),
    9.56vw 65.33vh 1px 0.5px rgba(255, 255, 255, 0.871),
    1.21vw 63.3vh 1px 0.5px rgba(255, 255, 255, 0.85),
    45.88vw 56.94vh 1px 0.5px rgba(255, 255, 255, 0.813),
    23.85vw 27.32vh 1px 0.5px rgba(255, 255, 255, 0.712),
    55.23vw 53.53vh 1px 0.5px rgba(255, 255, 255, 0.484),
    93.7vw 28.82vh 1px 0.5px rgba(255, 255, 255, 0.725),
    89.42vw 40.08vh 1px 0.5px rgba(255, 255, 255, 0.288),
    22.04vw 6.63vh 1px 0.5px rgba(255, 255, 255, 0.354),
    12.04vw 34.25vh 1px 0.5px rgba(255, 255, 255, 0.509),
    44.74vw 66.51vh 1px 0.5px rgba(255, 255, 255, 0.724),
    68.72vw 36.44vh 1px 0.5px rgba(255, 255, 255, 0.714),
    54.98vw 12.75vh 1px 0.5px rgba(255, 255, 255, 0.632),
    31.83vw 67.59vh 1px 0.5px rgba(255, 255, 255, 0.764),
    24.07vw 43.51vh 1px 0.5px rgba(255, 255, 255, 0.568),
    29.69vw 4.05vh 1px 0.5px rgba(255, 255, 255, 0.285),
    99.28vw 73.99vh 1px 0.5px rgba(255, 255, 255, 0.557),
    66.67vw 26.9vh 1px 0.5px rgba(255, 255, 255, 0.747),
    95.08vw 77.32vh 1px 0.5px rgba(255, 255, 255, 0.576),
    98.36vw 92.21vh 1px 0.5px rgba(255, 255, 255, 0.291),
    41.18vw 45.21vh 1px 0.5px rgba(255, 255, 255, 0.442),
    61.65vw 14.34vh 1px 0.5px rgba(255, 255, 255, 0.773),
    85.77vw 6.16vh 1px 0.5px rgba(255, 255, 255, 0.734),
    26.6vw 63.83vh 1px 0.5px rgba(255, 255, 255, 0.734);
  animation: star-twinkle-fine 2.6s ease-in-out infinite alternate;
  animation-delay: -0.5s;
}

.star-field--mid {
  box-shadow:
    76.39vw 64.48vh 1px 0.5px rgba(255, 255, 255, 0.537),
    19.81vw 67.67vh 1px 0.5px rgba(255, 255, 255, 0.929),
    42.77vw 85.09vh 1px 0.5px rgba(255, 255, 255, 0.275),
    52.78vw 20.16vh 1px 0.5px rgba(255, 255, 255, 0.596),
    61.13vw 85.59vh 1px 0.5px rgba(255, 255, 255, 0.616),
    86.88vw 32.68vh 1px 0.5px rgba(255, 255, 255, 0.34),
    46.49vw 71.52vh 1px 0.5px rgba(255, 255, 255, 0.746),
    3.67vw 24.86vh 1px 0.5px rgba(255, 255, 255, 0.428),
    47.16vw 86.17vh 1px 0.5px rgba(255, 255, 255, 0.44),
    4.59vw 89.8vh 1px 0.5px rgba(255, 255, 255, 0.858),
    77.07vw 3.87vh 1px 0.5px rgba(255, 255, 255, 0.432),
    17.68vw 91.5vh 1px 0.5px rgba(255, 255, 255, 0.337),
    12.75vw 22.06vh 1px 0.5px rgba(255, 255, 255, 0.804),
    19.8vw 98.34vh 1px 0.5px rgba(255, 255, 255, 0.466),
    65.01vw 19.19vh 1px 0.5px rgba(255, 255, 255, 0.454),
    86.54vw 99.76vh 1px 0.5px rgba(255, 255, 255, 0.42),
    34.95vw 5.74vh 1px 0.5px rgba(255, 255, 255, 0.386),
    38.4vw 52.11vh 1px 0.5px rgba(255, 255, 255, 0.651),
    34.95vw 15.8vh 1px 0.5px rgba(255, 255, 255, 0.639),
    34.89vw 34.51vh 1px 0.5px rgba(255, 255, 255, 0.931),
    58.73vw 1.51vh 1px 0.5px rgba(255, 255, 255, 0.92),
    96.97vw 38.99vh 1px 0.5px rgba(255, 255, 255, 0.936),
    10.5vw 91.87vh 1px 0.5px rgba(255, 255, 255, 0.368),
    86.4vw 67.74vh 1px 0.5px rgba(255, 255, 255, 0.921),
    30.23vw 65.39vh 1px 0.5px rgba(255, 255, 255, 0.908),
    12.88vw 18.51vh 1px 0.5px rgba(255, 255, 255, 0.64),
    13.37vw 5.45vh 1px 0.5px rgba(255, 255, 255, 0.261),
    34.7vw 65vh 1px 0.5px rgba(255, 255, 255, 0.576),
    60.41vw 2.64vh 1px 0.5px rgba(255, 255, 255, 0.321),
    56.54vw 15.68vh 1px 0.5px rgba(255, 255, 255, 0.259),
    6.16vw 65.19vh 1px 0.5px rgba(255, 255, 255, 0.922),
    49.63vw 0.63vh 1px 0.5px rgba(255, 255, 255, 0.386),
    68.13vw 79.27vh 1px 0.5px rgba(255, 255, 255, 0.394),
    46.75vw 3.63vh 1px 0.5px rgba(255, 255, 255, 0.628),
    75.61vw 49.96vh 1px 0.5px rgba(255, 255, 255, 0.8);
  animation: star-twinkle-mid 3.2s ease-in-out infinite alternate;
  animation-delay: -1.7s;
}

.star-field--bright {
  box-shadow:
    3.17vw 96.88vh 1.5px 0.5px rgba(255, 255, 255, 0.386),
    99.44vw 94.67vh 1.5px 0.5px rgba(255, 255, 255, 0.431),
    51.63vw 39.83vh 1.5px 0.5px rgba(255, 255, 255, 0.537),
    78.97vw 82.77vh 1.5px 0.5px rgba(255, 255, 255, 0.43),
    54.39vw 68.6vh 1.5px 0.5px rgba(255, 255, 255, 0.666),
    12.15vw 39.11vh 1.5px 0.5px rgba(255, 255, 255, 0.595),
    92.41vw 82.24vh 1.5px 0.5px rgba(255, 255, 255, 0.722),
    28.02vw 93.87vh 1.5px 0.5px rgba(255, 255, 255, 0.41),
    33.78vw 15.7vh 1.5px 0.5px rgba(255, 255, 255, 0.662),
    79.56vw 70.18vh 1.5px 0.5px rgba(255, 255, 255, 0.829),
    70.24vw 65.31vh 1.5px 0.5px rgba(255, 255, 255, 0.426),
    95.85vw 99.05vh 1.5px 0.5px rgba(255, 255, 255, 0.763),
    99.7vw 88.36vh 1.5px 0.5px rgba(255, 255, 255, 0.864),
    75.68vw 81.18vh 1.5px 0.5px rgba(255, 255, 255, 0.734),
    12.76vw 83.73vh 1.5px 0.5px rgba(255, 255, 255, 0.497),
    64.37vw 89.93vh 1.5px 0.5px rgba(255, 255, 255, 0.595),
    27.04vw 55.33vh 1.5px 0.5px rgba(255, 255, 255, 0.863),
    84.08vw 99.39vh 1.5px 0.5px rgba(255, 255, 255, 0.885);
  animation: star-twinkle-bright 2s ease-in-out infinite alternate;
  animation-delay: -0.9s;
}

@keyframes star-twinkle-fine {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

@keyframes star-twinkle-mid {
  0% {
    opacity: 0.55;
  }
  100% {
    opacity: 1;
  }
}

@keyframes star-twinkle-bright {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

@keyframes star-drift-a {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-5vw, -2.8vh, 0);
  }
}

@keyframes star-drift-b {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(3.8vw, -4.2vh, 0);
  }
}

@keyframes star-drift-c {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-2.8vw, 3.2vh, 0);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.04);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2.2s ease-in-out infinite;
  transform-origin: center;
}

@media (prefers-reduced-motion: reduce) {
  .star-drift--a,
  .star-drift--b,
  .star-drift--c {
    animation: none;
  }

  .star-field--fine,
  .star-field--mid,
  .star-field--bright {
    animation: none;
    opacity: 1;
  }

  .animate-pulse-glow {
    animation: none;
    opacity: 0.45;
    transform: none;
  }

  #status-spinner .status-loader-arc {
    animation: none;
  }
}
