/* ==========================================================================
   animations css — resolve.uy
   efectos visuales, transiciones y animaciones al scrollear
   ========================================================================== */

/* ==========================================================================
   fade in / reveal animations (las controla el intersectionobserver)
   ========================================================================== */

/* estado inicial — elemento oculto */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* estado activo — elemento visible */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* variantes de direccion */
.reveal--left {
  transform: translateX(-30px);
}

.reveal--left.active {
  transform: translateX(0);
}

.reveal--right {
  transform: translateX(30px);
}

.reveal--right.active {
  transform: translateX(0);
}

.reveal--scale {
  transform: scale(0.95);
}

.reveal--scale.active {
  transform: scale(1);
}

/* delays escalonados para los grids */
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }

/* ==========================================================================
   animaciones de flotacion (tarjetas decorativas del hero)
   ========================================================================== */

.float-animation {
  animation: float 6s ease-in-out infinite;
}

.float-animation--delay {
  animation-delay: -3s;
}

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

/* ==========================================================================
   pulso suave (para indicadores, badges, etc)
   ========================================================================== */

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ==========================================================================
   gradiente animado (para fondos hero y similares)
   ========================================================================== */

.gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==========================================================================
   shimmer (efecto de carga / brillo sutil)
   ========================================================================== */

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ==========================================================================
   counter / number animation helper
   ========================================================================== */

.count-up {
  display: inline-block;
}

/* ==========================================================================
   hover glow (brillo sutil en hover para elementos interactivos)
   ========================================================================== */

.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(37, 99, 235, 0.15);
}