/* Floating particles animation for dark themes */
.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.7;
  background: radial-gradient(circle at center, rgba(223, 50, 229, 0.8) 0%, rgba(223, 50, 229, 0) 70%);
}

/* Add a container for particles to ensure they cover the entire page */
.particles-container {
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

body.theme-true-dark .particle:nth-child(1),
body.theme-dim .particle:nth-child(1),
body.theme-dark-gray .particle:nth-child(1),
body.theme-selective-dark .particle:nth-child(1),
body.theme-high-contrast .particle:nth-child(1) {
  width: 80px;
  height: 80px;
  left: 10%;
  top: 20%;
  animation: float-particle 15s ease-in-out infinite;
  animation-delay: 0s;
}

body.theme-true-dark .particle:nth-child(2),
body.theme-dim .particle:nth-child(2),
body.theme-dark-gray .particle:nth-child(2),
body.theme-selective-dark .particle:nth-child(2),
body.theme-high-contrast .particle:nth-child(2) {
  width: 120px;
  height: 120px;
  right: 15%;
  bottom: 30%;
  animation: float-particle 20s ease-in-out infinite;
  animation-delay: 2s;
}

body.theme-true-dark .particle:nth-child(3),
body.theme-dim .particle:nth-child(3),
body.theme-dark-gray .particle:nth-child(3),
body.theme-selective-dark .particle:nth-child(3),
body.theme-high-contrast .particle:nth-child(3) {
  width: 60px;
  height: 60px;
  right: 30%;
  top: 15%;
  animation: float-particle 18s ease-in-out infinite;
  animation-delay: 5s;
}

body.theme-twilight .particle:nth-child(1) {
  width: 80px;
  height: 80px;
  left: 10%;
  top: 20%;
  animation: float-particle 15s ease-in-out infinite;
  animation-delay: 0s;
  background: radial-gradient(circle at center, rgba(255, 140, 0, 0.5) 0%, rgba(255, 140, 0, 0) 70%);
}

body.theme-twilight .particle:nth-child(2) {
  width: 120px;
  height: 120px;
  right: 15%;
  bottom: 30%;
  animation: float-particle 20s ease-in-out infinite;
  animation-delay: 2s;
  background: radial-gradient(circle at center, rgba(223, 50, 229, 0.5) 0%, rgba(223, 50, 229, 0) 70%);
}

body.theme-twilight .particle:nth-child(3) {
  width: 60px;
  height: 60px;
  right: 30%;
  top: 15%;
  animation: float-particle 18s ease-in-out infinite;
  animation-delay: 5s;
  background: radial-gradient(circle at center, rgba(77, 124, 254, 0.5) 0%, rgba(77, 124, 254, 0) 70%);
}

body.theme-blue-dark-gray .particle:nth-child(1) {
  width: 80px;
  height: 80px;
  left: 10%;
  top: 20%;
  animation: float-particle 15s ease-in-out infinite;
  animation-delay: 0s;
  background: radial-gradient(circle at center, rgba(77, 124, 254, 0.5) 0%, rgba(77, 124, 254, 0) 70%);
}

body.theme-blue-dark-gray .particle:nth-child(2) {
  width: 120px;
  height: 120px;
  right: 15%;
  bottom: 30%;
  animation: float-particle 20s ease-in-out infinite;
  animation-delay: 2s;
  background: radial-gradient(circle at center, rgba(107, 147, 255, 0.5) 0%, rgba(107, 147, 255, 0) 70%);
}

body.theme-blue-dark-gray .particle:nth-child(3) {
  width: 60px;
  height: 60px;
  right: 30%;
  top: 15%;
  animation: float-particle 18s ease-in-out infinite;
  animation-delay: 5s;
  background: radial-gradient(circle at center, rgba(77, 124, 254, 0.5) 0%, rgba(77, 124, 254, 0) 70%);
}

@keyframes float-particle {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.7;
  }
  25% {
    transform: translateY(-30px) translateX(20px);
    opacity: 0.9;
  }
  50% {
    transform: translateY(0) translateX(40px);
    opacity: 0.7;
  }
  75% {
    transform: translateY(30px) translateX(20px);
    opacity: 0.9;
  }
}

/* Additional particles for better coverage */
body.theme-true-dark .particle:nth-child(4),
body.theme-dim .particle:nth-child(4),
body.theme-dark-gray .particle:nth-child(4),
body.theme-selective-dark .particle:nth-child(4),
body.theme-high-contrast .particle:nth-child(4) {
  width: 100px;
  height: 100px;
  left: 50%;
  bottom: 15%;
  animation: float-particle 22s ease-in-out infinite;
  animation-delay: 3s;
}

body.theme-true-dark .particle:nth-child(5),
body.theme-dim .particle:nth-child(5),
body.theme-dark-gray .particle:nth-child(5),
body.theme-selective-dark .particle:nth-child(5),
body.theme-high-contrast .particle:nth-child(5) {
  width: 70px;
  height: 70px;
  left: 70%;
  top: 60%;
  animation: float-particle 19s ease-in-out infinite;
  animation-delay: 7s;
}

/* Hide particles in light mode and for station detail view */
body:not(.theme-true-dark):not(.theme-twilight):not(.theme-blue-dark-gray):not(.theme-dim):not(.theme-dark-gray):not(.theme-selective-dark):not(.theme-high-contrast) .particle,
body.station-detail-view .particle {
  display: none;
}

/* Make particles visible in dark themes */
body.theme-true-dark .particle,
body.theme-twilight .particle,
body.theme-blue-dark-gray .particle,
body.theme-dim .particle,
body.theme-dark-gray .particle,
body.theme-selective-dark .particle,
body.theme-high-contrast .particle {
  display: block !important;
}