/* Glitch Effect */
.glitch {
    position: relative;
    color: var(--primary);
    letter-spacing: 3px;
    animation: glitch-skew 4s linear infinite alternate-reverse;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: glitch-animation 5s infinite linear alternate-reverse;
}

.glitch::before {
    color: var(--error);
    animation-delay: 0.1s;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
    opacity: 0.8;
}

.glitch::after {
    color: var(--success); /* Changed to blue-purple from green */
    animation-delay: 0.2s;
    clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
    opacity: 0.8;
}

.glitch-wrapper {
    position: relative;
    display: inline-block;
    margin: 1.5rem 0;
}

/* Glitch Animations */
@keyframes glitch-animation {
    0% {
        clip-path: inset(80% 0 0 0);
        transform: translate(0px, 5px);
    }
    10% {
        clip-path: inset(10% 0 85% 0);
        transform: translate(0px, 0px);
    }
    20% {
        clip-path: inset(36% 0 61% 0);
        transform: translate(3px, 0px);
    }
    30% {
        clip-path: inset(20% 0 61% 0);
        transform: translate(-1px, 5px);
    }
    40% {
        clip-path: inset(60% 0 26% 0);
        transform: translate(3px, -5px);
    }
    50% {
        clip-path: inset(71% 0 11% 0);
        transform: translate(-4px, 1px);
    }
    60% {
        clip-path: inset(47% 0 37% 0);
        transform: translate(2px, -4px);
    }
    70% {
        clip-path: inset(40% 0 27% 0);
        transform: translate(-1px, 6px);
    }
    80% {
        clip-path: inset(80% 0 20% 0);
        transform: translate(1px, -1px);
    }
    90% {
        clip-path: inset(10% 0 58% 0);
        transform: translate(-6px, 4px);
    }
    100% {
        clip-path: inset(10% 0 90% 0);
        transform: translate(4px, -5px);
    }
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    10% { transform: skew(0deg); }
    20% { transform: skew(3deg); }
    30% { transform: skew(0deg); }
    40% { transform: skew(-2deg); }
    50% { transform: skew(0deg); }
    60% { transform: skew(0deg); }
    70% { transform: skew(4deg); }
    80% { transform: skew(-1deg); }
    90% { transform: skew(2deg); }
    100% { transform: skew(0deg); }
}