/* ── Page transitions ── */
.page-enter {
  animation: pageEnter 0.3s ease forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Fade ── */
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; } to { opacity: 0; }
}

/* ── Slide ── */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Stagger children ── */
.stagger > * { opacity: 0; animation: slideInUp 0.4s ease forwards; }
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.20s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(7) { animation-delay: 0.35s; }
.stagger > *:nth-child(8) { animation-delay: 0.40s; }
.stagger > *:nth-child(n+9) { animation-delay: 0.45s; }

/* ── Shimmer skeleton ── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-elevated) 25%,
    var(--bg-highlight) 50%,
    var(--bg-elevated) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--r8);
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skel-text  { height: 14px; margin-bottom: 8px; border-radius: 4px; }
.skel-title { height: 22px; margin-bottom: 12px; border-radius: 4px; }
.skel-card  { height: 140px; border-radius: 16px; }
.skel-circle { border-radius: 50%; }

/* ── Confetti / success ── */
@keyframes confettiFall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100px) rotate(360deg); opacity: 0; }
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confettiFall 1s ease forwards;
}

/* ── Number count up ── */
.count-up { display: inline-block; }

/* ── Scale pop ── */
@keyframes scalePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.scale-pop { animation: scalePop 0.3s ease; }

/* ── Checkmark draw ── */
@keyframes checkDraw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
.check-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkDraw 0.5s ease 0.2s forwards;
}