/* ================================================================
   Puffy's — animations.css
   Keyframes, transitions, micro-interactions
   ================================================================ */

/* ── Page transitions ── */
.page-enter {
  opacity: 0;
  transform: translateY(10px);
}

.page-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
}

/* ── Apparition produits (stagger) ── */
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-card {
  animation: cardReveal 300ms ease both;
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* ── Toast ── */
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
  }
}

/* ── Cart badge bounce ── */
@keyframes cartBounce {
  0%, 100% { transform: scale(1); }
  35%       { transform: scale(1.4); }
  65%       { transform: scale(0.88); }
}

.cart-badge-animate {
  animation: cartBounce 350ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* ── Pulse (loading) ── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.pulse { animation: pulse 1.5s ease-in-out infinite; }

/* ── Fade in up (listes) ── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* ── Button loading state ── */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #0B0B10;
  border-radius: 50%;
  animation: spin 600ms linear infinite;
}

.btn-secondary.btn-loading::before {
  border-color: rgba(255,255,255,0.2);
  border-top-color: var(--accent);
}

/* ── Slide in from bottom (mobile nav item) ── */
@keyframes navItemActive {
  from { transform: translateY(2px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ── Timeline dot pulse ── */
.timeline-step--current .timeline-step__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}