@keyframes glitch-title {
    0% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-20px, -10px);
    }
    20% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(20px, 10px);
    }
    40% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(-10px, 20px);
    }
    60% {
        clip-path: inset(60% 0 20% 0);
        transform: translate(10px, -20px);
    }
    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-15px, 15px);
    }
    100% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(0);
    }
}

.glitch-title {
    font-size: 8rem;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    text-shadow: 
        3px 3px 0 var(--danger-color),
        -3px -3px 0 var(--neon-green);
    animation: glitch-title 5s infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

.typing-text {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--neon-green);
    animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

@keyframes parallax-drift {
    0% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-10px, -10px, 20px); }
    100% { transform: translate3d(0, 0, 0); }
}

.parallax-title {
    transform-style: preserve-3d;
    animation: parallax-drift 10s ease-in-out infinite;
}

@keyframes map-layer-float {
    0% { transform: translateZ(0px); }
    50% { transform: translateZ(50px); }
    100% { transform: translateZ(0px); }
}

.map-layers .layer {
    animation: map-layer-float 8s ease-in-out infinite;
}

.layer:nth-child(2) {
    animation-delay: -2s;
}

.layer:nth-child(3) {
    animation-delay: -4s;
}