/* Animations CSS */

/* Neon Text Pulse Effect */
@keyframes neonPulse {
    0% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(255, 0, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.7), 0 0 30px rgba(255, 0, 255, 0.5);
    }
    100% {
        text-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(255, 0, 255, 0.5);
    }
}

.neon-text {
    animation: neonPulse 2s infinite;
}

/* Glow Button Effect */
@keyframes buttonGlow {
    0% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(255, 0, 255, 0.5);
    }
    50% {
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.9), 0 0 20px rgba(255, 0, 255, 0.7), 0 0 30px rgba(255, 0, 255, 0.3);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), 0 0 10px rgba(255, 0, 255, 0.5);
    }
}

.glow-effect {
    animation: buttonGlow 2s infinite;
}

/* Wave Animation */
@keyframes wave {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-5%);
    }
    100% {
        transform: translateX(0);
    }
}

.wave-separator img, .blog-wave {
    animation: wave 8s ease-in-out infinite;
}

/* Thanks Wave Animation */
@keyframes thanksWave {
    0% {
        d: path("M0,50 C50,30 100,70 150,50 C200,30 250,70 300,50 C350,30 400,70 450,50");
    }
    50% {
        d: path("M0,50 C50,70 100,30 150,50 C200,70 250,30 300,50 C350,70 400,30 450,50");
    }
    100% {
        d: path("M0,50 C50,30 100,70 150,50 C200,30 250,70 300,50 C350,30 400,70 450,50");
    }
}

.wave-animation path {
    animation: thanksWave 5s ease-in-out infinite;
}

/* Fade In Effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 1s ease-out forwards;
}

/* Delayed Fade In for Multiple Elements */
.fade-in-1 {
    animation: fadeIn 1s ease-out 0.2s forwards;
    opacity: 0;
}

.fade-in-2 {
    animation: fadeIn 1s ease-out 0.4s forwards;
    opacity: 0;
}

.fade-in-3 {
    animation: fadeIn 1s ease-out 0.6s forwards;
    opacity: 0;
}

.fade-in-4 {
    animation: fadeIn 1s ease-out 0.8s forwards;
    opacity: 0;
}

/* Gradient Shift Animation */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-shift {
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ff00ff);
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
}

/* Neon Border Animation */
@keyframes neonBorder {
    0% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), inset 0 0 5px rgba(0, 255, 255, 0.7);
        border-color: rgba(0, 255, 255, 0.7);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 0, 255, 0.7), inset 0 0 10px rgba(255, 0, 255, 0.7);
        border-color: rgba(255, 0, 255, 0.7);
    }
    100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.7), inset 0 0 5px rgba(0, 255, 255, 0.7);
        border-color: rgba(0, 255, 255, 0.7);
    }
}

.neon-border {
    animation: neonBorder 2s infinite;
}

/* SVG Path Animation */
@keyframes dashOffset {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.animate-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dashOffset 3s linear forwards;
}

/* Infinite Rotation Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.rotate {
    animation: rotate 10s linear infinite;
}

/* Hover animations */
.scale-on-hover {
    transition: transform 0.3s ease;
}

.scale-on-hover:hover {
    transform: scale(1.05);
}

/* Fly-in Animation for Cards */
@keyframes flyInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flyInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes flyInBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fly-in-left {
    animation: flyInLeft 1s ease-out forwards;
}

.fly-in-right {
    animation: flyInRight 1s ease-out forwards;
}

.fly-in-bottom {
    animation: flyInBottom 1s ease-out forwards;
}

/* Shimmer effect for gradients */
@keyframes shimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.shimmer {
    background: linear-gradient(90deg, rgba(255, 0, 255, 0.3), rgba(0, 255, 255, 0.3), rgba(255, 0, 255, 0.3));
    background-size: 200% 100%;
    animation: shimmer 3s infinite linear;
}

/* Pulse effect for icons */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

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

/* Typing animation for text */
@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--secondary-color);
    width: 0;
    animation: typing 3.5s steps(40, end) forwards, blink 1s step-end infinite;
}