/* ==========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================== */

@keyframes pulseGlow{
  0%, 100%{ box-shadow: 0 0 0 0 hsl(var(--hue-ember) / 0.45); }
  50%{ box-shadow: 0 0 0 6px hsl(var(--hue-ember) / 0); }
}
.pulse-ember{ animation: pulseGlow 2.4s ease-in-out infinite; }

@keyframes spin{ to{ transform: rotate(360deg); } }
.spin{ animation: spin 0.8s linear infinite; }

@keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.float{ animation: floatY 4s ease-in-out infinite; }

@keyframes popIn{ from{ opacity: 0; transform: scale(0.85);} to{ opacity: 1; transform: scale(1);} }
.pop-in{ animation: popIn var(--dur-base) var(--ease-spring); }

@keyframes slideUpFade{ from{ opacity: 0; transform: translateY(10px);} to{ opacity: 1; transform: translateY(0);} }
.slide-up{ animation: slideUpFade var(--dur-slow) var(--ease-out); }

@keyframes shakeX{ 10%,90%{ transform: translateX(-1px);} 20%,80%{ transform: translateX(2px);} 30%,50%,70%{ transform: translateX(-3px);} 40%,60%{ transform: translateX(3px);} }
.shake{ animation: shakeX 0.5s; }

@keyframes checkDraw{ from{ stroke-dashoffset: 24; } to{ stroke-dashoffset: 0; } }
.check-draw path{ stroke-dasharray: 24; animation: checkDraw 0.4s var(--ease-out) forwards; }

@keyframes forgeSpark{
  0%{ opacity: 0; transform: translate(0,0) scale(0.4); }
  15%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(var(--dx,10px), var(--dy,-16px)) scale(1); }
}
.spark{ position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--ember-400); pointer-events: none; animation: forgeSpark 900ms ease-out forwards; }

/* Copy button feedback */
@keyframes copyPop{ 0%{ transform: scale(1);} 40%{ transform: scale(1.18);} 100%{ transform: scale(1);} }
.copy-pop{ animation: copyPop 0.35s var(--ease-spring); }

/* Loading dots */
.loading-dots{ display: inline-flex; gap: 4px; align-items: center; }
.loading-dots span{ width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: dotBounce 1.1s ease-in-out infinite; }
.loading-dots span:nth-child(2){ animation-delay: 0.15s; }
.loading-dots span:nth-child(3){ animation-delay: 0.3s; }
@keyframes dotBounce{ 0%,60%,100%{ transform: translateY(0); opacity: 0.5;} 30%{ transform: translateY(-4px); opacity: 1;} }

/* Splash / boot screen */
.boot-screen{ position: fixed; inset: 0; background: var(--bg-canvas); z-index: 999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4); transition: opacity var(--dur-slow) var(--ease-out); }
.boot-screen.hide{ opacity: 0; pointer-events: none; }
.boot-mark{ width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(155deg, var(--accent-400), var(--accent-700) 55%, var(--ember-500)); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 30px -6px hsl(var(--hue-violet)/0.6); animation: floatY 2.4s ease-in-out infinite; }
.boot-mark svg{ width: 28px; height: 28px; }
.boot-text{ font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--text-primary); font-size: var(--fs-md); }