/* ============================================
   Animaciones de Transición Suaves
   ============================================ */

/* Variable CSS para duración personalizada */
:root {
  --animation-duration: 600ms;
  --animation-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   Estado inicial de las animaciones
   Solo aplicar opacity: 0 a elementos que NO tienen animate-visible
   ============================================ */

/* Fade Up - Aparece desde abajo hacia arriba */
.animate-fadeUp:not(.animate-visible) {
  opacity: 0 !important;
  transform: translateY(25px) !important;
}

.animate-fadeUp {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Fade In - Aparece con desvanecimiento */
.animate-fadeIn:not(.animate-visible) {
  opacity: 0 !important;
}

.animate-fadeIn {
  transition-property: opacity !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Fade Left - Aparece desde la derecha hacia la izquierda */
.animate-fadeLeft:not(.animate-visible) {
  opacity: 0 !important;
  transform: translateX(30px) !important;
}

.animate-fadeLeft {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Fade Right - Aparece desde la izquierda hacia la derecha */
.animate-fadeRight:not(.animate-visible) {
  opacity: 0 !important;
  transform: translateX(-30px) !important;
}

.animate-fadeRight {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Scale Up - Aparece con efecto de escala */
.animate-scaleUp:not(.animate-visible) {
  opacity: 0 !important;
  transform: scale(0.95) !important;
}

.animate-scaleUp {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Especificidad extra para .demos .item */
.demos .item.animate-scaleUp:not(.animate-visible) {
  opacity: 0 !important;
  transform: scale(0.95) !important;
}

.demos .item.animate-scaleUp {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Slide Up - Desliza desde abajo (más pronunciado) */
.animate-slideUp:not(.animate-visible) {
  opacity: 0 !important;
  transform: translateY(60px) !important;
}

.animate-slideUp {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Zoom In - Efecto zoom suave */
.animate-zoomIn:not(.animate-visible) {
  opacity: 0 !important;
  transform: scale(0.85) !important;
}

.animate-zoomIn {
  transition-property: opacity, transform !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* Blur In - Aparece con desenfoque */
.animate-blurIn:not(.animate-visible) {
  opacity: 0 !important;
  filter: blur(10px) !important;
}

.animate-blurIn {
  transition-property: opacity, filter !important;
  transition-duration: var(--animation-duration) !important;
  transition-timing-function: var(--animation-easing) !important;
}

/* ============================================
   Estado visible (cuando entra en viewport)
   ============================================ */

.animate-visible.animate-fadeUp,
.animate-visible.animate-slideUp {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.animate-visible.animate-fadeIn {
  opacity: 1 !important;
}

.animate-visible.animate-fadeLeft,
.animate-visible.animate-fadeRight {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.animate-visible.animate-scaleUp,
.animate-visible.animate-zoomIn {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Especificidad extra para .demos .item */
.demos .item.animate-visible.animate-scaleUp {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.animate-visible.animate-blurIn {
  opacity: 1 !important;
  filter: blur(0) !important;
}

/* ============================================
   Animaciones para items con delay escalonado
   ============================================ */

.animate-stagger > *:nth-child(1) { transition-delay: 0ms !important; }
.animate-stagger > *:nth-child(2) { transition-delay: 100ms !important; }
.animate-stagger > *:nth-child(3) { transition-delay: 200ms !important; }
.animate-stagger > *:nth-child(4) { transition-delay: 300ms !important; }
.animate-stagger > *:nth-child(5) { transition-delay: 400ms !important; }
.animate-stagger > *:nth-child(6) { transition-delay: 500ms !important; }
.animate-stagger > *:nth-child(7) { transition-delay: 600ms !important; }
.animate-stagger > *:nth-child(8) { transition-delay: 700ms !important; }
.animate-stagger > *:nth-child(9) { transition-delay: 800ms !important; }
.animate-stagger > *:nth-child(10) { transition-delay: 900ms !important; }

/* ============================================
   Hover effects mejorados
   ============================================ */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(96, 11, 86, 0.4);
}

.hover-scale {
  transition: transform 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ============================================
   Reducir animaciones si el usuario lo prefiere
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .animate-fadeUp,
  .animate-fadeIn,
  .animate-fadeLeft,
  .animate-fadeRight,
  .animate-scaleUp,
  .animate-slideUp,
  .animate-zoomIn,
  .animate-blurIn {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}