@keyframes draw-circle {
    0% { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0% 0 0); }
}

@keyframes draw-line {
    0% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0% 0 0); }
}

@keyframes draw-box {
    0% { clip-path: inset(0 0 100% 100%); }
    50% { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}

@keyframes draw-left-right {
    0% { clip-path: inset(0 100% 0 0); }
    20% { clip-path: inset(0 0% 0 0); }
    70% { clip-path: inset(0 0% 0 0); }
    90% { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 100% 0 0); }
}

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

@keyframes twist-circle {
    0% { transform: translate(-50%, -50%) scaleX(-1) rotateY(90deg); opacity: 0; }
    20% { transform: translate(-50%, -50%) scaleX(-1) rotateY(0deg); opacity: 1; }
    70% { transform: translate(-50%, -50%) scaleX(-1) rotateY(0deg); opacity: 1; }
    90% { transform: translate(-50%, -50%) scaleX(-1) rotateY(90deg); opacity: 0; }
    100% { transform: translate(-50%, -50%) scaleX(-1) rotateY(90deg); opacity: 0; }
}

@keyframes slide-in-out {
    0% { transform: translateX(-100vw); }
    20% { transform: translateX(0); }
    70% { transform: translateX(0); }
    90% { transform: translateX(-100vw); }
    100% { transform: translateX(-100vw); }
}

@keyframes wiggle {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-1px); }
    75% { transform: translateX(1px); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-4px); }
}