.content-loader {
    height: 4px;
    width: 100%;
    --c: no-repeat linear-gradient(#9333ea 0 0);
    background: var(--c), var(--c), #d8b4fe;
    background-size: 60% 100%;
    animation: animate-loader 3s infinite;
}
@keyframes animate-loader {
    0%   {background-position:-150% 0,-150% 0}
    66%  {background-position: 250% 0,-150% 0}
    100% {background-position: 250% 0, 250% 0}
}

.text-animate-pulse {
    display: inline-block;

    animation: animate-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes animate-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.dot {
    width: 8px;
    height: 8px;
    background-color: #9ca3af;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1s infinite;
}

.dot:nth-child(1) {
    animation-delay: 0s;
}

.dot:nth-child(2) {
    animation-delay: 0.2s;
}

.dot:nth-child(3) {
    animation-delay: 0.4s;
}

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

@keyframes highlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3);
    }
}

.highlight-input {
    animation: highlight-pulse 2s ease-in-out;
}

.pulse-color svg {
    animation: pulseColor 0.8s ease-in-out;
}

@keyframes pulseColor {
    0% { stroke: currentColor; }
    50% { stroke: #fb923c; }
    100% { stroke: currentColor; }
}