/* ================================================
   animations.css — Keyframes, Transitions, Skeletons
   ================================================ */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}
@keyframes drawCheck {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-120%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.2); }
}
@keyframes flipNumber {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Utility classes ── */
.animate-fade-in-up { animation: fadeInUp 0.5s ease forwards; }
.animate-fade-in { animation: fadeIn 0.3s ease forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease forwards; }

/* ── Scroll-triggered visibility ── */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ── Skeleton loading ── */
.skeleton { background: linear-gradient(90deg, #ede8e0 25%, #f5f0ea 50%, #ede8e0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-md); }

.skeleton-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.skeleton-card .skeleton-image { aspect-ratio: 1; width: 100%; }
.skeleton-card .skeleton-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.skeleton-card .skeleton-line { height: 12px; width: 100%; }
.skeleton-card .skeleton-line.short { width: 60%; }
.skeleton-card .skeleton-line.medium { width: 80%; }
.skeleton-card .skeleton-btn { height: 36px; width: 100%; margin-top: var(--space-2); }

/* ── SVG animated checkmark ── */
.checkmark-svg { width: 80px; height: 80px; }
.checkmark-circle { stroke: var(--color-primary); stroke-width: 2; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: drawCheck 0.6s ease forwards; }
.checkmark-tick { stroke: var(--color-primary); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawCheck 0.4s ease 0.4s forwards; }

/* ── Loading spinner ── */
.spinner { width: 24px; height: 24px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; }

/* ── Page transition ── */
#page-content { animation: fadeIn 0.3s ease; }

/* ── Cart badge pulse ── */
.cart-count.pulse { animation: badgePulse 0.3s ease; }