/* =========================================================
   CLOUD-TECNOLOGIES — animaciones.css
   Animaciones de scroll (IntersectionObserver) con stagger
   ========================================================= */

/* =========================================================
   ESTADO INICIAL — todos los elementos animables
   ========================================================= */
.hidden2 {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   1. FADE IN LEFT — para iframes y bloques multimedia
   ========================================================= */
@keyframes fadeInLeft2 {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in-left-2 {
  opacity: 0;
}

.scroll-section.is-visible .fade-in-left-2 {
  animation: fadeInLeft2 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =========================================================
   2. FADE IN RIGHT — para elementos derecha
   ========================================================= */
@keyframes fadeInRight2 {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in-right-2 {
  opacity: 0;
}

.scroll-section.is-visible .fade-in-right-2 {
  animation: fadeInRight2 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =========================================================
   3. FADE IN LEFT — para video (distancia mayor)
   ========================================================= */
@keyframes fadeInLeftVideo {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fade-in-left-video {
  opacity: 0;
}

.scroll-section.is-visible .fade-in-left-video {
  animation: fadeInLeftVideo 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =========================================================
   4. FADE IN UP TEXT — para bloques de texto
   ========================================================= */
@keyframes fadeInUpText {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-in-up-text {
  opacity: 0;
}

.scroll-section.is-visible .fade-in-up-text {
  animation: fadeInUpText 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 150ms;
}

/* =========================================================
   5. STAGGER — para grids de cards y listas
   ========================================================= */
.stagger-item {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-section.is-visible .stagger-item { opacity: 1; transform: translateY(0); }

.stagger-item:nth-child(1) { transition-delay:   0ms; }
.stagger-item:nth-child(2) { transition-delay: 100ms; }
.stagger-item:nth-child(3) { transition-delay: 200ms; }
.stagger-item:nth-child(4) { transition-delay: 300ms; }
.stagger-item:nth-child(5) { transition-delay: 400ms; }
.stagger-item:nth-child(6) { transition-delay: 500ms; }

/* =========================================================
   6. CLIP-PATH REVEAL — para títulos de sección
   ========================================================= */
@keyframes clipRevealLeft {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0%   0 0); opacity: 1; }
}

.clip-reveal {
  opacity: 0;
}

.scroll-section.is-visible .clip-reveal {
  animation: clipRevealLeft 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.clip-reveal-d1 { animation-delay: 100ms !important; }
.clip-reveal-d2 { animation-delay: 250ms !important; }
.clip-reveal-d3 { animation-delay: 400ms !important; }

/* =========================================================
   7. SCALE IN — para estadísticas y contadores
   ========================================================= */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

.scale-in {
  opacity: 0;
}

.scroll-section.is-visible .scale-in {
  animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* =========================================================
   8. SLIDE UP — variante más sutil para párrafos
   ========================================================= */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-up {
  opacity: 0;
}

.scroll-section.is-visible .slide-up {
  animation: slideUp 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 200ms;
}

/* =========================================================
   10. FADE IN UP BLUR — hero slides (carga inmediata, sin scroll)
   ========================================================= */
@keyframes fadeInUpBlur {
  from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0);   }
}

.fade-in-up-blur {
  animation: fadeInUpBlur 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* =========================================================
   11. STAGGER DELAYS — grids de estadísticas
   ========================================================= */
.stats-grid .scale-in:nth-child(1) { animation-delay:   0ms; }
.stats-grid .scale-in:nth-child(2) { animation-delay: 120ms; }
.stats-grid .scale-in:nth-child(3) { animation-delay: 240ms; }
.stats-grid .scale-in:nth-child(4) { animation-delay: 360ms; }

/* =========================================================
   9. PREFERS-REDUCED-MOTION — Accesibilidad
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .hidden2,
  .fade-in-left-2,
  .fade-in-right-2,
  .fade-in-left-video,
  .fade-in-up-text,
  .stagger-item,
  .clip-reveal,
  .scale-in,
  .slide-up,
  .fade-in-up-blur {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}