/* ============================================================
   ANIMATIONS — Keyframes & Transition Helpers
   ============================================================ */

/* ── Keyframes ───────────────────────────────────────────── */

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

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

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

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

@keyframes badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes check-pop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(5deg); }
  80%  { transform: scale(0.95) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

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

@keyframes card-appear {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Page Transition ─────────────────────────────────────── */

.page-enter {
  animation: page-enter var(--t-page) var(--ease-out) both;
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Staggered product card animation */
.product-card:nth-child(1)  { animation: card-appear 0.4s 0.00s var(--ease-out) both; }
.product-card:nth-child(2)  { animation: card-appear 0.4s 0.05s var(--ease-out) both; }
.product-card:nth-child(3)  { animation: card-appear 0.4s 0.10s var(--ease-out) both; }
.product-card:nth-child(4)  { animation: card-appear 0.4s 0.15s var(--ease-out) both; }
.product-card:nth-child(5)  { animation: card-appear 0.4s 0.20s var(--ease-out) both; }
.product-card:nth-child(6)  { animation: card-appear 0.4s 0.25s var(--ease-out) both; }
.product-card:nth-child(7)  { animation: card-appear 0.4s 0.30s var(--ease-out) both; }
.product-card:nth-child(8)  { animation: card-appear 0.4s 0.35s var(--ease-out) both; }
.product-card:nth-child(n+9){ animation: card-appear 0.4s 0.40s var(--ease-out) both; }

/* Cart item appear */
.cart-item {
  animation: fade-up 0.3s var(--ease-out) both;
}

/* ── Skeleton / Loading Shimmer ──────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface-2) 50%,
    var(--surface) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r-sm);
}

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}