/* Overrides to improve contrast on top of background image */
:root {
  --text-secondary: #d9d9d9; /* lighten secondary text */
  --text-muted: #999999;     /* slightly brighter muted text */
}

/* Background image + dim overlay */
.background-layer {
  position: fixed;
  inset: 0;
  background-image: url('images/milky-way-in-tropics-2024-09-17-09-28-04-utc.webp');
  background-size: cover;
  background-position: center;
  z-index: -2;
  opacity: 0.5;
}
.background-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65); /* increased dim overlay for better readability */
}

/* Firefly layer */
.firefly-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* behind content, above background */
}

/* Fireflies */
.firefly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 0;
  will-change: transform;
}

.firefly::before,
.firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift linear infinite;
  animation-duration: var(--rotation-duration, 12s);
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift linear infinite, flash linear infinite;
  animation-duration: var(--rotation-duration, 12s), var(--flash-duration, 6000ms);
  animation-delay: 0ms, var(--flash-delay, 500ms);
}

@keyframes drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flash {
  0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw yellow; }
  5% { opacity: 1; box-shadow: 0 0 2vw 0.4vw yellow; }
}