/* ========================================================================
   Animations — keyframes + utility classes
   ======================================================================== */

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

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

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

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

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

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes orbit {
  from { transform: rotate(0deg) translateX(var(--r, 50px)) rotate(0deg); }
  to { transform: rotate(360deg) translateX(var(--r, 50px)) rotate(-360deg); }
}

@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
}

@keyframes typing-dots {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

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

@keyframes border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Utility classes ──────────────────────────────────────────────────── */
.anim-fade-in { animation: fade-in var(--dur-slow) var(--ease-out) both; }
.anim-fade-up { animation: fade-up var(--dur-slow) var(--ease-out) both; }
.anim-fade-down { animation: fade-down var(--dur-base) var(--ease-out) both; }
.anim-scale-in { animation: scale-in var(--dur-base) var(--ease-spring) both; }
.anim-slide-in-right { animation: slide-in-right var(--dur-base) var(--ease-out) both; }

/* Stagger delays */
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 200ms; }
.delay-4 { animation-delay: 300ms; }
.delay-5 { animation-delay: 420ms; }
.delay-6 { animation-delay: 560ms; }
.delay-7 { animation-delay: 720ms; }
.delay-8 { animation-delay: 900ms; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Sparkle effect */
.sparkle {
  position: relative;
  display: inline-block;
}
.sparkle::before, .sparkle::after {
  content: "✦";
  position: absolute;
  color: var(--clay-500);
  animation: sparkle 2.4s ease-in-out infinite;
  font-size: 0.6em;
}
.sparkle::before { top: -6px; left: -10px; animation-delay: 0s; }
.sparkle::after { bottom: -2px; right: -12px; animation-delay: 1.1s; }

/* AI typing indicator */
.typing {
  display: inline-flex;
  gap: 5px;
  padding: 8px 0;
}
.typing span {
  width: 7px; height: 7px;
  background: var(--clay-500);
  border-radius: 50%;
  animation: typing-dots 1.4s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }

/* Pulse dot */
.pulse {
  position: relative;
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  display: inline-block;
}
.pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Spinner */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--cream-300);
  border-top-color: var(--clay-500);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(120deg, var(--clay-500), var(--plum-500), var(--clay-500));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 4s linear infinite;
}

/* Underline reveal */
.u-link {
  position: relative;
  display: inline-block;
}
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 400ms var(--ease-out);
}
.u-link:hover::after { transform-origin: left; transform: scaleX(1); }