/* ============================================
   ANIMACIONES GLOBALES
   ============================================ */

/* ---------- Keyframes ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes fade-left {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes slide-down {
  from { opacity: 0; max-height: 0;     transform: translateY(-10px); }
  to   { opacity: 1; max-height: 500px; transform: translateY(0); }
}

@keyframes slide-up {
  from { opacity: 1; max-height: 500px; transform: translateY(0); }
  to   { opacity: 0; max-height: 0;     transform: translateY(-10px); }
}

/* ---------- Clases de entrada (animation) ---------- */
.fade-in    { animation: fade-in    1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.fade-up    { animation: fade-up    1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.fade-down  { animation: fade-down  1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.fade-left  { animation: fade-left  1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.fade-right { animation: fade-right 1400ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.scale-in   { animation: scale-in   1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
.float      { animation: float      4500ms cubic-bezier(0.45, 0, 0.55, 1) infinite; will-change: transform; }
.pulse-slow { animation: pulse-slow 3500ms cubic-bezier(0.4, 0, 0.6, 1)   infinite; }
.spin       { animation: spin       1000ms linear infinite; }

/* ---------- Shimmer (skeleton loaders) ---------- */
.shimmer {
  background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
  background-size: 200% 100%;
  animation: shimmer 1500ms linear infinite;
}

/* ---------- Scroll-triggered (añadir .visible con IntersectionObserver) ---------- */
.scroll-fade-up    { opacity: 0; transform: translateY(30px);  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-fade-down  { opacity: 0; transform: translateY(-30px); transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-fade-left  { opacity: 0; transform: translateX(30px);  transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-fade-right { opacity: 0; transform: translateX(-30px); transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-scale-in   { opacity: 0; transform: scale(0.95);       transition: opacity 1200ms cubic-bezier(0.16, 1, 0.3, 1), transform 1200ms cubic-bezier(0.16, 1, 0.3, 1); }

.scroll-fade-up.visible    { opacity: 1; transform: translateY(0); }
.scroll-fade-down.visible  { opacity: 1; transform: translateY(0); }
.scroll-fade-left.visible  { opacity: 1; transform: translateX(0); }
.scroll-fade-right.visible { opacity: 1; transform: translateX(0); }
.scroll-scale-in.visible   { opacity: 1; transform: scale(1); }

/* ---------- Stagger delays (aplica a transition y animation) ---------- */
.stagger-1 { transition-delay: 100ms; animation-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; animation-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; animation-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; animation-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; animation-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; animation-delay: 600ms; }
.stagger-7 { transition-delay: 700ms; animation-delay: 700ms; }
.stagger-8 { transition-delay: 800ms; animation-delay: 800ms; }
.stagger-9 { transition-delay: 900ms; animation-delay: 900ms; }

/* ---------- Accesibilidad: reduce el movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Asegura que los elementos scroll-triggered queden visibles */
  .scroll-fade-up,
  .scroll-fade-down,
  .scroll-fade-left,
  .scroll-fade-right,
  .scroll-scale-in {
    opacity: 1;
    transform: none;
  }
}