/*
 * Shared fixed star field for the cover, map, and placeholder pages.
 * Positions and motion live only in the variables below.
 */

.starsky {
  --star1-x: 50%;
  --star1-y: 50%;
  --star1-w: 99.47vw;
  --star1-opacity: 0.9;
  --star1-float-x: 0.4vw;
  --star1-float-y: 0.8vw;
  --star1-float-rotate: 1deg;
  --star1-float-duration: 7s;
  --star1-float-delay: -0.4s;

  --star2-x: 65.8%;
  --star2-y: 47.5%;
  --star2-w: 66.8vw;
  --star2-opacity: 0.85;
  --star2-float-x: 0.93vw;
  --star2-float-y: 1.6vw;
  --star2-float-rotate: 2deg;
  --star2-float-duration: 8.4s;
  --star2-float-delay: -2.1s;

  --star3-x: 71.4%;
  --star3-y: 37.7%;
  --star3-w: 38.67vw;
  --star3-opacity: 0.75;
  --star3-float-x: 0.8vw;
  --star3-float-y: 1.2vw;
  --star3-float-rotate: 1.5deg;
  --star3-float-duration: 9.6s;
  --star3-float-delay: -3.6s;

  --star4-x: 38%;
  --star4-y: 71.8%;
  --star4-w: 43.33vw;
  --star4-opacity: 0.8;
  --star4-float-x: 1.07vw;
  --star4-float-y: 1.87vw;
  --star4-float-rotate: 3deg;
  --star4-float-duration: 6.8s;
  --star4-float-delay: -1.2s;

  --star5-x: 25.1%;
  --star5-y: 52.9%;
  --star5-w: 45.07vw;
  --star5-opacity: 0.7;
  --star5-float-x: 0.8vw;
  --star5-float-y: 1.47vw;
  --star5-float-rotate: 2deg;
  --star5-float-duration: 10.4s;
  --star5-float-delay: -5.2s;

  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #0e1220;
  pointer-events: none;
}

.starsky__sky,
.starsky__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.starsky__sky {
  z-index: 0;
  object-fit: cover;
}

.starsky__shade {
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(14, 18, 32, 0.3) 0%,
    rgba(14, 18, 32, 0.45) 45%,
    rgba(14, 18, 32, 0.72) 100%
  );
}

.star--1 {
  --star-x: var(--star1-x, 50%);
  --star-y: var(--star1-y, 50%);
  --star-w: var(--star1-w, 99.47vw);
  --star-opacity: var(--star1-opacity, 0.9);
  --star-float-x: var(--star1-float-x, 0.4vw);
  --star-float-y: var(--star1-float-y, 0.8vw);
  --star-float-rotate: var(--star1-float-rotate, 1deg);
  --star-float-duration: var(--star1-float-duration, 7s);
  --star-float-delay: var(--star1-float-delay, -0.4s);
}

.star--2 {
  --star-x: var(--star2-x, 65.8%);
  --star-y: var(--star2-y, 47.5%);
  --star-w: var(--star2-w, 66.8vw);
  --star-opacity: var(--star2-opacity, 0.85);
  --star-float-x: var(--star2-float-x, 0.93vw);
  --star-float-y: var(--star2-float-y, 1.6vw);
  --star-float-rotate: var(--star2-float-rotate, 2deg);
  --star-float-duration: var(--star2-float-duration, 8.4s);
  --star-float-delay: var(--star2-float-delay, -2.1s);
}

.star--3 {
  --star-x: var(--star3-x, 71.4%);
  --star-y: var(--star3-y, 37.7%);
  --star-w: var(--star3-w, 38.67vw);
  --star-opacity: var(--star3-opacity, 0.75);
  --star-float-x: var(--star3-float-x, 0.8vw);
  --star-float-y: var(--star3-float-y, 1.2vw);
  --star-float-rotate: var(--star3-float-rotate, 1.5deg);
  --star-float-duration: var(--star3-float-duration, 9.6s);
  --star-float-delay: var(--star3-float-delay, -3.6s);
}

.star--4 {
  --star-x: var(--star4-x, 38%);
  --star-y: var(--star4-y, 71.8%);
  --star-w: var(--star4-w, 43.33vw);
  --star-opacity: var(--star4-opacity, 0.8);
  --star-float-x: var(--star4-float-x, 1.07vw);
  --star-float-y: var(--star4-float-y, 1.87vw);
  --star-float-rotate: var(--star4-float-rotate, 3deg);
  --star-float-duration: var(--star4-float-duration, 6.8s);
  --star-float-delay: var(--star4-float-delay, -1.2s);
}

.star--5 {
  --star-x: var(--star5-x, 25.1%);
  --star-y: var(--star5-y, 52.9%);
  --star-w: var(--star5-w, 45.07vw);
  --star-opacity: var(--star5-opacity, 0.7);
  --star-float-x: var(--star5-float-x, 0.8vw);
  --star-float-y: var(--star5-float-y, 1.47vw);
  --star-float-rotate: var(--star5-float-rotate, 2deg);
  --star-float-duration: var(--star5-float-duration, 10.4s);
  --star-float-delay: var(--star5-float-delay, -5.2s);
}

.star {
  position: absolute;
  z-index: 2;
  left: var(--star-x, 50%);
  top: var(--star-y, 50%);
  width: var(--star-w, 99.47vw);
  opacity: var(--star-opacity, 0.9);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: star-float var(--star-float-duration, 7s) ease-in-out var(--star-float-delay, -0.4s) infinite;
  will-change: transform;
}

.star__img {
  display: block;
  width: 100%;
  height: auto;
  animation: star-spin var(--star-float-duration, 7s) ease-in-out var(--star-float-delay, -0.4s) infinite;
  will-change: transform;
}

/* Every frame keeps the centering translate, and vertical drift stays upward. */
@keyframes star-float {
  0%,
  100% {
    transform: translate(-50%, -50%) translate(0, 0);
  }

  25% {
    transform: translate(-50%, -50%)
      translate(var(--star-float-x, 0.4vw), calc(var(--star-float-y, 0.8vw) * -0.6));
  }

  50% {
    transform: translate(-50%, -50%) translate(0, calc(var(--star-float-y, 0.8vw) * -1));
  }

  75% {
    transform: translate(-50%, -50%)
      translate(calc(var(--star-float-x, 0.4vw) * -1), calc(var(--star-float-y, 0.8vw) * -0.6));
  }
}

@keyframes star-spin {
  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(var(--star-float-rotate, 1deg));
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(calc(var(--star-float-rotate, 1deg) * -1));
  }
}

@media (prefers-reduced-motion: reduce) {
  .star,
  .star__img {
    animation: none;
  }
}