@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.gradient-animate {
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}
/* Floating Animation for Image */
@keyframes float {
    0%, 100% { 
        transform: translateY(0px) rotate(0deg); 
    }
    50% { 
        transform: translateY(-30px) rotate(2deg); 
    }
}

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

/* Slow Spin */
@keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

/* Reverse Spin */
@keyframes spin-reverse {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

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

/* Floating Particles */
.particle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border-radius: 50%;
    opacity: 0.6;
    filter: blur(2px);
}

@keyframes particle-float {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
}

.particle-1 {
    top: 20%;
    left: 10%;
    animation: particle-float 8s ease-in-out infinite;
}

.particle-2 {
    top: 60%;
    left: 80%;
    animation: particle-float 10s ease-in-out infinite;
    animation-delay: 1s;
}

.particle-3 {
    top: 40%;
    left: 15%;
    animation: particle-float 12s ease-in-out infinite;
    animation-delay: 2s;
}

.particle-4 {
    top: 80%;
    left: 70%;
    animation: particle-float 9s ease-in-out infinite;
    animation-delay: 3s;
}

.particle-5 {
    top: 30%;
    left: 90%;
    animation: particle-float 11s ease-in-out infinite;
    animation-delay: 4s;
}

/* Light Rays */
.light-ray {
    position: absolute;
    width: 2px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(168, 85, 247, 0.4), transparent);
    transform-origin: top center;
}

@keyframes ray-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.light-ray-1 {
    top: 50%;
    left: 50%;
    animation: ray-rotate 20s linear infinite;
}

.light-ray-2 {
    top: 50%;
    left: 50%;
    animation: ray-rotate 25s linear infinite reverse;
    background: linear-gradient(to bottom, transparent, rgba(236, 72, 153, 0.4), transparent);
}

.light-ray-3 {
    top: 50%;
    left: 50%;
    animation: ray-rotate 30s linear infinite;
    background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.3), transparent);
}

/* Pulse Animation for Glow */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(236, 72, 153, 0.6);
    }
}
::-webkit-scrollbar {
    width: 2px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #a855f7, #ec4899);
    border-radius: 4px;
    height: 2px;
}