@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-20px) translateX(10px); }
    50% { transform: translateY(-40px) translateX(-10px); }
    75% { transform: translateY(-20px) translateX(15px); }
}

@keyframes spin-bounce {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.2); }
    50% { transform: rotate(180deg) scale(0.9); }
    75% { transform: rotate(270deg) scale(1.3); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes pulse-grow {
    0% { transform: scale(1); }
    25% { transform: scale(1.4); }
    50% { transform: scale(0.8); }
    75% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes wobble-rotate {
    0% { transform: rotate(0deg) translateX(0px); }
    25% { transform: rotate(15deg) translateX(-10px); }
    50% { transform: rotate(-15deg) translateX(10px); }
    75% { transform: rotate(10deg) translateX(-8px); }
    100% { transform: rotate(0deg) translateX(0px); }
}

@keyframes wave-scale {
    0% { transform: scale(1) translateY(0px); }
    25% { transform: scale(1.2) translateY(-15px); }
    50% { transform: scale(0.9) translateY(15px); }
    75% { transform: scale(1.3) translateY(-10px); }
    100% { transform: scale(1) translateY(0px); }
}

@keyframes spiral-fade {
    0% { transform: rotate(0deg) scale(1); opacity: 1; }
    50% { transform: rotate(720deg) scale(1.5); opacity: 0.5; }
    100% { transform: rotate(1440deg) scale(1); opacity: 1; }
}

@keyframes bounce-flip {
    0% { transform: rotateY(0deg) translateY(0px); }
    25% { transform: rotateY(90deg) translateY(-20px); }
    50% { transform: rotateY(180deg) translateY(0px); }
    75% { transform: rotateY(270deg) translateY(-15px); }
    100% { transform: rotateY(360deg) translateY(0px); }
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(224, 64, 251, 0.5); }
    50% { box-shadow: 0 0 30px rgba(224, 64, 251, 1); }
}

@keyframes slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

#particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.purple-slider {
    background: linear-gradient(to right, #4A148C, #E040FB);
}

.purple-slider::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EA80FC, #AB47BC);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(224, 64, 251, 0.8);
}

.purple-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EA80FC, #AB47BC);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(224, 64, 251, 0.8);
}

* {
    scrollbar-width: thin;
    scrollbar-color: #AB47BC #2E0854;
}

*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #2E0854;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #AB47BC, #E040FB);
    border-radius: 6px;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}