/* БЭМ: Glitch - Глитч эффекты и анимации */

.glitch {
    position: relative;
    animation: glitch-text 3s infinite;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

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

.glitch::after {
    animation: glitch-after 0.3s infinite;
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
    opacity: 0.8;
    color: var(--color-accent-red);
}

@keyframes glitch-text {
    0%, 90%, 100% {
        transform: translate(0);
    }
    91% {
        transform: translate(-2px, 1px);
    }
    92% {
        transform: translate(2px, -1px);
    }
    93% {
        transform: translate(-1px, 2px);
    }
    94% {
        transform: translate(1px, -2px);
    }
}

@keyframes glitch-before {
    0%, 90%, 100% {
        transform: translate(0);
    }
    91% {
        transform: translate(-3px, 0);
    }
    93% {
        transform: translate(3px, 0);
    }
}

@keyframes glitch-after {
    0%, 90%, 100% {
        transform: translate(0);
    }
    92% {
        transform: translate(3px, 0);
    }
    94% {
        transform: translate(-3px, 0);
    }
}

/* Пульсация */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

.pulse {
    animation: pulse 2s infinite;
}

/* Появление */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease;
}