/* CSS Animations */

/* Particle animation */
@keyframes particle-float {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    50% {
         opacity: 0.6;
    }
    100% {
        transform: translateY(-100px) translateX(20px);
        opacity: 0;
    }
}


/* Glitch effect for title */
@keyframes glitch {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        text-shadow: none;
    }
    5% {
        opacity: 0.8;
        transform: translateY(0) scale(1);
    }
    10% {
        text-shadow: 2px 2px 0 var(--accent-color), -2px -2px 0 var(--secondary-color);
    }
    11% {
        text-shadow: -2px -2px 0 var(--secondary-color), 2px 2px 0 var(--accent-color);
    }
    12% {
        text-shadow: 2px -2px 0 var(--accent-color), -2px 2px 0 var(--secondary-color);
    }
    13% {
        text-shadow: -2px 2px 0 var(--secondary-color), 2px -2px 0 var(--accent-color);
    }
    14% {
         text-shadow: 2px 0px 0 var(--accent-color), -2px -0px 0 var(--secondary-color);
    }
    15% {
        text-shadow: -2px 0px 0 var(--secondary-color), 2px 0px 0 var(--accent-color);
    }
    16% {
         text-shadow: 0px 2px 0 var(--accent-color), 0px -2px 0 var(--secondary-color);
    }
    17% {
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        text-shadow: none;
    }
}

/* Simple fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logo pulse (optional) */
@keyframes pulse {
    0% {
        filter: brightness(1);
        transform: scale(1);
    }
    50% {
         filter: brightness(1.3);
         transform: scale(1.05);
    }
    100% {
        filter: brightness(1);
        transform: scale(1);
    }
}

.animated-logo {
    /* Uncomment to enable pulse */
    /* animation: pulse 3s infinite ease-in-out; */
}