/* ==========================================================================
   SPECIAL EFFECTS ANIMATIONS
   Advanced visual effects including particles, glow, morphing, etc.
   ========================================================================== */

/* Glow Effects */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.6);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    }
    50% {
        text-shadow: 0 0 20px rgba(99, 102, 241, 0.8), 0 0 30px rgba(99, 102, 241, 0.6);
    }
}

/* Particle Animations */
@keyframes particleFloat {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) translateX(5px) rotate(90deg);
    }
    50% {
        transform: translateY(-5px) translateX(-5px) rotate(180deg);
    }
    75% {
        transform: translateY(-15px) translateX(3px) rotate(270deg);
    }
}

@keyframes particle3D {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
        opacity: 1;
    }
    50% {
        transform: translate3d(20px, -30px, 10px) rotateX(180deg) rotateY(180deg);
        opacity: 0.7;
    }
    100% {
        transform: translate3d(-10px, -60px, -5px) rotateX(360deg) rotateY(360deg);
        opacity: 0;
    }
}

@keyframes finalParticleFloat {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) scale(1.2) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px) scale(0.8) rotate(360deg);
        opacity: 0;
    }
}

/* Fire and Energy Effects */
@keyframes fireParticle {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50px) scale(0.5);
        opacity: 0;
    }
}

@keyframes sparkParticle {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
}

@keyframes smokeParticle {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-80px) scale(2);
        opacity: 0;
    }
}

@keyframes energyParticle {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-60px) rotate(720deg) scale(0.3);
        opacity: 0;
    }
}

@keyframes magicParticle {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(1) rotate(72deg);
        opacity: 1;
    }
    80% {
        transform: scale(1.2) rotate(288deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* Morphing and Shape Animations */
@keyframes morphShape {
    0% {
        border-radius: 50%;
        transform: rotate(0deg);
    }
    25% {
        border-radius: 0%;
        transform: rotate(90deg);
    }
    50% {
        border-radius: 50% 0%;
        transform: rotate(180deg);
    }
    75% {
        border-radius: 0% 50%;
        transform: rotate(270deg);
    }
    100% {
        border-radius: 50%;
        transform: rotate(360deg);
    }
}

@keyframes morphShapes {
    0%, 100% {
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
    33% {
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }
    66% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
}

@keyframes shapeTransform {
    0% {
        transform: scale(1) rotate(0deg);
        border-radius: 20%;
    }
    25% {
        transform: scale(1.1) rotate(90deg);
        border-radius: 50%;
    }
    50% {
        transform: scale(0.9) rotate(180deg);
        border-radius: 0%;
    }
    75% {
        transform: scale(1.05) rotate(270deg);
        border-radius: 30%;
    }
    100% {
        transform: scale(1) rotate(360deg);
        border-radius: 20%;
    }
}

@keyframes shapeRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Blob and Organic Animations */
@keyframes blobMove {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: translate(20px, -20px) rotate(180deg);
    }
}

@keyframes blobMorph {
    0%, 100% {
        border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%;
    }
    50% {
        border-radius: 60% 40% 30% 70% / 40% 70% 30% 60%;
    }
}

/* Wave and Flow Effects */
@keyframes waveMove {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes waveFlow {
    0% {
        transform: translateX(-100%) scaleY(1);
    }
    50% {
        transform: translateX(0%) scaleY(1.2);
    }
    100% {
        transform: translateX(100%) scaleY(1);
    }
}

@keyframes waveStretch {
    0%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(1.5);
    }
}

/* Gradient and Color Effects */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Orbit and Circular Motion */
@keyframes orbit {
    0% {
        transform: rotate(0deg) translateX(50px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(50px) rotate(-360deg);
    }
}

@keyframes orbFloat {
    0% {
        transform: rotate(0deg) translateX(30px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
    }
}

/* Ray and Light Effects */
@keyframes rayMove {
    0% {
        transform: rotate(0deg);
        opacity: 0.3;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(360deg);
        opacity: 0.3;
    }
}

@keyframes rayRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    100% {
        transform: rotate(360deg) scale(1.1);
    }
}

@keyframes lineGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
        transform: scaleX(1);
    }
    50% {
        box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
        transform: scaleX(1.05);
    }
}

/* Utility Classes for Effects */
.effect-glow {
    animation: glow 2s ease-in-out infinite;
}

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

.effect-particle-float {
    animation: particleFloat 3s linear infinite;
}

.effect-morph {
    animation: morphShape 4s ease-in-out infinite;
}

.effect-shimmer {
    animation: shimmer 2s linear infinite;
}

.effect-orbit {
    animation: orbit 10s linear infinite;
}

.effect-wave {
    animation: waveMove 3s ease-in-out infinite;
}