/* Lago decorativo al pie de las pantallas de ingreso (/login, /aliado, /portal).
   Dibujado con WebGL (public/js/agua-login.js); si no hay WebGL se muestra el
   respaldo en CSS. Todo es decorativo: aria-hidden y sin eventos de puntero. */

.agua-login {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: clamp(200px, 36vh, 380px);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Se funde con el fondo de la página en el borde superior. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
}
@media (max-width: 640px) { .agua-login { height: clamp(150px, 26vh, 240px); } }
.agua-login canvas { width: 100%; height: 100%; display: block; }

/* El contenido de la página queda por encima del agua. */
body:has(.agua-login) > *:not(.agua-login):not(script):not(style):not(link) { position: relative; z-index: 1; }

/* Respaldo sin WebGL: tres capas de olas que se desplazan a distinta velocidad. */
.agua-login.sin-gl {
  background: linear-gradient(to bottom, rgba(125,211,252,0) 0%, rgba(56,152,189,.55) 30%, rgba(14,90,128,.85) 100%);
}
.agua-login.sin-gl .ola {
  position: absolute; left: 0; width: 200%; height: 90px; background-repeat: repeat-x; background-size: 50% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 90' preserveAspectRatio='none'><path d='M0 45 Q75 5 150 45 T300 45 T450 45 T600 45 V90 H0Z' fill='white' fill-opacity='.22'/></svg>");
  animation: agua-ola 14s linear infinite;
}
.agua-login.sin-gl .ola:nth-child(1) { bottom: 40%; animation-duration: 18s; opacity: .8; }
.agua-login.sin-gl .ola:nth-child(2) { bottom: 22%; animation-duration: 12s; animation-direction: reverse; opacity: .9; }
.agua-login.sin-gl .ola:nth-child(3) { bottom: 4%;  animation-duration: 8s;  opacity: 1; }
@keyframes agua-ola { to { transform: translateX(-50%); } }

/* La tarjeta del formulario se mece suavemente, como si flotara. */
.agua-flota { animation: agua-flota 7s ease-in-out infinite; will-change: transform; }
@keyframes agua-flota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-5px) rotate(.12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .agua-flota { animation: none; }
  .agua-login.sin-gl .ola { animation: none; }
}