/* ════════════════════════════════════════════════════════════════════════
   You Name It — CANONICAL ANIMATION LIBRARY
   ════════════════════════════════════════════════════════════════════════

   This file is the single source of truth for all @keyframes used across
   the storefront and admin. It consolidates 72 duplicated/near-duplicate
   keyframes scattered across 9+ CSS files into 56 canonical definitions.

   RULES:
   • Every @keyframes below is referenced by name from other CSS files or JS.
   • Do NOT re-declare these keyframes in any other CSS file — reference by
     name instead. (The duplicate declarations have been removed from source.)
   • Reduced-motion handling lives in each consuming file's own
     `@media (prefers-reduced-motion: reduce)` block. This file only defines
     the keyframes themselves.
   • RTL-aware variants (slideInRtl, toastInRtl, inv-drawer-slide) are kept
     as distinct canonical names because their transform axes differ.
   • JS-driven animation `fadeUp` is preserved as a canonical name (used by
     store.js / utility reveal code) — do not rename.

   Load order: this file must load AFTER variables.css but it does not matter
   relative to other component files since @keyframes are globally scoped.
   ════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1. ENTRANCE — FADE + TRANSLATE (vertical)
   ──────────────────────────────────────────────────────────────────────── */

/* Generic fade-up. JS `fadeUp` references this name directly. */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Slightly larger fade-up for hero/section heads. */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Big hero fade-up (Shopify home system). */
@keyframes shFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Card entrance with larger scale + blur (premium stagger). */
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Small stagger entrance used in admin lists/widgets. */
@keyframes cardStagger {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Account / mobile card fade-in. */
@keyframes yni-card-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Account tab panel entrance. */
@keyframes yni-tab-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile card premium entrance. */
@keyframes mobileCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Auth card entrance (scale + lift). */
@keyframes yni-auth-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal slide-in (admin). */
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tracking result entrance. */
@keyframes trackingFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Generic view section entrance. */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Premium admin view entrance. */
@keyframes viewPremium {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Orders new-badge entrance. */
@keyframes ordersNewBadgeIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Chat / message bubble entrance. */
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cart line slide-in from left (LTR). */
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Cart line slide-in from right (RTL). */
@keyframes slideInRtl {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ────────────────────────────────────────────────────────────────────────
   2. ENTRANCE — SCALE / ZOOM / FLIP
   ──────────────────────────────────────────────────────────────────────── */

/* Shopify home scale-in. */
@keyframes shScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Cinematic hero content reveal (blur + scale + lift). */
@keyframes cinematicIn {
  from { opacity: 0; transform: translateY(28px) scale(0.98); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Cinematic hero visual reveal (deeper blur + scale). */
@keyframes cinematicVisual {
  from { opacity: 0; transform: scale(0.92) translateY(20px); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Home hero content reveal (storefront). */
@keyframes heroContentReveal {
  from { opacity: 0; transform: translateY(28px); filter: blur(2px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Home hero visual reveal (storefront). */
@keyframes heroVisualReveal {
  from { opacity: 0; transform: scale(0.94) translateY(20px); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Image reveal with blur (premium image load). */
@keyframes imageReveal {
  from { opacity: 0; transform: scale(1.02); filter: blur(4px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Image fade-in with subtle scale. */
@keyframes imageFadeIn {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hero plain fade. */
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Hero zoom-in (subtle continuous scale settle). */
@keyframes heroZoomIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: scale(1.02); }
}

/* Hero flip-in (3D perspective). */
@keyframes heroFlipIn {
  from { opacity: 0; transform: perspective(1200px) rotateY(8deg) scale(1.03); }
  to   { opacity: 1; transform: perspective(1200px) rotateY(0deg) scale(1); }
}

/* Auth-card success flash (tiny scale pop). */
@keyframes yni-auth-success {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ────────────────────────────────────────────────────────────────────────
   3. FADE (opacity only)
   ──────────────────────────────────────────────────────────────────────── */

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

@keyframes yni-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes yni-card-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

/* ────────────────────────────────────────────────────────────────────────
   4. SPINNERS
   ──────────────────────────────────────────────────────────────────────── */

/* Canonical full-rotation spinner (360deg). */
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────────────────
   5. SHIMMER (skeleton loading sheen)
   ──────────────────────────────────────────────────────────────────────── */

/* Canonical background-position shimmer: 200% → -200%.
   Used by shimmer skeletons across storefront + admin. */
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Transform-based sheen sweep for hero skeleton (translateX). */
@keyframes heroShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Admin skeleton: travels by pixel distance (fixed 200px width). */
@keyframes adminSkeleton {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

/* ────────────────────────────────────────────────────────────────────────
   6. PULSE / GLOW (box-shadow or opacity loops)
   ──────────────────────────────────────────────────────────────────────── */

/* Opacity pulse (ghost / badge / dot). */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* Box-shadow ring pulse (save-success / dot). */
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(139, 105, 20, 0.12); }
  50%      { box-shadow: 0 0 0 9px rgba(139, 105, 20, 0.05); }
}

/* Success save pulse (expanding ring fade). */
@keyframes savePulse {
  0%   { box-shadow: 0 0 0 0 rgba(61, 107, 74, 0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(61, 107, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 107, 74, 0); }
}

/* ────────────────────────────────────────────────────────────────────────
   7. BOUNCE / FLOAT / TWINKLE / PING (decorative loops)
   ──────────────────────────────────────────────────────────────────────── */

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

@keyframes twinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: translateY(0);    animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Tailwind-prefixed variants (referenced by tailwind-local.css utilities). */
@keyframes tw-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50%      { transform: translateY(0);    animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes tw-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes tw-pulse {
  50% { opacity: 0.5; }
}

/* Category loading dots bounce. */
@keyframes catLoadBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40%           { transform: translateY(-5px); opacity: 1; }
}

/* ────────────────────────────────────────────────────────────────────────
   8. CHART / LIST / DRAWER / CHECK
   ──────────────────────────────────────────────────────────────────────── */

/* Vertical bar grow (admin charts). */
@keyframes chartGrow {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

/* Inventory history drawer slide-in from right. */
@keyframes inv-drawer-slide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* HPB popover slide-up (centered, uses translateX(-50%) anchoring). */
@keyframes hpb-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* HPB popover slide-up mobile variant (no horizontal centering). */
@keyframes hpb-slide-up-mobile {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Media-library checklist item pop-in. */
@keyframes ml-check-in { from { transform: scale(0); } to { transform: scale(1); } }

/* Curated skeleton shimmer (admin home card). */
@keyframes skeletonCurated {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ────────────────────────────────────────────────────────────────────────
   9. TOAST (entrance, LTR + RTL)
   ──────────────────────────────────────────────────────────────────────── */

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

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

@keyframes toastInRtl {
  from { opacity: 0; transform: translateY(10px) translateX(-8px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}