/* ==========================================================
   Hero background animation  (solo el fondo, sin tocar el texto)
   1) Cambiá --hero-img por la ruta de tu imagen
   2) El contenedor padre (tu hero) debe tener position: relative
   ========================================================== */

.hero-bg {
  --hero-img: url('img/hero-home.jpg');   /* <-- RUTA DE TU IMAGEN */
  --hero-pos: right center;          /* donde queda el motivo principal */
  /* Zona donde actuan el brillo y el barrido: centrada en la cara (x%, y%). */
  --fx-mask: radial-gradient(ellipse 25% 52% at 75% 50%, #000 32%, transparent 100%);
  --mx: 0;                           /* los setea el JS (-1 a 1) */
  --my: 0;

  position: absolute;
  inset: 0;
  z-index: 0;                        /* tu texto/botones deben tener z-index >= 1 */
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: hb-fadein 1.4s ease-out .1s forwards;
}

/* Parallax con mouse (lo mueve el JS) */
.hero-bg__parallax {
  position: absolute;
  inset: -4%;                        /* margen para que no se vean bordes al moverse */
  transform: translate3d(calc(var(--mx) * -16px), calc(var(--my) * -10px), 0);
  will-change: transform;
}

/* "Respiración" lenta de toda la escena */
.hero-bg__breathe {
  position: absolute;
  inset: 0;
  transform-origin: 80% 45%;
  animation: hb-breathe 20s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-bg__layer {
  position: absolute;
  inset: 0;
  background: var(--hero-img) var(--hero-pos) / cover no-repeat;
}

/* ---------- Motivo principal: brillo y barrido de luz ---------- */
.hero-bg__right {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--fx-mask);
          mask-image: var(--fx-mask);
}

/* Pulso: realza los tonos rosados del cerebro */
.hero-bg__glow {
  filter: saturate(2.4) contrast(1.25) brightness(1.12);
  mix-blend-mode: screen;
  opacity: 0;
  animation: hb-glow 6.5s ease-in-out infinite;
}

/* Barrido de luz que recorre el cerebro */
.hero-bg__sweep {
  filter: saturate(2.2) contrast(1.2) brightness(1.3);
  mix-blend-mode: screen;
  opacity: .85;
  -webkit-mask-image: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%);
          mask-image: linear-gradient(115deg, transparent 38%, #000 50%, transparent 62%);
  -webkit-mask-size: 260% 100%;
          mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: hb-sweep 10s ease-in-out infinite;
}

/* ---------- Lado izquierdo: patrón orgánico que "vive" ---------- */
.hero-bg__left {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 15%, transparent 58%);
          mask-image: linear-gradient(90deg, #000 15%, transparent 58%);
}
.hero-bg__drift {
  opacity: .5;
  mix-blend-mode: soft-light;
  animation: hb-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* ---------- Keyframes ---------- */
@keyframes hb-fadein  { to { opacity: 1; } }

@keyframes hb-breathe {
  from { transform: scale(1)     translate3d(0, 0, 0); }
  to   { transform: scale(1.05)  translate3d(-6px, -4px, 0); }
}

@keyframes hb-glow {
  0%, 100% { opacity: 0;   }
  50%      { opacity: .5; }
}

@keyframes hb-sweep {
  0%   { -webkit-mask-position: 120% 0; mask-position: 120% 0; opacity: 0;   }
  15%  { opacity: .85; }
  70%  { opacity: .85; }
  100% { -webkit-mask-position: -20% 0; mask-position: -20% 0; opacity: 0;   }
}

@keyframes hb-drift {
  from { transform: translate3d(-10px,  6px, 0) scale(1.04); }
  to   { transform: translate3d( 12px, -8px, 0) scale(1.07); }
}

/* Pausa cuando el hero no está visible (lo controla el JS) */
.hero-bg.is-paused *,
.hero-bg.is-paused { animation-play-state: paused !important; }

/* Accesibilidad: sin movimiento si el usuario lo pidió */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-bg * { animation: none !important; }
  .hero-bg { opacity: 1; }
  .hero-bg__glow, .hero-bg__sweep { display: none; }
}

/* Mobile: menos efectos para cuidar batería */
@media (max-width: 768px) {
  .hero-bg__drift { display: none; }
  .hero-bg__sweep { display: none; }
}