/* Particle Animation */
.particles-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: var(--size, 8px);
  height: var(--size, 8px);
  background: radial-gradient(circle, rgba(56, 182, 255, 0.8) 0%, rgba(56, 182, 255, 0) 70%);
  border-radius: 50%;
  opacity: 0;
  animation: particleFade 2s ease-in-out infinite; /* Reduced from 3s to 2s */
  animation-delay: var(--delay, 0s);
  will-change: opacity, transform; /* Add will-change for better performance */
}

@keyframes particleFade {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 0.6; /* Reduced from 0.8 to 0.6 */
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Scanner Animation */
.scanner-container {
  width: 300px;
  height: 4px;
  background-color: rgba(56, 182, 255, 0.2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.scanner-line {
  height: 100%;
  width: 30px;
  background: linear-gradient(to right, rgba(56, 182, 255, 0), rgba(56, 182, 255, 1), rgba(56, 182, 255, 0));
  position: absolute;
  animation: scannerMove 1.5s linear infinite; /* Reduced from 2s to 1.5s */
  will-change: transform; /* Add will-change for better performance */
}

@keyframes scannerMove {
  0% {
    transform: translateX(-30px); /* Use transform instead of left */
  }
  100% {
    transform: translateX(300px);
  }
}

/* Loading Animation */
.loading-dot {
  width: 6px;
  height: 6px;
  background-color: #38b6ff;
  border-radius: 50%;
  animation: dotPulse 1s infinite; /* Reduced from 1.5s to 1s */
  will-change: opacity, transform;
}

.loading-dot:nth-child(2) {
  animation-delay: 0.3s; /* Reduced from 0.5s to 0.3s */
}

.loading-dot:nth-child(3) {
  animation-delay: 0.6s; /* Reduced from 1s to 0.6s */
}

@keyframes dotPulse {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Spin Animation */
.spin {
  animation: spin 1.5s linear infinite; /* Reduced from 2s to 1.5s */
  will-change: transform;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Fonts */
.splash-font {
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 2px;
}

.splash-font-secondary {
  font-family: 'Roboto Mono', monospace;
  letter-spacing: 1px;
}

/* Glow Effects */
.drop-shadow-glow {
  filter: drop-shadow(0 0 8px rgba(56, 182, 255, 0.7));
}
