/* ============================
   Keyframes
   ============================ */
@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.93); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sigil-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.95); }
}

@keyframes sigil-glow {
  from { text-shadow: 0 0 10px rgba(212,168,83,0.3); }
  to   { text-shadow: 0 0 24px rgba(212,168,83,0.8), 0 0 48px rgba(212,168,83,0.3); }
}

@keyframes card-reveal {
  0%   { opacity: 0; transform: rotateY(90deg) scale(0.8); }
  60%  { transform: rotateY(-8deg) scale(1.02); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

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

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(0); max-height: 80px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(20px); max-height: 0; margin-bottom: -8px; }
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes stars-drift {
  from { background-position: 0 0; }
  to   { background-position: 100px 200px; }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(139,92,246,0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(139,92,246,0); }
  100% { box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

/* ============================
   Animation Utility Classes
   ============================ */
.animate-fade-in     { animation: fade-in var(--dur-base) var(--ease) both; }
.animate-fade-in-up  { animation: fade-in-up var(--dur-slow) var(--ease) both; }
.animate-scale-in    { animation: scale-in var(--dur-base) var(--ease-spring) both; }
.animate-slide-up    { animation: slide-up var(--dur-base) var(--ease-spring) both; }
.animate-float       { animation: float 3s ease-in-out infinite; }
.animate-page        { animation: page-in var(--dur-slow) var(--ease) both; }
.animate-card-reveal { animation: card-reveal 0.5s var(--ease-spring) both; }

.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }
.delay-5 { animation-delay: 300ms; }

/* ============================
   Skeleton Loader
   ============================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--card) 0%,
    var(--card-hover) 50%,
    var(--card) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.sm { height: 10px; width: 60%; }
.skeleton-title { height: 22px; width: 50%; margin-bottom: 12px; }
.skeleton-card {
  height: 120px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
}

/* ============================
   Transition helpers
   ============================ */
.transition-all   { transition: all var(--dur-base) var(--ease); }
.transition-color { transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.transition-opacity { transition: opacity var(--dur-base) var(--ease); }

/* ============================
   Staggered list animations
   ============================ */
.stagger-list > * {
  animation: fade-in-up var(--dur-slow) var(--ease) both;
}

.stagger-list > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-list > *:nth-child(2)  { animation-delay: 60ms; }
.stagger-list > *:nth-child(3)  { animation-delay: 120ms; }
.stagger-list > *:nth-child(4)  { animation-delay: 180ms; }
.stagger-list > *:nth-child(5)  { animation-delay: 240ms; }
.stagger-list > *:nth-child(6)  { animation-delay: 300ms; }
.stagger-list > *:nth-child(7)  { animation-delay: 360ms; }
.stagger-list > *:nth-child(8)  { animation-delay: 420ms; }
.stagger-list > *:nth-child(9)  { animation-delay: 480ms; }
.stagger-list > *:nth-child(10) { animation-delay: 540ms; }

/* ============================
   Mystical background
   ============================ */
.mystic-bg {
  position: relative;
  overflow: hidden;
}

.mystic-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(139,92,246,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212,168,83,0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============================
   Hover ripple
   ============================ */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(139,92,246,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}

.ripple:active::after {
  width: 200px;
  height: 200px;
  opacity: 0;
}

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