/* ============================================
   LANDING PAGE - ANIMATIONS
   All @keyframes definitions
   ============================================ */

@keyframes titleGlow {
    0%, 100% { 
        filter: drop-shadow(0 4px 0 #001133) drop-shadow(0 0 30px rgba(0, 212, 255, 0.5));
        transform: translateX(-50%) translateY(0);
    }
    50% { 
        filter: drop-shadow(0 4px 0 #001133) drop-shadow(0 0 50px rgba(0, 212, 255, 0.8));
        transform: translateX(-50%) translateY(-5px);
    }
}

@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    }
    50% { 
        opacity: 0.8; 
        box-shadow: 0 0 40px rgba(0, 212, 255, 0.5);
    }
}

@keyframes beamGlow {
    0%, 100% {
        box-shadow: 0 0 50px rgba(0, 212, 255, 0.8);
    }
    50% {
        box-shadow: 0 0 100px rgba(0, 212, 255, 1);
    }
}

@keyframes explosion {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes debris {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) rotate(720deg);
        opacity: 0;
    }
}

@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5px, -5px); }
    20% { transform: translate(5px, -5px); }
    30% { transform: translate(-5px, 5px); }
    40% { transform: translate(5px, 5px); }
    50% { transform: translate(-3px, -3px); }
    60% { transform: translate(3px, -3px); }
    70% { transform: translate(-3px, 3px); }
    80% { transform: translate(3px, 3px); }
    90% { transform: translate(-2px, -2px); }
}

@keyframes fireFlicker {
    0%, 100% { 
        opacity: 1;
        transform: scaleY(1);
    }
    50% { 
        opacity: 0.8;
        transform: scaleY(1.1);
    }
}