/* ==========================================================================
   wave.css — Onda morada animada de fondo del hero
   Capas: blobs de luz (radial-gradient) + líneas SVG + flare.
   Solo decorativa (aria-hidden). Se anima con transform/opacity (GPU) y
   se DETIENE bajo prefers-reduced-motion.
   ========================================================================== */

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

/* ---- Blobs: nubes de luz que derivan lentamente ---- */
.hero__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  will-change: transform;
}

.hero__blob--1 {
  top: -10%;
  right: 6%;
  width: 48vw;
  height: 48vw;
  max-width: 720px;
  max-height: 720px;
  background: radial-gradient(circle at 50% 50%,
    rgba(122, 38, 168, 0.95), rgba(122, 38, 168, 0) 65%);
  animation: blob-drift-1 22s ease-in-out infinite alternate;
}

.hero__blob--2 {
  bottom: -20%;
  right: 22%;
  width: 42vw;
  height: 42vw;
  max-width: 620px;
  max-height: 620px;
  background: radial-gradient(circle at 50% 50%,
    rgba(82, 51, 254, 0.9), rgba(82, 51, 254, 0) 64%);
  animation: blob-drift-2 26s ease-in-out infinite alternate;
}

.hero__blob--3 {
  top: 20%;
  right: 38%;
  width: 30vw;
  height: 30vw;
  max-width: 420px;
  max-height: 420px;
  background: radial-gradient(circle at 50% 50%,
    rgba(160, 70, 220, 0.7), rgba(160, 70, 220, 0) 62%);
  animation: blob-drift-3 30s ease-in-out infinite alternate;
}

/* ---- Flare: destello brillante arriba a la derecha ---- */
.hero__flare {
  position: absolute;
  top: 8%;
  right: 12%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 252, 239, 0.9), rgba(255, 252, 239, 0) 60%);
  filter: blur(8px);
  opacity: 0.85;
  animation: flare-pulse 6s ease-in-out infinite;
}

/* ---- Líneas SVG: ribetes que se ondulan ---- */
.hero__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__lines-group {
  transform-origin: center;
  animation: lines-undulate 14s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---- Keyframes ---- */
@keyframes blob-drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-6%, 8%, 0) scale(1.12); }
}
@keyframes blob-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(8%, -6%, 0) scale(0.92); }
}
@keyframes blob-drift-3 {
  from { transform: translate3d(0, 0, 0) scale(0.95); }
  to   { transform: translate3d(-10%, -8%, 0) scale(1.1); }
}
@keyframes flare-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%      { opacity: 0.95; transform: scale(1.08); }
}
@keyframes lines-undulate {
  from { transform: translateY(-2.5%) scaleY(0.98); }
  to   { transform: translateY(2.5%) scaleY(1.04); }
}

/* ---- Accesibilidad: sin movimiento => onda estática ---- */
@media (prefers-reduced-motion: reduce) {
  .hero__blob,
  .hero__flare,
  .hero__lines-group {
    animation: none;
  }
}