/* Fondo animado global del portal: líneas de fibra óptica pulsando +
   partículas flotantes (usado en /acceso y en todo el portal autenticado
   vía base.html). Basado en la referencia style.css del usuario. */

.background-container {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--void);
  pointer-events: none;
}

/* El fondo de fibra óptica/partículas es parte de la estética oscura
   "centro de control" — en tema claro se oculta y queda un fondo liso. */
:root[data-theme="light"] .background-container { display: none; }

.fiber-optic-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  perspective: 1000px;
  transform-style: preserve-3d;
}

.fiber-line {
  position: absolute;
  width: 2px;
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--wan-blue-bright) 10%,
    var(--wan-blue) 30%,
    var(--brand-green-bright) 50%,
    var(--wan-blue) 70%,
    var(--wan-blue-bright) 90%,
    transparent 100%
  );
  opacity: 0.35;
  animation: fiberPulse 8s ease-in-out infinite;
}

.fiber-line:nth-child(1) { transform: translateX(-50%) rotateY(15deg); left: 20%; }
.fiber-line:nth-child(2) { transform: translateX(-50%) rotateY(-20deg); left: 35%; animation-delay: -1s; }
.fiber-line:nth-child(3) { transform: translateX(-50%) rotateY(25deg); left: 50%; animation-delay: -2s; }
.fiber-line:nth-child(4) { transform: translateX(-50%) rotateY(-15deg); left: 65%; animation-delay: -3s; }
.fiber-line:nth-child(5) { transform: translateX(-50%) rotateY(10deg); left: 80%; animation-delay: -4s; }

@keyframes fiberPulse {
  0%, 100% { opacity: 0.2; filter: blur(1px); }
  50% { opacity: 0.55; filter: blur(2px); }
}

.particles { position: absolute; width: 100%; height: 100%; }

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--wan-blue-bright);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 15s infinite;
  box-shadow: 0 0 14px var(--wan-blue-bright), 0 0 28px var(--wan-blue-soft);
}

.particle:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.particle:nth-child(2) { left: 25%; top: 60%; animation-delay: -2s; }
.particle:nth-child(3) { left: 40%; top: 30%; animation-delay: -4s; }
.particle:nth-child(4) { left: 55%; top: 70%; animation-delay: -6s; }
.particle:nth-child(5) { left: 70%; top: 40%; animation-delay: -8s; }
.particle:nth-child(6) { left: 85%; top: 80%; animation-delay: -10s; }
.particle:nth-child(7) { left: 15%; top: 85%; animation-delay: -12s; }
.particle:nth-child(8) { left: 90%; top: 15%; animation-delay: -14s; }

@keyframes particleFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  10% { opacity: 1; transform: translateY(-10px) scale(1); }
  90% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-200px) scale(0.3); }
}