/* ============================================================
   IBIZZI · animations.css
   Animaciones sutiles y skeleton loading.
   Todas las animaciones respetan prefers-reduced-motion (reset.css)
   ============================================================ */

/* ---------- Keyframes ---------- */

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

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

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

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

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

/* ---------- Utilidades ---------- */

.anim-fade      { animation: fadeIn    var(--dur-slow) var(--ease-out) both; }
.anim-fade-up   { animation: fadeInUp  var(--dur-slow) var(--ease-out) both; }
.anim-fade-down { animation: fadeInDown var(--dur-slow) var(--ease-out) both; }

/* Delays escalonados (uso en grillas de productos, categorías) */
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }

/* ---------- Skeleton loading ---------- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-card) 0%,
    #383838 50%,
    var(--color-bg-card) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.4s var(--ease-in-out) infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 12px;
  width: 100%;
  margin-block: 4px;
}
.skeleton-text.short { width: 60%; }

.skeleton-image {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* ---------- Spinner ---------- */

.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text-primary);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}