/* ============================================
   LUMA LANDPAGE — Animations & Background
   ============================================ */

/* ---- Starfield Container ---- */
#starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, #0D1020 0%, #07090F 70%);
}

/* ---- Stars Layers ---- */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background-repeat: repeat;
}

.stars-layer-1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(237, 232, 220, 0.8), transparent),
    radial-gradient(1px 1px at 100px 80px, rgba(237, 232, 220, 0.6), transparent),
    radial-gradient(1px 1px at 180px 150px, rgba(237, 232, 220, 0.7), transparent),
    radial-gradient(1px 1px at 260px 40px, rgba(237, 232, 220, 0.5), transparent),
    radial-gradient(1px 1px at 340px 200px, rgba(237, 232, 220, 0.6), transparent),
    radial-gradient(1px 1px at 420px 120px, rgba(237, 232, 220, 0.8), transparent),
    radial-gradient(1px 1px at 60px 180px, rgba(237, 232, 220, 0.5), transparent),
    radial-gradient(1px 1px at 500px 60px, rgba(237, 232, 220, 0.7), transparent),
    radial-gradient(1px 1px at 140px 240px, rgba(237, 232, 220, 0.6), transparent),
    radial-gradient(1px 1px at 380px 170px, rgba(237, 232, 220, 0.8), transparent),
    radial-gradient(1px 1px at 300px 100px, rgba(237, 232, 220, 0.5), transparent),
    radial-gradient(1px 1px at 460px 220px, rgba(237, 232, 220, 0.6), transparent),
    radial-gradient(1px 1px at 80px 60px, rgba(237, 232, 220, 0.7), transparent),
    radial-gradient(1px 1px at 220px 130px, rgba(237, 232, 220, 0.5), transparent),
    radial-gradient(1px 1px at 540px 190px, rgba(237, 232, 220, 0.8), transparent);
  animation: starDrift 120s linear infinite;
}

.stars-layer-2 {
  background-image:
    radial-gradient(1.5px 1.5px at 50px 70px, rgba(255, 232, 184, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 200px 200px, rgba(255, 232, 184, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 350px 30px, rgba(255, 232, 184, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 480px 160px, rgba(255, 232, 184, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 120px 250px, rgba(255, 232, 184, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 300px 90px, rgba(255, 232, 184, 0.5), transparent),
    radial-gradient(1.5px 1.5px at 430px 240px, rgba(255, 232, 184, 0.3), transparent),
    radial-gradient(1.5px 1.5px at 170px 40px, rgba(255, 232, 184, 0.5), transparent);
  animation: starDrift 180s linear infinite reverse;
}

@keyframes starDrift {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

/* ---- Nebulas ---- */
.nebula {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.nebula-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(201, 154, 82, 0.04) 0%, transparent 70%);
  top: 10%;
  left: -5%;
  animation: nebulaFloat 25s ease-in-out infinite;
}

.nebula-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(215, 245, 255, 0.03) 0%, transparent 70%);
  top: 50%;
  right: -8%;
  animation: nebulaFloat 30s ease-in-out infinite reverse;
}

.nebula-3 {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(229, 142, 115, 0.03) 0%, transparent 70%);
  bottom: 5%;
  left: 20%;
  animation: nebulaFloat 22s ease-in-out infinite 5s;
}

@keyframes nebulaFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(20px, 20px) scale(1.02); }
}

/* ---- Shooting Stars ---- */
.shooting-star {
  position: absolute;
  width: 80px;
  height: 1px;
  opacity: 0;
}

.shooting-star::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 232, 184, 0.8), transparent);
  border-radius: 0 50% 50% 0;
}

.shooting-star-1 {
  top: 15%;
  left: 20%;
  transform: rotate(-35deg);
  animation: shoot1 8s ease-in infinite 2s;
}

.shooting-star-2 {
  top: 40%;
  right: 15%;
  transform: rotate(-25deg);
  animation: shoot2 10s ease-in infinite 5s;
}

.shooting-star-3 {
  top: 70%;
  left: 35%;
  transform: rotate(-40deg);
  animation: shoot3 12s ease-in infinite 8s;
}

@keyframes shoot1 {
  0% { opacity: 0; transform: rotate(-35deg) translateX(0); }
  2% { opacity: 1; }
  8% { opacity: 1; transform: rotate(-35deg) translateX(300px); }
  10% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes shoot2 {
  0% { opacity: 0; transform: rotate(-25deg) translateX(0); }
  2% { opacity: 1; }
  6% { opacity: 1; transform: rotate(-25deg) translateX(250px); }
  8% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes shoot3 {
  0% { opacity: 0; transform: rotate(-40deg) translateX(0); }
  1% { opacity: 1; }
  5% { opacity: 1; transform: rotate(-40deg) translateX(280px); }
  7% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- Twinkling Stars ---- */
.twinkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--gold-bright, #FFE8B8);
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
}

.twinkle-1 { top: 8%; left: 12%; --dur: 3s; animation-delay: 0s; }
.twinkle-2 { top: 22%; left: 85%; --dur: 4s; animation-delay: 0.5s; }
.twinkle-3 { top: 45%; left: 5%; --dur: 3.5s; animation-delay: 1s; }
.twinkle-4 { top: 35%; left: 70%; --dur: 5s; animation-delay: 1.5s; }
.twinkle-5 { top: 60%; left: 90%; --dur: 4s; animation-delay: 0.8s; }
.twinkle-6 { top: 75%; left: 25%; --dur: 3s; animation-delay: 2s; }
.twinkle-7 { top: 55%; left: 45%; --dur: 4.5s; animation-delay: 0.3s; }
.twinkle-8 { top: 85%; left: 60%; --dur: 3.5s; animation-delay: 1.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  .stars-layer,
  .nebula,
  .shooting-star,
  .twinkle {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .stars-layer-1,
  .stars-layer-2 {
    animation: none;
  }

  .hero-cta {
    animation: none !important;
  }
}