/* SmΔrt Collections Portal - Animation Library */

/* @tweakable background animation duration in seconds */
:root {
    --animation-bg-duration: 30s;
    --animation-title-circle-duration: 8s;
    --animation-fade-duration: 0.5s;
}

@keyframes backgroundTourbillion {
    0%, 100% { 
        transform: rotate(0deg) scale(1);
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
    25% { 
        transform: rotate(90deg) scale(1.05);
        background-position: 25% 25%, 75% 75%, 50% 50%, 30% 70%, 70% 30%, 90% 10%, 20% 90%, 60% 10%, 50% 60%, 85% 50%;
    }
    50% { 
        transform: rotate(180deg) scale(0.95);
        background-position: 50% 50%, 50% 50%, 100% 100%, 60% 40%, 40% 60%, 80% 20%, 40% 80%, 20% 80%, 70% 100%, 90% 60%;
    }
    75% { 
        transform: rotate(270deg) scale(1.02);
        background-position: 75% 75%, 25% 25%, 150% 150%, 90% 10%, 10% 90%, 70% 30%, 60% 70%, 80% 20%, 30% 150%, 70% 80%;
    }
    100% { 
        transform: rotate(360deg) scale(1);
        background-position: 100% 100%, 100% 100%, 200% 200%, 120% 80%, 80% 120%, 60% 40%, 80% 60%, 40% 60%, 40% 200%, 50% 100%;
    }
}

@keyframes titleCircleTourbillion {
    0% { 
        transform: translate(-50%, -50%) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% { 
        transform: translate(-50%, -50%) rotate(36deg) scale(0.8);
        opacity: 0.6;
    }
    25% { 
        transform: translate(-50%, -50%) rotate(90deg) scale(1.2);
        opacity: 0.9;
    }
    50% { 
        transform: translate(-50%, -50%) rotate(180deg) scale(1.5);
        opacity: 1;
    }
    75% { 
        transform: translate(-50%, -50%) rotate(270deg) scale(1.2);
        opacity: 0.8;
    }
    90% { 
        transform: translate(-50%, -50%) rotate(324deg) scale(0.8);
        opacity: 0.4;
    }
    100% { 
        transform: translate(-50%, -50%) rotate(360deg) scale(0.5);
        opacity: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        transform: translateX(-50%) translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes buttonGlow {
    from {
        box-shadow: 0 0 5px #00ffff;
    }
    to {
        box-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff;
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes popIn {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
        filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.5));
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
        filter: drop-shadow(0 0 50px rgba(255, 0, 255, 0.7));
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

@keyframes titleTourbillion {
    0% { 
        transform: rotate(0deg) scale(1);
        opacity: 0;
    }
    25% { 
        transform: rotate(90deg) scale(1.2);
        opacity: 0.8;
    }
    50% { 
        transform: rotate(180deg) scale(0.8);
        opacity: 1;
    }
    75% { 
        transform: rotate(270deg) scale(1.1);
        opacity: 0.8;
    }
    100% { 
        transform: rotate(360deg) scale(1);
        opacity: 0;
    }
}

@keyframes overlaySlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes overlaySlideOut {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
}