/* ============================================================
   LAYOUT — Wave Background
   Tres capas SVG en la parte inferior del viewport, creando
   profundidad tipo océano: trasera suave, media intermedia,
   delantera pronunciada y asimétrica.
   Animación horizontal en loop via GSAP (waves_controller.js).
   ============================================================ */

/* ── Contenedor fijo ── */
.wave-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Capas base ── */
/* width: 200% — el SVG duplicado permite loop sin saltos.
   GSAP anima xPercent ±50 (= ±100vw) en loop continuo.
   Cada capa es una cinta fina posicionada a distinta altura:
   back (cinta lejana) arriba, mid (intermedia) a media altura,
   front (relleno sólido) pegado al fondo. */
.wave-layer {
  position: absolute;
  left: 0;
  width: 200%;
  will-change: transform;
}

/* Todas las capas anclan en bottom:0 y se superponen.
   Front (encima) tapa a mid, mid tapa a back.
   Los fills van desde la cresta hacia abajo en cada capa,
   creando una pila continua sin gaps. */
.wave-layer-back  { height: 500px; bottom: 0; }
.wave-layer-mid   { height: 360px; bottom: 0; }
.wave-layer-front { height: 240px; bottom: 0; }

.wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Colores — opacidad progresiva: más atrás = más tenue ── */
/* Profundidad: back casi invisible, front bien definida */
.wave-back  { fill: var(--wave-back-color);  }
.wave-mid   { fill: var(--wave-mid-color);   }
.wave-front { fill: var(--wave-front-color); }

/* ── Overlay — difumina hacia arriba para integrar las olas ── */
.wave-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-bg)             0%,
    var(--color-bg)            42%,
    rgba(248, 247, 245, 0.88)  58%,
    rgba(248, 247, 245, 0.55)  72%,
    rgba(248, 247, 245, 0.22)  88%,
    rgba(248, 247, 245, 0.00) 100%
  );
}

[data-theme="dark"] .wave-overlay {
  background: linear-gradient(
    to bottom,
    var(--color-bg)           0%,
    var(--color-bg)          42%,
    rgba(23, 26, 31, 0.90)   58%,
    rgba(23, 26, 31, 0.60)   72%,
    rgba(23, 26, 31, 0.25)   88%,
    rgba(23, 26, 31, 0.00)  100%
  );
}

/* ── Movimiento reducido ── */
@media (prefers-reduced-motion: reduce) {
  .wave-layer { animation: none !important; transform: none !important; }
}