/* Circle — motion system. Tokens + shared keyframes + drop-in utility classes.
   Rule of thumb: everything enters with a soft-out fade+rise; hovers move color, not position
   (cards may lift 2px); --ease-spring is reserved for small celebratory accents. */
:root {
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ /* default — every entrance & transition */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ /* movement within the page (carousel, reorder) */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ /* leaving elements — accelerate out */
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1); /* @kind other */ /* slight overshoot — checkmarks, counters, small delights only */
  --duration-instant: 80ms; /* @kind other */ /* pressed states, toggles */
  --duration-fast: 140ms; /* @kind other */ /* hovers, small controls */
  --duration-base: 220ms; /* @kind other */ /* dropdowns, dialogs, toasts */
  --duration-slow: 420ms; /* @kind other */ /* card/section entrances */
  --duration-hero: 1400ms; /* @kind other */ /* hero settles, chart draw-ins */
  --stagger-step: 110ms; /* @kind other */ /* delay between staggered siblings */
  --rise-distance: 12px; /* entrance travel — never more than 16px */
}
@keyframes circle-rise { from { opacity: 0; transform: translateY(var(--rise-distance, 12px)); } to { opacity: 1; transform: none; } }
@keyframes circle-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes circle-scale-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes circle-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes circle-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes circle-ping { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes circle-spin { to { transform: rotate(360deg); } }
@keyframes circle-shimmer { to { background-position: -200% 0; } }
@keyframes circle-draw { to { stroke-dashoffset: 0; } }
.anim-rise { opacity: 0; animation: circle-rise var(--duration-slow) var(--ease-soft) forwards; }
.anim-fade { opacity: 0; animation: circle-fade var(--duration-base) var(--ease-soft) forwards; }
.anim-scale-in { opacity: 0; animation: circle-scale-in var(--duration-base) var(--ease-soft) forwards; }
.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: calc(1 * var(--stagger-step)); }
.anim-stagger > *:nth-child(3) { animation-delay: calc(2 * var(--stagger-step)); }
.anim-stagger > *:nth-child(4) { animation-delay: calc(3 * var(--stagger-step)); }
.anim-stagger > *:nth-child(5) { animation-delay: calc(4 * var(--stagger-step)); }
.anim-stagger > *:nth-child(6) { animation-delay: calc(5 * var(--stagger-step)); }
.anim-stagger > *:nth-child(7) { animation-delay: calc(6 * var(--stagger-step)); }
.anim-stagger > *:nth-child(8) { animation-delay: calc(7 * var(--stagger-step)); }
@media (prefers-reduced-motion: reduce) {
  .anim-rise, .anim-fade, .anim-scale-in { opacity: 1; animation: none; }
}