/* Animaciones y keyframes */

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wave-flow {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes bubble-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.55;
  }
  50% {
    transform: translate(14px, -55vh);
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translate(-10px, -115vh);
    opacity: 0;
  }
}

@keyframes swim-across {
  0% {
    transform: translateX(-15vw) scaleX(1);
  }
  49% {
    transform: translateX(115vw) scaleX(1);
  }
  50% {
    transform: translateX(115vw) scaleX(-1);
  }
  99% {
    transform: translateX(-15vw) scaleX(-1);
  }
  100% {
    transform: translateX(-15vw) scaleX(1);
  }
}

@keyframes spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-14px);
  }
}

@keyframes bounce-down {
  0%,
  100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 10px);
  }
}

.hero__scroll-indicator {
  animation: bounce-down 1.8s ease-in-out infinite;
}

/* Scroll reveal: estado inicial + estado visible (activado por IntersectionObserver en main.js) */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}