/* animations.css: shared motion utilities.
   Component keyframes (hero name, WhatsApp pulse/bounce/typing, menu fade, skeleton shimmer)
   live next to their component; this file holds the cross-cutting pieces. */

/* Skeleton shimmer used by loading cards (RecipeCard/ProductCard/PlanTotal on the live site) */
@keyframes ffj-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-dark-beige) 25%, var(--color-beige) 50%, var(--color-dark-beige) 75%);
  background-size: 200% 100%;
  animation: ffj-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--ffj-radius-lg);
}

/* Shine sweep used on highlighted image cards ("Más económico") */
@keyframes ffj-shine {
  0%, 100% { background-position-x: 0; }
  50% { background-position-x: 100%; }
}

/* Spinner rotation */
@keyframes ffj-rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(1turn); }
}

/* Toast pop-in (react-hot-toast on the live site) */
@keyframes ffj-toast-in {
  0% { transform: scale(0.6); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

/* Note: the live site has no scroll-reveal animations; sections render statically.
   Motion is concentrated in the header, hero name, quality reveal, carousels, menus and widgets. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}