/* Dynamic Effects for Show Stoppers Academy */

/* Floating Animations */
@keyframes float-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -30px) rotate(90deg); }
    50% { transform: translate(-10px, -60px) rotate(180deg); }
    75% { transform: translate(-30px, -20px) rotate(270deg); }
}

@keyframes float-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-25px, -40px) rotate(120deg); }
    66% { transform: translate(15px, -80px) rotate(240deg); }
}

@keyframes float-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(30px, -50px) rotate(180deg); }
}

@keyframes float-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(-20px, -25px) rotate(90deg); }
    50% { transform: translate(10px, -45px) rotate(180deg); }
    75% { transform: translate(25px, -15px) rotate(270deg); }
}

@keyframes float-5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    40% { transform: translate(35px, -35px) rotate(144deg); }
    80% { transform: translate(-15px, -70px) rotate(288deg); }
}

.animate-float-1 { animation: float-1 8s ease-in-out infinite; }
.animate-float-2 { animation: float-2 10s ease-in-out infinite; }
.animate-float-3 { animation: float-3 6s ease-in-out infinite; }
.animate-float-4 { animation: float-4 9s ease-in-out infinite; }
.animate-float-5 { animation: float-5 7s ease-in-out infinite; }

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

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

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

/* Glow Effects */
@keyframes glow {
    0%, 100% { 
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.5),
                    0 0 40px rgba(239, 68, 68, 0.3),
                    0 0 60px rgba(239, 68, 68, 0.1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.7),
                    0 0 50px rgba(239, 68, 68, 0.5),
                    0 0 70px rgba(239, 68, 68, 0.3);
    }
}

.animate-glow { animation: glow 3s ease-in-out infinite; }

/* Soft Pulse Animation */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.animate-pulse-soft { animation: pulse-soft 2s ease-in-out infinite; }

/* Slow Bounce Animation */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

/* Text Glow Animation */
@keyframes text-glow {
    0%, 100% { 
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5),
                     0 0 20px rgba(255, 255, 255, 0.3),
                     0 0 30px rgba(255, 255, 255, 0.1);
    }
    50% { 
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.7),
                     0 0 25px rgba(255, 255, 255, 0.5),
                     0 0 35px rgba(255, 255, 255, 0.3);
    }
}

.animate-text-glow { animation: text-glow 3s ease-in-out infinite; }

/* Gradient Animation */
@keyframes gradient-x {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease infinite;
}

/* Fade In Up Animation */
@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up { animation: fade-in-up 1s ease-out; }

/* Typewriter Animation */
@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

.animate-typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typewriter 3s steps(40, end) 1s both;
}

/* Particle System Styles */
#particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    pointer-events: none;
}

/* Enhanced Card Hover Effects */
.card-hover-effect {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Glassmorphism Effects */
.glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass-effect-dark {
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Magnetic Hover Effect */
.magnetic {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.magnetic:hover {
    transform: scale(1.05);
}

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    background-size: 200px 100%;
    animation: shimmer 2s infinite;
}

/* Pulse Ring Animation */
@keyframes pulse-ring {
    0% {
        transform: scale(0.33);
    }
    40%,
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(239, 68, 68, 0.6);
    border-radius: 50%;
    animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

/* Neon Glow Effect */
.neon-glow {
    text-shadow: 0 0 5px currentColor,
                 0 0 10px currentColor,
                 0 0 15px currentColor,
                 0 0 20px currentColor;
}

/* Morphing Background */
@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.morph-bg {
    animation: morph 8s ease-in-out infinite;
}

/* Responsive Animations */
@media (prefers-reduced-motion: reduce) {
    .animate-float-1,
    .animate-float-2,
    .animate-float-3,
    .animate-float-4,
    .animate-float-5,
    .animate-spin-slow,
    .animate-spin-reverse,
    .animate-glow,
    .animate-pulse-soft,
    .animate-bounce-slow,
    .animate-text-glow,
    .animate-gradient-x,
    .animate-fade-in-up,
    .animate-typewriter,
    .shimmer,
    .pulse-ring,
    .morph-bg {
        animation: none;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .animate-float-1,
    .animate-float-2,
    .animate-float-3,
    .animate-float-4,
    .animate-float-5 {
        animation-duration: 12s;
    }
    
    .particle {
        display: none; /* Hide particles on mobile for performance */
    }
}