/* Pixel-art night sky for the hero. Load after styles.css. */
.hero::before,
.hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
}

.hero::before {
  background-image:
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#d9f33c 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#e6b887 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#d9f33c 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#e6b887 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#d9f33c 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#e6b887 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#d9f33c 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#e6b887 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    radial-gradient(ellipse at 50% 50%, rgb(113 77 101 / 18%), transparent 72%);
  background-position:
    7% 18%, 14% 61%, 19% 31%, 25% 78%, 31% 14%, 37% 49%,
    42% 23%, 48% 71%, 54% 12%, 59% 39%, 64% 82%, 69% 21%,
    74% 57%, 79% 11%, 84% 34%, 90% 73%, 95% 23%, 11% 88%,
    28% 41%, 45% 91%, 62% 63%, 77% 89%, 87% 48%, 97% 91%,
    4% 43%, 34% 92%, 52% 29%, 71% 7%, 82% 95%, 93% 13%, center;
  background-repeat: no-repeat;
  background-size:
    3px 3px, 2px 2px, 3px 3px, 2px 2px, 2px 2px, 3px 3px,
    3px 3px, 2px 2px, 2px 2px, 3px 3px, 2px 2px, 2px 2px,
    3px 3px, 3px 3px, 2px 2px, 3px 3px, 2px 2px, 2px 2px,
    2px 2px, 3px 3px, 3px 3px, 2px 2px, 2px 2px, 3px 3px,
    2px 2px, 2px 2px, 3px 3px, 2px 2px, 2px 2px, 3px 3px,
    100% 100%;
  opacity: 0.72;
  animation: hero-star-drift 32s ease-in-out infinite alternate;
}

.hero::after {
  background-image:
    linear-gradient(#fffefa 0 0), linear-gradient(#d9f33c 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#e6b887 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#d9f33c 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#e6b887 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#d9f33c 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#fffefa 0 0),
    linear-gradient(#fffefa 0 0), linear-gradient(#d9f33c 0 0);
  background-position:
    17% 10%, 22% 67%, 39% 36%, 45% 79%, 57% 55%, 67% 9%,
    73% 42%, 82% 64%, 91% 30%, 97% 57%, 3% 70%, 30% 19%,
    51% 88%, 61% 26%, 77% 13%, 88% 86%;
  background-repeat: no-repeat;
  background-size:
    2px 2px, 3px 3px, 2px 2px, 3px 3px, 2px 2px, 2px 2px,
    3px 3px, 2px 2px, 2px 2px, 3px 3px, 2px 2px, 3px 3px,
    2px 2px, 2px 2px, 2px 2px, 3px 3px;
  opacity: 0;
  animation: hero-star-twinkle 3.8s steps(2, end) infinite;
}

@keyframes hero-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -5px, 0); }
}

@keyframes hero-star-twinkle {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.68; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none;
  }

  .hero::before { transform: none; }
  .hero::after { opacity: 0.35; }
}