/* ============================================================
 * Family Kingdom — Animations
 *
 * Reusable keyframes + motion classes. All durations use tokens.
 * ============================================================ */

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

@keyframes fk-slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes fk-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes fk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

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

@keyframes fk-confetti {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}

.fk-anim-fade-in { animation: fk-fade-in var(--motion-medium) var(--motion-easing); }
.fk-anim-slide-up { animation: fk-slide-up var(--motion-medium) var(--motion-easing); }
.fk-anim-pulse { animation: fk-pulse 1.6s var(--motion-easing) infinite; }
.fk-anim-bounce { animation: fk-bounce 1s var(--motion-easing) infinite; }

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