/* ===========================================
   Quadrata — Animations (ported from code.html)
   =========================================== */

/* ---- Keyframes ---- */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes marquee2 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0%);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes draw {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

@keyframes ping {

    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes text-shine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

/* ---- Animation Classes ---- */
.animate-marquee {
    animation: marquee 30s linear infinite;
    flex-shrink: 0;
}

.animate-marquee2 {
    animation: marquee2 30s linear infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw 3s ease-in-out infinite alternate;
}

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

.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-spin-slow {
    animation: spin 20s linear infinite;
}

.animate-spin-reverse-slow {
    animation: spin 25s linear infinite reverse;
}