@keyframes draw{to{stroke-dashoffset:0}}
.arc-svg path.line{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2s var(--ease) forwards}

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

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

@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton{background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-md)}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s var(--ease),transform 0.6s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* Button ripple */
.btn{position:relative;overflow:hidden}
.btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.5);transform:scale(0);animation:ripple 0.6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Fade / slide utility animations (triggered via classes if needed) */
.fade-in{animation:fadeIn 0.6s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.slide-up{animation:slideUp 0.6s var(--ease) both}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.scale-in{animation:scaleIn 0.5s var(--ease) both}
@keyframes scaleIn{from{opacity:0;transform:scale(0.94)}to{opacity:1;transform:scale(1)}}