/* Star field ------------------------------------------------------------- */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.3); }
}

/* Scan line over the map ------------------------------------------------ */
.scan-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 229, 160, 0.0) 5%,
    rgba(0, 229, 160, 0.55) 50%,
    rgba(0, 229, 160, 0.0) 95%,
    transparent 100%);
  box-shadow: 0 0 18px rgba(0, 229, 160, 0.65);
  pointer-events: none;
  z-index: 500;
  animation: scan 6s linear infinite;
}
@keyframes scan {
  0%   { top: -2%; opacity: 0.0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 102%; opacity: 0.0; }
}

/* Pulsing live dot ------------------------------------------------------ */
.live-dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.6);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(0, 229, 160, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 160, 0); }
}

/* Fade-up entrance ------------------------------------------------------ */
.fade-up {
  opacity: 0;
  transform: translateY(12px);
  animation: fadeUp 0.5s ease forwards;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Typing indicator dots -------------------------------------------------- */
.typing {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.typing span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: bounce 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.15s; }
.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.5; }
  30%           { transform: translateY(-5px); opacity: 1;   }
}

/* Staggered entrance helpers ------------------------------------------- */
.delay-1 { animation-delay: 0.6s; }
.delay-2 { animation-delay: 0.9s; }
.delay-3 { animation-delay: 1.1s; }
.delay-4 { animation-delay: 1.3s; }
.delay-5 { animation-delay: 1.5s; }
.delay-6 { animation-delay: 1.7s; }

/* Satellite floater ---------------------------------------------------- */
.satellite-flyer {
  position: absolute;
  top: 32%;
  left: -160px;
  width: 94px;
  height: 94px;
  opacity: 0.78;
  pointer-events: none;
  animation: satFly 70s linear infinite;
  filter: drop-shadow(0 0 10px rgba(0, 229, 160, 0.45));
}
.satellite-flyer svg { width: 100%; height: 100%; display: block; }
.satellite-flyer .sat-body {
  transform-origin: 32px 32px;
  animation: satTilt 9s ease-in-out infinite;
}
.satellite-flyer .sat-blink {
  animation: satBlink 1.6s ease-in-out infinite;
}
@keyframes satFly {
  0%   { transform: translate3d(0,                        0,      0); }
  50%  { transform: translate3d(calc(50vw + 80px),        -28px,  0); }
  100% { transform: translate3d(calc(100vw + 260px),      0,      0); }
}
@keyframes satTilt {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg);  }
}
@keyframes satBlink {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1;   }
}

/* Meteorites (shooting stars) ----------------------------------------- */
.meteor {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 110px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(0, 229, 160, 0.55) 60%,
    rgba(255, 255, 255, 0.95) 100%);
  border-radius: 999px;
  transform: rotate(35deg);
  transform-origin: top center;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.65))
          drop-shadow(0 0 12px rgba(0, 229, 160, 0.35));
  animation: meteor 6s ease-in infinite;
}
.meteor::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.9),
              0 0 24px rgba(0, 229, 160, 0.65);
}
@keyframes meteor {
  0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(35deg); }
  6%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-720px, 720px, 0) rotate(35deg); }
}

/* Space goats — drifting on different curved trajectories ------------- */
.space-goat {
  position: absolute;
  width: 96px;
  height: 76px;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 0 10px rgba(0, 229, 160, 0.35));
  will-change: transform;
}
.space-goat svg { width: 100%; height: 100%; display: block; }

/* Subtle bob inside the goat so it looks like it's "floating" */
.space-goat .goat-rig { animation: goatBob 5s ease-in-out infinite; transform-origin: center; }
@keyframes goatBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* Trajectory 1 — diagonal bottom-left → top-right, gentle zig-zag */
.space-goat.path1 { animation: goatPath1 95s linear infinite; }
@keyframes goatPath1 {
  0%   { transform: translate(-180px, 78vh); }
  25%  { transform: translate(28vw, 58vh); }
  50%  { transform: translate(52vw, 38vh); }
  75%  { transform: translate(78vw, 52vh); }
  100% { transform: translate(calc(100vw + 200px), 22vh); }
}

/* Trajectory 2 — right → left, mid-screen wave, facing the other way */
.space-goat.path2 { animation: goatPath2 120s linear infinite; }
@keyframes goatPath2 {
  0%   { transform: translate(calc(100vw + 160px), 30vh) scaleX(-1); }
  33%  { transform: translate(62vw, 50vh)                scaleX(-1); }
  66%  { transform: translate(28vw, 32vh)                scaleX(-1); }
  100% { transform: translate(-200px, 55vh)              scaleX(-1); }
}

/* Trajectory 3 — slow lazy loop from top-left, descending into bottom-right */
.space-goat.path3 {
  width: 70px; height: 56px;
  opacity: 0.78;
  animation: goatPath3 140s linear infinite;
}
@keyframes goatPath3 {
  0%   { transform: translate(-140px, 12vh); }
  20%  { transform: translate(22vw, 28vh); }
  45%  { transform: translate(48vw, 18vh); }
  70%  { transform: translate(70vw, 38vh); }
  100% { transform: translate(calc(100vw + 160px), 68vh); }
}