/* Animations */

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
}

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

.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
}

/* Typing Effect Visibility */
.typing {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--color-cyber-green);
    width: 0;
    animation: typing 1s steps(40, end) forwards, blink 0.5s step-end infinite;
}

.delay-1 { animation-delay: 1s; }
.delay-2 { animation-delay: 2s; }
.delay-3 { animation-delay: 3s; }
.delay-4 { animation-delay: 4s; }
.delay-5 { animation-delay: 5s; }
.delay-6 { animation-delay: 6s; }
.delay-7 { animation-delay: 7s; }

@keyframes fadeIn {
    to { opacity: 1; }
}

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

@keyframes blink {
    from, to { border-color: transparent }
    50% { border-color: var(--color-cyber-green) }
}