/* ─── HERO STAR FIELD (JS-generated) ───────────────────────── */
.hero-stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}
.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite var(--delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* ─── MOON ──────────────────────────────────────────────────── */
.hero-moon {
  position: absolute;
  top: 5%; right: 6%;
  z-index: 2;
  font-size: 4rem;
  animation: moonFloat 8s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.3));
}
@keyframes moonFloat {
  0%, 100% { transform: translateY(0px) rotate(-5deg); }
  50% { transform: translateY(-12px) rotate(-3deg); }
}

/* ─── METEOR EMOJIS (decorative, floating) ──────────────────── */
.hero-meteors {
  position: absolute;
  top: 4%; right: 18%;
  z-index: 2;
  display: flex;
  gap: 0.5rem;
  animation: meteorFloat 5s ease-in-out infinite;
}
@keyframes meteorFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px) translateX(4px); }
}
.meteor-emoji {
  font-size: 2.2rem;
  filter: drop-shadow(0 0 8px var(--meteor-glow));
}

/* ─── CORN FLOAT ────────────────────────────────────────────── */
.hero-corn {
  position: absolute;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-size: 5rem;
  animation: cornFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}
@keyframes cornFloat {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-10px); }
}

/* ─── HERO CONTENT FADE-UPS ─────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── TICKER ────────────────────────────────────────────────── */
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ─── SCROLL PULSE (hero scroll indicator) ──────────────────── */
@keyframes scrollPulse {
  0%, 100% { width: 36px; opacity: 0.4; }
  50% { width: 56px; opacity: 0.9; }
}

/* ─── PAGE TRANSITION OVERLAY ───────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.page-transition.fade-out {
  opacity: 1;
  pointer-events: all;
}
body.is-leaving .page-transition {
  opacity: 1;
}

/* ─── SHOOTING METEOR TRAIL (JS-spawned) ────────────────────── */
.meteor-trail {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 6;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(244,81,30,0.9), rgba(245,200,66,0.6), transparent);
  box-shadow: 0 0 8px var(--meteor), 0 0 20px var(--meteor-glow);
  opacity: 0;
  transform-origin: left center;
}
.meteor-trail::after {
  content: '☄️';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  filter: drop-shadow(0 0 6px var(--meteor));
}
@keyframes meteorShoot {
  0%   { opacity: 0; transform: translate(0,0) rotate(var(--angle)); }
  5%   { opacity: 1; }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--angle)); }
}

/* ─── RESPONSIVE ANIMATION TWEAKS ───────────────────────────── */
@media (max-width: 768px) {
  .hero-moon { font-size: 2.5rem; }
  .hero-meteors { right: 10%; }
  .hero-corn { font-size: 3.5rem; bottom: 130px; }
}