/* ==== QUANTITATIVE FINANCE FORMULAS BACKGROUND ==== */

/* Variables para las fórmulas animadas */
:root {
  --formula-color: rgba(255, 255, 255, 0.15);
  --formula-color-bright: rgba(255, 255, 255, 0.25);
  --formula-speed-slow: 80s;
  --formula-speed-medium: 60s;
  --formula-speed-fast: 40s;
  --formula-speed-ultrafast: 25s;
  --formula-speed-reverse: -70s;
}

/* Background principal con fórmulas animadas */
.quantitative-formulas-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
  opacity: 0.8;
}

/* Contenedor de fórmulas */
.formulas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Capas de fórmulas con diferentes velocidades */
.formula-layer {
  position: absolute;
  width: 300%;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  font-weight: 400;
  color: var(--formula-color);
  opacity: 0.9;
  gap: 3rem;
}

/* Layer 1 - Very top */
.formula-layer-1 {
  top: 3%;
  font-size: 1.6rem;
  animation: moveFormulas var(--formula-speed-slow) linear infinite;
  color: var(--formula-color-bright);
  z-index: 1;
}

/* Layer 2 - Upper quarter */
.formula-layer-2 {
  top: 15%;
  font-size: 1.3rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -20s;
  z-index: 2;
}

/* Layer 3 - Upper third */
.formula-layer-3 {
  top: 27%;
  font-size: 1.0rem;
  animation: moveFormulas var(--formula-speed-fast) linear infinite;
  animation-delay: -40s;
  z-index: 3;
}

/* Layer 4 - Approaching center */
.formula-layer-4 {
  top: 39%;
  font-size: 1.2rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -60s;
  z-index: 4;
}

/* Layer 5 - Dead center */
.formula-layer-5 {
  top: 51%;
  font-size: 0.9rem;
  animation: moveFormulas var(--formula-speed-ultrafast) linear infinite;
  animation-delay: -10s;
  z-index: 5;
}

/* Layer 6 - Lower center */
.formula-layer-6 {
  top: 63%;
  font-size: 1.1rem;
  animation: moveFormulas var(--formula-speed-slow) linear infinite;
  animation-delay: -30s;
  z-index: 6;
}

/* Layer 7 - Lower third */
.formula-layer-7 {
  top: 75%;
  font-size: 0.95rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -50s;
  z-index: 7;
}

/* Layer 8 - Bottom quarter */
.formula-layer-8 {
  top: 87%;
  font-size: 1.05rem;
  animation: moveFormulas var(--formula-speed-fast) linear infinite;
  animation-delay: -70s;
  z-index: 8;
}

/* Layer 9 - Extra layer for better distribution */
.formula-layer-9 {
  top: 9%;
  font-size: 0.85rem;
  animation: moveFormulas var(--formula-speed-ultrafast) linear infinite;
  animation-delay: -25s;
  z-index: 9;
}

/* Layer 10 - Extra layer bottom */
.formula-layer-10 {
  top: 95%;
  font-size: 0.9rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -45s;
  z-index: 10;
}

/* Layer 11 - Additional coverage */
.formula-layer-11 {
  top: 21%;
  font-size: 1.1rem;
  animation: moveFormulas var(--formula-speed-fast) linear infinite;
  animation-delay: -15s;
  z-index: 11;
}

/* Layer 12 - Market microstructure */
.formula-layer-12 {
  top: 33%;
  font-size: 0.95rem;
  animation: moveFormulas var(--formula-speed-reverse) linear infinite;
  animation-delay: -35s;
  z-index: 12;
}

/* Layer 13 - Behavioral finance */
.formula-layer-13 {
  top: 45%;
  font-size: 1.05rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -55s;
  z-index: 13;
}

/* Layer 14 - Alternative investments */
.formula-layer-14 {
  top: 57%;
  font-size: 0.85rem;
  animation: moveFormulas var(--formula-speed-ultrafast) linear infinite;
  animation-delay: -5s;
  z-index: 14;
}

/* Layer 15 - Cryptocurrency & DeFi */
.formula-layer-15 {
  top: 69%;
  font-size: 1.0rem;
  animation: moveFormulas var(--formula-speed-slow) linear infinite;
  animation-delay: -65s;
  z-index: 15;
}

/* Layer 16 - ESG & Sustainable Finance */
.formula-layer-16 {
  top: 81%;
  font-size: 0.9rem;
  animation: moveFormulas var(--formula-speed-fast) linear infinite;
  animation-delay: -25s;
  z-index: 16;
}

/* Layer 17 - Machine Learning in Finance */
.formula-layer-17 {
  top: 6%;
  font-size: 1.15rem;
  animation: moveFormulas var(--formula-speed-reverse) linear infinite;
  animation-delay: -75s;
  z-index: 17;
}

/* Layer 18 - High-frequency trading */
.formula-layer-18 {
  top: 18%;
  font-size: 0.8rem;
  animation: moveFormulas var(--formula-speed-medium) linear infinite;
  animation-delay: -85s;
  z-index: 18;
}

/* Animación de movimiento de derecha a izquierda */
@keyframes moveFormulas {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Animación de movimiento de arriba hacia abajo */
@keyframes moveFormulasVertical {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

/* ==== CAPAS VERTICALES DE FÓRMULAS ==== */

/* Capas verticales con diferentes velocidades */
.formula-layer-vertical {
  position: absolute;
  width: 100px;
  height: 300%;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
  font-weight: 400;
  color: var(--formula-color);
  opacity: 0.6;
  gap: 2rem;
  writing-mode: vertical-lr;
  text-orientation: mixed;
}

/* Columna vertical 1 - Izquierda */
.formula-layer-v1 {
  left: 5%;
  font-size: 0.9rem;
  animation: moveFormulasVertical var(--formula-speed-slow) linear infinite;
  animation-delay: -10s;
  z-index: 20;
}

/* Columna vertical 2 */
.formula-layer-v2 {
  left: 15%;
  font-size: 0.8rem;
  animation: moveFormulasVertical var(--formula-speed-medium) linear infinite;
  animation-delay: -25s;
  z-index: 21;
}

/* Columna vertical 3 */
.formula-layer-v3 {
  left: 25%;
  font-size: 1.0rem;
  animation: moveFormulasVertical var(--formula-speed-fast) linear infinite;
  animation-delay: -40s;
  z-index: 22;
}

/* Columna vertical 4 */
.formula-layer-v4 {
  left: 35%;
  font-size: 0.85rem;
  animation: moveFormulasVertical var(--formula-speed-ultrafast) linear infinite;
  animation-delay: -15s;
  z-index: 23;
}

/* Columna vertical 5 - Centro */
.formula-layer-v5 {
  left: 45%;
  font-size: 0.9rem;
  animation: moveFormulasVertical var(--formula-speed-medium) linear infinite;
  animation-delay: -55s;
  z-index: 24;
}

/* Columna vertical 6 */
.formula-layer-v6 {
  left: 55%;
  font-size: 0.95rem;
  animation: moveFormulasVertical var(--formula-speed-slow) linear infinite;
  animation-delay: -30s;
  z-index: 25;
}

/* Columna vertical 7 */
.formula-layer-v7 {
  left: 65%;
  font-size: 0.8rem;
  animation: moveFormulasVertical var(--formula-speed-fast) linear infinite;
  animation-delay: -45s;
  z-index: 26;
}

/* Columna vertical 8 */
.formula-layer-v8 {
  left: 75%;
  font-size: 1.0rem;
  animation: moveFormulasVertical var(--formula-speed-ultrafast) linear infinite;
  animation-delay: -5s;
  z-index: 27;
}

/* Columna vertical 9 */
.formula-layer-v9 {
  left: 85%;
  font-size: 0.85rem;
  animation: moveFormulasVertical var(--formula-speed-medium) linear infinite;
  animation-delay: -60s;
  z-index: 28;
}

/* Columna vertical 10 - Derecha */
.formula-layer-v10 {
  left: 95%;
  font-size: 0.9rem;
  animation: moveFormulasVertical var(--formula-speed-slow) linear infinite;
  animation-delay: -20s;
  z-index: 29;
}

/* Items individuales de fórmulas */
.formula-item {
  display: inline-block;
  margin-right: 4rem;
  transition: opacity 0.3s ease;
  font-feature-settings: "kern" 1;
  letter-spacing: 0.5px;
}

/* Fórmulas destacadas con mayor brillo */
.formula-highlight {
  color: var(--formula-color-bright);
  font-weight: 500;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Efectos de hover para debugging */
.quantitative-formulas-bg:hover .formula-layer {
  animation-play-state: paused;
}

/* Responsividad para móviles */
@media (max-width: 768px) {
  .formula-layer-1 {
    font-size: 1.2rem;
  }

  .formula-layer-2 {
    font-size: 1.0rem;
  }

  .formula-layer-3 {
    font-size: 0.85rem;
  }

  .formula-layer-4 {
    font-size: 0.95rem;
  }

  .formula-layer-5 {
    font-size: 0.75rem;
  }

  .formula-item {
    margin-right: 2rem;
  }
}

/* Modo reducido para mejor rendimiento */
.formulas-reduced-motion .formula-layer {
  animation-duration: calc(var(--formula-speed-slow) * 2);
}

/* Controles de debug */
.formulas-debug .formula-layer {
  border: 1px solid rgba(255, 0, 0, 0.3);
}

.formulas-debug .formula-item {
  background: rgba(0, 255, 0, 0.1);
}