/* World Design — Full-site cosmic earth background */

.cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #00050a;
  pointer-events: none;
}

/* Twinkling starfield — below header only (no motion behind nav) */
.cosmic-bg__stars {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  left: -20%;
  top: -20%;
  clip-path: inset(var(--header-h) 0 0 0);
  animation: starfield-drift 120s linear infinite;
}

.cosmic-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  animation: star-twinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  opacity: var(--opacity, 0.6);
}

.cosmic-star--bright {
  box-shadow: 0 0 10px rgba(0, 200, 255, 0.9), 0 0 20px rgba(0, 150, 255, 0.4);
}

/* Earth — full viewport cover (header → footer) */
.cosmic-bg__earth-wrap {
  position: absolute;
  inset: 0;
}

.cosmic-bg__earth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  opacity: 0;
  filter: brightness(0.88) contrast(1.08) saturate(1.06);
  transition: opacity 1.4s ease;
}

.cosmic-bg__earth.is-loaded {
  opacity: 1;
}

/* Horizon glow (subtle accent) */
.cosmic-bg__glow {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  max-height: 280px;
  background: linear-gradient(
    to top,
    rgba(0, 168, 255, 0.28) 0%,
    rgba(0, 255, 255, 0.12) 45%,
    transparent 100%
  );
  filter: blur(28px);
  animation: horizon-pulse 6s ease-in-out infinite;
  opacity: 0.55;
}

/* Soft top shade — keeps nav readable without hiding the image */
.cosmic-bg__balloon {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 5, 12, 0.28) 18%,
    rgba(0, 5, 12, 0.08) 38%,
    transparent 58%
  );
  pointer-events: none;
}

/* Light edge vignette */
.cosmic-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 95% 90% at 50% 50%,
    transparent 50%,
    rgba(0, 0, 0, 0.25) 85%,
    rgba(0, 0, 0, 0.45) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Uniform light veil — readability without blocking the photo */
.cosmic-bg__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 5, 10, 0.2) 0%,
    rgba(0, 5, 10, 0.32) 45%,
    rgba(0, 5, 10, 0.42) 100%
  );
  z-index: 1;
}

/* Shooting stars — not in header zone */
.cosmic-shooting-star {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  border-radius: 2px;
  opacity: 0;
  clip-path: inset(var(--header-h) 0 0 0);
  animation: shooting-star 8s ease-in-out infinite;
  animation-delay: var(--shoot-delay, 2s);
  transform: rotate(-35deg);
}

/* Static header band — no animated background bleed-through */
.cosmic-bg__header-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: linear-gradient(
    180deg,
    rgba(0, 5, 10, 0.85) 0%,
    rgba(0, 5, 10, 0.55) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Light theme */
[data-theme="light"] .cosmic-bg {
  opacity: 0.2;
}

[data-theme="light"] .cosmic-bg__veil {
  background: linear-gradient(
    180deg,
    rgba(241, 245, 249, 0.75) 0%,
    rgba(241, 245, 249, 0.85) 100%
  );
}

@keyframes starfield-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-2%, -1.5%) rotate(0.5deg); }
}

@keyframes star-twinkle {
  0%, 100% { opacity: var(--opacity, 0.5); transform: scale(1); }
  50% { opacity: calc(var(--opacity, 0.5) * 0.3); transform: scale(0.85); }
}

@keyframes horizon-pulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50% { opacity: 0.65; transform: scaleY(1.1); }
}

@keyframes shooting-star {
  0%, 92%, 100% { opacity: 0; transform: translateX(-100px) rotate(-35deg); }
  93% { opacity: 1; }
  96% { opacity: 0; transform: translateX(400px) rotate(-35deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cosmic-bg__stars,
  .cosmic-bg__glow,
  .cosmic-star,
  .cosmic-shooting-star {
    animation: none !important;
  }
}

/* Mobile — portrait earth image (hero-earth-mobile.jpg) */
.cosmic-bg__earth-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.cosmic-bg__earth-picture .cosmic-bg__earth {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

@media (max-width: 768px) {
  .cosmic-bg--mobile .cosmic-bg__earth,
  .cosmic-bg__earth {
    object-fit: cover;
    object-position: center top;
  }

  .cosmic-bg--mobile .cosmic-bg__balloon,
  .cosmic-bg--mobile.cosmic-bg .cosmic-bg__balloon {
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 5, 12, 0.15) 22%,
      transparent 45%
    );
  }

  .cosmic-bg--mobile .cosmic-bg__veil,
  .cosmic-bg.cosmic-bg--mobile .cosmic-bg__veil {
    background: linear-gradient(
      180deg,
      rgba(0, 5, 10, 0.12) 0%,
      rgba(0, 5, 10, 0.28) 50%,
      rgba(0, 5, 10, 0.45) 100%
    );
  }

  .cosmic-bg--mobile .cosmic-bg__stars {
    opacity: 0.35;
  }

  .cosmic-bg--mobile .cosmic-bg__glow {
    bottom: 0;
    height: 24vh;
    max-height: 200px;
    opacity: 0.7;
  }

  .cosmic-bg--mobile .cosmic-bg__header-fade {
    background: linear-gradient(
      180deg,
      rgba(0, 5, 10, 0.75) 0%,
      rgba(0, 5, 10, 0.35) 100%
    );
  }
}