.glitch {
    position: relative;
    display: inline-block;
    color: #ff4444;
    text-shadow: 0 0 6px #ff0000;
    overflow: hidden;
}

    /* ACTIVATION sweep (brightens) */
    .glitch::before {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0.18;
        color: #ff8888;
        clip-path: inset(0 100% 0 0); /* fully clipped at start */
        animation: glow-activate 4s ease-out infinite;
    }

    /* DEACTIVATION sweep (dims) */
    .glitch::after {
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0.12;
        color: #aa2222;
        clip-path: inset(0 100% 0 0);
        animation: glow-deactivate 4s ease-out infinite;
        animation-delay: 2s; /* offset so activation plays first */
    }

/* PASS 1 — Activation Left→Right */
@keyframes glow-activate {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    /* fully hidden */
    45% {
        clip-path: inset(0 0% 0 0);
    }
    /* full sweep */
    46% {
        clip-path: inset(0 100% 0 0);
    }
    /* instant reset */
    100% {
        clip-path: inset(0 100% 0 0);
    }
    /* rest state */
}

/* PASS 2 — Deactivation Left→Right */
@keyframes glow-deactivate {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    45% {
        clip-path: inset(0 0% 0 0);
    }

    46% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 100% 0 0);
    }
}