/* ── Keyframes ── */
@keyframes fadeIn      { from{opacity:0} to{opacity:1} }
@keyframes fadeInUp    { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(0.92)} to{opacity:1;transform:scale(1)} }
@keyframes bounceIn    { 0%{opacity:0;transform:scale(.6)} 60%{opacity:1;transform:scale(1.05)} 80%{transform:scale(.97)} 100%{transform:scale(1)} }
@keyframes spin        { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes pulse       { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes shimmer     { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes shake       { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }

/* Ink stroke */
@keyframes inkFade {
  from { opacity:0; transform:scaleX(0); transform-origin:right; }
  to   { opacity:1; transform:scaleX(1); transform-origin:right; }
}

/* Toast */
@keyframes toastIn  { from{opacity:0;transform:translateX(110%)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(110%)} }

/* Modal */
@keyframes modalIn  { from{opacity:0;transform:scale(.9) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes slideUp  { from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)} }

/* Skeleton wave */
@keyframes skeletonWave { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Utility Classes ── */
.animate-fadeIn    { animation: fadeIn 300ms both; }
.animate-fadeInUp  { animation: fadeInUp 350ms both; }
.animate-scaleIn   { animation: scaleIn 300ms both; }
.animate-bounceIn  { animation: bounceIn 500ms cubic-bezier(0.34,1.56,0.64,1) both; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }
.animate-spin      { animation: spin 0.7s linear infinite; }

/* Stagger delays */
.stagger-1 { animation-delay:  60ms; }
.stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; }
.stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; }
.stagger-6 { animation-delay: 360ms; }

/* Ink line (section divider) */
.section-title .ink-line {
  animation: inkFade 600ms cubic-bezier(0.4,0,0.2,1) 200ms both;
}

/* Hover helpers */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }

/* Loading Spinner */
.spinner {
  width:24px; height:24px;
  border:2.5px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius:50%;
  animation:spin .7s linear infinite;
  flex-shrink:0;
  display:inline-block;
}
.spinner-sm { width:16px; height:16px; border-width:2px; }
.spinner-lg { width:40px; height:40px; border-width:3px; }

/* Skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-surface-2) 25%,
    var(--color-surface-3) 50%,
    var(--color-surface-2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonWave 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* Progress shimmer */
.progress-bar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.25) 50%,transparent 100%);
  animation: shimmer 2.5s infinite;
}

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