/* ==========================================================================
   Animations: keyframes and motion utilities
   ========================================================================== */

@keyframes ripple-anim {
  to { transform: scale(3.5); opacity: 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fade-up .6s var(--ease-out) both; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }

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

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(236,23,145,.45); }
  100% { box-shadow: 0 0 0 14px rgba(236,23,145,0); }
}
.pulse-once { animation: pulse-ring .7s var(--ease-out); }

@keyframes arc-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.hero-arcs svg { animation: arc-rotate 60s linear infinite; transform-origin: center; }

@keyframes flash-grad {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}
.result-flash .r-line2 { animation: flash-grad .5s var(--ease-out); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.toast { animation: toast-in .3s var(--ease-out); }

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(.96); }
}
.toast.leaving { animation: toast-out .25s var(--ease-out) forwards; }

@keyframes bg-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.drift-bg {
  background-size: 200% 200%;
  animation: bg-drift 12s ease-in-out infinite;
}

@keyframes marker-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.pop-once { animation: marker-pop .35s var(--ease-out); }

@keyframes loader-fill {
  from { stroke-dashoffset: 340; }
  to   { stroke-dashoffset: 0; }
}
.loader-mark circle { animation: loader-fill 1.2s var(--ease-out) infinite; }

/* Reveal-on-scroll: applied via IntersectionObserver in app.js */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Sticky nav shrink on scroll */
.nav.scrolled { height: 60px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }

/* Copy success check morph */
.copy-check { display: none; }
.btn-copy.copied .copy-icon { display: none; }
.btn-copy.copied .copy-check { display: block; }