/* Scroll reveals — activadas vía IntersectionObserver en js/animations.js */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger en grids de Solución y Beneficios */
.solucion-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.solucion-grid .reveal:nth-child(2) { transition-delay: 120ms; }
.solucion-grid .reveal:nth-child(3) { transition-delay: 240ms; }
.solucion-grid .reveal:nth-child(4) { transition-delay: 360ms; }

.beneficios-grid .reveal:nth-child(1) { transition-delay: 0ms; }
.beneficios-grid .reveal:nth-child(2) { transition-delay: 120ms; }
.beneficios-grid .reveal:nth-child(3) { transition-delay: 240ms; }
.beneficios-grid .reveal:nth-child(4) { transition-delay: 360ms; }

/* Entrada del hero — fade + slide up, no depende de scroll */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-animate > * {
  opacity: 0;
  animation: fadeSlideUp 700ms ease forwards;
}

.hero-animate > *:nth-child(1) { animation-delay: 100ms; }
.hero-animate > *:nth-child(2) { animation-delay: 250ms; }
.hero-animate > *:nth-child(3) { animation-delay: 400ms; }
.hero-animate > *:nth-child(4) { animation-delay: 550ms; }

/* Flotación sutil y continua del contenedor de la imagen del hero */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

/* fadeSlideUp (entrada, una sola vez) y float (loop) animan ambas "transform";
   se secuencian para que no corran al mismo tiempo sobre la misma propiedad:
   float arranca justo cuando fadeSlideUp termina (350ms delay + 800ms = 1150ms). */
.hero-animate-media {
  opacity: 0;
  animation:
    fadeSlideUp 800ms ease 350ms forwards,
    float 4s ease-in-out 1150ms infinite;
}