/* Custom animations from the provided effects */
@keyframes fire-flicker {
    0%, 100% {
        text-shadow: 
            0 0 10px #ff6b35,
            0 0 20px #ff6b35,
            0 0 30px #ff6b35,
            0 0 40px #ff6b35,
            0 0 70px #ff6b35,
            0 0 80px #ff6b35;
        color: #ff6b35;
    }
    50% {
        text-shadow: 
            0 0 5px #ff6b35,
            0 0 10px #ff6b35,
            0 0 15px #ff6b35,
            0 0 20px #ff6b35,
            0 0 35px #ff6b35,
            0 0 40px #ff6b35;
        color: #ff8c42;
    }
}

.animate-fire {
    animation: fire-flicker 1s ease-in-out infinite alternate;
}

/* Additional styles for canvas background */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

#hero-canvas {
    z-index: 0;
}

/* Ensure mobile menu works properly */
#mobile-menu.show {
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #hero-canvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }
    
    .relative.min-h-screen {
        position: relative;
    }
}

/* Particle wave animation */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

.animate-typing {
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    animation: typing 3.5s steps(30, end), blink-caret .5s step-end infinite;
}

@keyframes blur-focus {
    0%, 100% {
        filter: blur(20px);
        opacity: 0;
    }
    50% {
        filter: blur(0);
        opacity: 1;
    }
}

.animate-blur-focus {
    animation: blur-focus 4s ease-in-out infinite;
}

.mask-text {
    background: url('...');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0)
    }
    50% {
        transform: translateY(-20px)
    }
}

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