/* =============================================================
   Banner glow — movimiento sutil + iluminación en hover.
   Reutilizable: se aplica como clase extra a cualquier sección
   con fondo en gradient (.page-hero, .cta-banner, etc.).
   ============================================================= */

.banner-glow {
  position: relative;
  background-size: 100% 100%;
  background-position: 0% 50%;
  /* 1) arranca con el gradiente tal cual (100% 100%) ~0.6s,
     2) transición larga y suave (ease-in-out) a 200% 200%,
     3) entra al loop infinito desplazándose de lado a lado sin saltos. */
  animation:
    banner-glow-intro 6s cubic-bezier(.5, 0, .2, 1) .6s forwards,
    banner-glow-shift 32s ease-in-out 6.6s infinite;
  overflow: hidden;
  isolation: isolate;
}

/* Capa de iluminación — aparece al pasar el cursor */
.banner-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--bg-mx, 50%) var(--bg-my, 50%),
    rgba(255, 240, 220, .22) 0%,
    rgba(255, 220, 190, .10) 28%,
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
.banner-glow:hover::after { opacity: 1; }

/* Asegura que el contenido quede encima de la capa de glow */
.banner-glow > * { position: relative; z-index: 1; }

@keyframes banner-glow-intro {
  from { background-size: 100% 100%; background-position: 0% 50%; }
  to   { background-size: 200% 200%; background-position: 0% 50%; }
}
@keyframes banner-glow-shift {
  0%, 100% { background-size: 200% 200%; background-position: 0%   50%; }
  50%      { background-size: 200% 200%; background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-glow { animation: none !important; background-size: 100% 100% !important; }
  .banner-glow:hover::after { opacity: .5; }
}