/* ==========================================================================
   SALEPERU.PE - ANIMACIONES Y TRANSICIONES PREMIUM
   ========================================================================== */

/* Clases de Entrada de Carga de Contenido */
.fade-in {
  animation: fadeIn 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-up {
  animation: slideUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.slide-down {
  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Efectos de Hover Suave */
.hover-scale {
  transition: transform var(--transition-fast) ease-out;
}

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

/* ==========================================================================
   DECLARACIÓN DE KEYFRAMES
   ========================================================================== */

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

/* Micro-animación para el swipe-down instructivo en el visor de historias */
@keyframes swipeDownHint {
  0% { transform: translateY(0); opacity: 0.3; }
  50% { transform: translateY(8px); opacity: 0.9; }
  100% { transform: translateY(0); opacity: 0.3; }
}

.swipe-hint-animation {
  animation: swipeDownHint 2s infinite ease-in-out;
}