/**
 * @file: animations.css
 * @description: Keyframe Animations & Utilities (BEM)
 * @timing: Custom cubic-bezier for "expensive" feel
 */

:root {
  /* Webflow-like smooth easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =========================================
   0. AMBIENT VISUALS (FONDOS AMBIENTALES)
   ========================================= */

.orb {
  filter: blur(28px);
  opacity: 0.9;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* =========================================
   1. FLOATY (Elementos principales)
   ========================================= */

/*  Definición única de flotación vertical.
Usa translate3d para forzar layer promotion (GPU).
 */
@keyframes float-vertical {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    /* Usamos una variable con fallback de -10px */
    transform: translate3d(0, var(--float-dist, -10px), 0);
  }
}

/* Clase Utilitaria Maestra 
Se puede sobrescribir --float-time y --float-dist en línea o vía clases modificadoras
 */

.animate-float {
  /* Default: 6s de duración, easing suave */
  animation: float-vertical var(--float-time, 6s) ease-in-out infinite;

  /* Performance hint para el navegador */
  will-change: transform;
}

/* Modificadores de Tiempo (Optional Helpers) */
.animate-float--slow {
  --float-time: 10s;
}
.animate-float--fast {
  --float-time: 3s;
}

/* =========================================
   2. ACCESIBILIDAD UNIVERSAL (Compliance)
   ========================================= */

/* Si el usuario pide reducir movimiento, apagamos TODO aquí. */

@media (prefers-reduced-motion: reduce) {
  .animate-float {
    animation: none !important;
    transform: none !important;
  }
}

/* -----------------------------------------------------------
           2. ANIMACIONES CSS (SCROLL REVEAL)
        ----------------------------------------------------------- */

/* Clase base para elementos ocultos */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

/* Clase activa cuando entra en el viewport (agregada por JS) */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   5. SLIDE UP (Elementos principales)
   ========================================= */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideUp {
  animation: slideUp 600ms var(--ease-out-expo) forwards;
}

/* =========================================
   3. SCALE IN (Imágenes y Cards)
   ========================================= */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-scaleIn {
  animation: scaleIn 500ms var(--ease-out-expo) forwards;
}

/* =========================================
   3. FADE IN UP (Preferible en Hero & Section)
   ========================================= */

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  opacity: 0; /* Inicialmente invisible */
  transform: translateY(50px); /* Inicialmente desplazado hacia abajo */
  animation: fadeInUp 0.8s ease forwards; /* Animación de entrada */
}

/* =========================================
   4. HOVER SCALE & SHADOW (Interacciones)
   ========================================= */
/* Utility class para aplicar en elementos interactivos */
.animate-hover {
  transition: transform 300ms var(--ease-out-expo);
}

.animate-hover:hover {
  transform: scale(1.01);
}

.animate-shadow {
  transition: transform 300ms var(--ease-out-expo),
    box-shadow 300ms var(--ease-out-expo);
}

.animate-shadow:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

/* =========================================
   5. PULSE CUSTOM (CTAs)
   ========================================= */

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.animate-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulseCustom {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    /* Color primario */
    transform: scale(1);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(139, 92, 246, 0);
    transform: scale(1.02);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    transform: scale(1);
  }
}

.animate-pulseCustom {
  animation: pulseCustom 2000ms infinite;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* =========================================
   4. DELAYS PARA SECUENCIAS
   ========================================= */

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

.delay-400 {
  animation-delay: 0.4s;
}

.delay-500 {
  animation-delay: 0.5s;
}

.delay-1000 {
  animation-delay: 1s;
}