/* =========================================================
   water-pipe.css — tubería metálica decorativa + estanque del footer
   Módulo aislado. Markup: .wp (SVG a pantalla completa) en el <body>
   y .wp-pond dentro del <footer>. Lógica: js/water-pipe.js.
   No depende de styles.css salvo por la paleta de marca.

   La tubería va vacía (solo el tubo). El estanque del footer sí se llena
   de agua durante el último tramo del scroll.

   En móvil (< 900px) no hay tubería ni chorro: el JS marca .wp con [hidden]
   y aquí se oculta el vertido. Solo queda el estanque del footer.

   Variables que escribe el JS en :root / .wp-pour
     --wp-pond-fill   0 → 1   nivel del estanque (último tramo del scroll)
     --wp-mouth-x     px      X de la boca de la tubería sobre el footer
   ========================================================= */

:root {
  --wp-pond-fill: 0;
}

/* =========================================================
   1. Capa de la tubería (overlay a lo largo del documento)
   ========================================================= */
.wp {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 5;                 /* sobre el contenido, bajo la cabecera sticky (z 50) */
  pointer-events: none;       /* nunca captura clics ni tapa enlaces */
  overflow: hidden;           /* candado anti-scroll horizontal */
}
.wp[hidden] {              /* móvil: el JS desactiva la tubería */
  display: none;
}
.wp__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ---------- Tubo metálico (capas concéntricas del MISMO path) ----------
   shadow  sombra difusa proyectada
   rim     aro oscuro exterior (borde del cilindro)
   body    acero medio-oscuro
   body2   acero claro (curva del cilindro hacia la luz)
   hi      banda de luz, desplazada arriba-izquierda
   spec    filo especular fino
   refl    reflejo tenue en el lado en sombra (abajo-derecha)
   Todas comparten el mismo trazado redondeado → los codos curvan sin costuras. */
.wp__tube-shadow,
.wp__tube-rim,
.wp__tube-body,
.wp__tube-body2,
.wp__tube-hi,
.wp__tube-spec,
.wp__tube-refl {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wp__tube-shadow {
  stroke: #0a1015;
  stroke-width: 40;
  opacity: .3;
  filter: blur(7px);
  transform: translate(6px, 8px);
}
.wp__tube-rim   { stroke: #1a1f25; stroke-width: 34; }
.wp__tube-body  { stroke: #5c6772; stroke-width: 30; }
.wp__tube-body2 { stroke: #97a3ad; stroke-width: 21; }
.wp__tube-hi {
  stroke: #eef2f5;
  stroke-width: 8;
  transform: translate(-5px, -5px);
  filter: blur(1px);
}
.wp__tube-spec {
  stroke: #fff;
  stroke-width: 2.4;
  transform: translate(-8px, -8px);
  opacity: .9;
}
.wp__tube-refl {
  stroke: #c3ccd3;
  stroke-width: 3;
  transform: translate(7px, 7px);
  opacity: .4;
}

/* ---------- Tuercas / acoples de unión a los lados de cada codo ---------- */
.wp__nut-ring {
  fill: url(#wpNut);
  stroke: #14191f;
  stroke-width: 1.5;
}
.wp__nut-band {
  stroke: rgba(0, 0, 0, .32);
  stroke-width: 2.4;
  stroke-linecap: round;
}
.wp__nut-hi {
  stroke: rgba(255, 255, 255, .7);
  stroke-width: 1.4;
}

/* ---------- Remate final del tubo (sobre el footer) ----------
   shadow  sombra corta bajo el corte
   bore    hueco interior del tubo (penumbra)
   lip     canto del tubo: tapa el casquete y deja el final plano
   lip2    pared cercana del corte, la media luna que lo cierra
   glint   filo de luz del canto interior
   Los inserta js/water-pipe.js; el remate siempre se dibuja en vertical. */
.wp__mouth-shadow {
  fill: #060c12;
  opacity: .3;
  filter: blur(5px);
}
.wp__mouth-bore { fill: url(#wpBore); }
.wp__mouth-lip { fill: url(#wpMouthLip); }
.wp__mouth-lip2 {
  fill: url(#wpMouthNear);
  stroke: #0b1015;
  stroke-width: 1;
}
.wp__mouth-glint {
  fill: none;
  stroke: rgba(255, 255, 255, .45);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ---------- Escritorio: tubo más grueso ---------- */
@media (min-width: 900px) {
  .wp__tube-shadow { stroke-width: 46; }
  .wp__tube-rim    { stroke-width: 38; }
  .wp__tube-body   { stroke-width: 33; }
  .wp__tube-body2  { stroke-width: 23; }
  .wp__tube-hi     { stroke-width: 9; }
  .wp__tube-spec   { stroke-width: 2.6; }
}

/* ---------- Trazado fino (.wp--lite, reservado): tubo delgado ---------- */
.wp--lite .wp__tube-shadow { stroke-width: 22; }
.wp--lite .wp__tube-rim    { stroke-width: 17; }
.wp--lite .wp__tube-body   { stroke-width: 14; }
.wp--lite .wp__tube-body2  { stroke-width: 9; }
.wp--lite .wp__tube-hi     { stroke-width: 3; transform: translate(-2.5px, -2.5px); }
.wp--lite .wp__tube-spec   { stroke-width: 1.4; transform: translate(-4px, -4px); }
.wp--lite .wp__tube-refl   { display: none; }

/* Remate en móvil: la pieza va a escala 0.55, los trazos también */
.wp--lite .wp__mouth-lip2 { stroke-width: .7; }
.wp--lite .wp__mouth-glint { stroke-width: .9; }
.wp--lite .wp__mouth-shadow { filter: blur(2.5px); }

/* =========================================================
   3. Estanque del footer
   ========================================================= */
.site-footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.site-footer > .wrap {
  position: relative;
  z-index: 1;                 /* el contenido del pie, por encima del agua */
}

.wp-pond {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Cuerpo del agua: crece desde abajo según --wp-pond-fill */
.wp-pond__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--wp-pond-fill, 0) * 100%);
  overflow: hidden;
  will-change: height;
  background: linear-gradient(
    180deg,
    rgba(126, 224, 226, .62) 0%,
    rgba(70, 178, 182, .52) 16%,
    rgba(42, 118, 165, .5) 48%,
    rgba(13, 34, 52, .72) 100%
  );
  box-shadow: inset 0 30px 40px -20px rgba(210, 250, 250, .35);
}

/* Superficie: 3 ondas senoidales a distinta velocidad + bamboleo vertical */
.wp-pond__surface {
  position: absolute;
  left: 0;
  top: -26px;
  width: 200%;
  height: 52px;
  overflow: visible;
  animation: wp-bob 6s ease-in-out infinite alternate;
}
.wp-pond__wave { will-change: transform; }
.wp-pond__wave--1 { fill: rgba(255, 255, 255, .22); animation: wp-wave 13s linear infinite; }
.wp-pond__wave--2 { fill: rgba(150, 214, 224, .3);  animation: wp-wave 19s linear infinite reverse; }
.wp-pond__wave--3 { fill: rgba(12, 34, 52, .38);    animation: wp-wave 27s linear infinite; }
@keyframes wp-wave { to { transform: translateX(-1200px); } }
@keyframes wp-bob  { from { transform: translateY(1px); } to { transform: translateY(-5px); } }

/* Banda de brillo justo bajo la superficie */
.wp-pond__glow {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 46px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .05) 70%, transparent);
  filter: blur(2px);
}

/* Cáusticas: manchas de luz que derivan lentamente */
.wp-pond__caustics {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 26% at 22% 22%, rgba(185, 240, 240, .14), transparent 70%),
    radial-gradient(42% 34% at 74% 48%, rgba(90, 150, 190, .16), transparent 72%),
    radial-gradient(30% 24% at 52% 82%, rgba(150, 220, 225, .12), transparent 70%);
  mix-blend-mode: screen;
  animation: wp-caustics 18s ease-in-out infinite alternate;
}
@keyframes wp-caustics {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0)  scale(1.08); }
}

/* Burbujas ascendentes del estanque */
.wp-pond__bubble {
  position: absolute;
  bottom: 4%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85), rgba(255, 255, 255, .12));
  opacity: 0;
  animation: wp-pond-bubble 5.5s ease-in infinite;
}
.wp-pond__bubble:nth-of-type(1) { left: 16%; width: 5px; height: 5px; animation-delay: -.4s;  animation-duration: 6s; }
.wp-pond__bubble:nth-of-type(2) { left: 39%; animation-delay: -2.6s; animation-duration: 5s; }
.wp-pond__bubble:nth-of-type(3) { left: 63%; width: 4px; height: 4px; animation-delay: -1.4s; animation-duration: 6.6s; }
.wp-pond__bubble:nth-of-type(4) { left: 84%; width: 7px; height: 7px; animation-delay: -3.8s; animation-duration: 4.6s; }
@keyframes wp-pond-bubble {
  0%   { transform: translateY(0)      scale(.5); opacity: 0; }
  18%  { opacity: .7; }
  100% { transform: translateY(-150px) scale(1);  opacity: 0; }
}

/* ---------- Vertido: chorro que cae de la boca de la tubería ---------- */
.wp-pour {
  position: absolute;
  inset: 0;
  left: var(--wp-mouth-x, 24px);
  overflow: visible;
  --wp-stream-w: 18px;              /* calibrado al hueco del aro de boca */
}
/* Móvil: sin tubería → tampoco hay chorro cayendo de la boca. */
@media (max-width: 899px) {
  .wp-pour { display: none; }
}
.wp-pour__stream {
  position: absolute;
  top: -6px;
  left: 0;
  width: var(--wp-stream-w);
  margin-left: calc(var(--wp-stream-w) / -2);
  height: max(40px, calc((1 - var(--wp-pond-fill, 0)) * 100%));
  border-radius: 45% 45% 4px 4px / 14px 14px 4px 4px;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .92) 40%, rgba(160, 214, 224, .7) 62%, rgba(255, 255, 255, .1)),
    linear-gradient(180deg, #d9f3f6, #7ec4d2);
  box-shadow: 0 0 10px rgba(160, 222, 236, .6);
  filter: blur(.5px);
}
.wp-pour__stream::before {          /* espuma/burbujas cayendo por dentro */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .4) 0 1.5px, transparent 1.5px 14px);
  opacity: .5;
}
.wp-pour__splash {
  position: absolute;
  left: 0;
  top: calc((1 - var(--wp-pond-fill, 0)) * 100%);
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .75), rgba(198, 238, 243, .25) 60%, transparent);
}

.site-footer.is-pouring .wp-pour__stream {
  opacity: .95;
  animation: wp-stream .5s ease-in-out infinite;
}
.site-footer.is-pouring .wp-pour__stream::before {
  animation: wp-stream-foam .35s linear infinite;
}
.site-footer.is-pouring .wp-pour__splash {
  opacity: 1;
  animation: wp-splash 1.8s ease-out infinite;
}
@keyframes wp-stream {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(.72); }
}
@keyframes wp-stream-foam { to { transform: translateY(11px); } }
@keyframes wp-splash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5), 0 0 0 0 rgba(255, 255, 255, .28); }
  100% { box-shadow: 0 0 0 24px rgba(255, 255, 255, 0), 0 0 0 42px rgba(255, 255, 255, 0); }
}

/* =========================================================
   4. Accesibilidad: movimiento reducido
   El JS ya fija --wp-pond-fill a 1 (estanque lleno, estático).
   Aquí retiramos oleaje, cáusticas, burbujas y vertido animado.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .wp-pond__surface,
  .wp-pond__wave--1,
  .wp-pond__wave--2,
  .wp-pond__wave--3,
  .wp-pond__caustics,
  .wp-pond__bubble { animation: none; }

  .site-footer.is-pouring .wp-pour__stream,
  .site-footer.is-pouring .wp-pour__stream::before,
  .site-footer.is-pouring .wp-pour__splash { animation: none; }
  .wp-pour__stream { opacity: .55; }
  .wp-pour__splash { opacity: 0; }
}