.glitch-wrapper {
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
    /* Maintain the container style from previous step if desired, or remove if raw glitch looked better */
    /* User said "Change font effect to this", didn't say remove container box. */
    /* But the glitch effect has a black background for the pseudo-elements, so it needs to blend or be handled. */
    /* The provided css uses background-color: #060010 for the slices. */
    /* My background is black (#000) or dark (#222). Ideally it matches. */

    /* Let's keep a subtle container but maybe less padding to let glitch shine? */
    /* Or just raw text. Glitch usually looks cool raw. */
    /* I'll remove the glassmorphism box for now as Glitch is "edgy". */
}

.glitch {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #fff;
    font-size: 32px;
    /* Adjusted size */
    white-space: nowrap;
    font-weight: 900;
    position: relative;
    margin: 0 auto;
    user-select: none;
    cursor: pointer;
    text-transform: uppercase;
    /* Usually looks better */
    letter-spacing: 2px;
}

.glitch::after,
.glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    color: #fff;
    background-color: #000;
    /* Match body bg */
    overflow: hidden;
    clip-path: inset(0 0 0 0);
}

.glitch::after {
    left: 4px;
    text-shadow: -2px 0 red;
    animation: animate-glitch 3s infinite linear alternate-reverse;
}

.glitch::before {
    left: -4px;
    text-shadow: 2px 0 cyan;
    animation: animate-glitch 2s infinite linear alternate-reverse;
}

/* Hover effect from request */
/* The user code has: .enable-on-hover logic. */
/* I will enable glitch ALWAYS by default as "Logo", or on hover? */
/* User code snippet shows `enableOnHover={true}` by default in params, but passed `false` in usage example. */
/* Usage: enableOnHover={false} -> So ALWAYS glitching. */
/* I will implement the ALWAYS glitch version. */

@keyframes animate-glitch {
    0% {
        clip-path: inset(20% 0 50% 0);
    }

    5% {
        clip-path: inset(10% 0 60% 0);
    }

    10% {
        clip-path: inset(15% 0 55% 0);
    }

    15% {
        clip-path: inset(25% 0 35% 0);
    }

    20% {
        clip-path: inset(30% 0 40% 0);
    }

    25% {
        clip-path: inset(40% 0 20% 0);
    }

    30% {
        clip-path: inset(10% 0 60% 0);
    }

    35% {
        clip-path: inset(15% 0 55% 0);
    }

    40% {
        clip-path: inset(25% 0 35% 0);
    }

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

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

    55% {
        clip-path: inset(10% 0 60% 0);
    }

    60% {
        clip-path: inset(15% 0 55% 0);
    }

    65% {
        clip-path: inset(25% 0 35% 0);
    }

    70% {
        clip-path: inset(30% 0 40% 0);
    }

    75% {
        clip-path: inset(40% 0 20% 0);
    }

    80% {
        clip-path: inset(20% 0 50% 0);
    }

    85% {
        clip-path: inset(10% 0 60% 0);
    }

    90% {
        clip-path: inset(15% 0 55% 0);
    }

    95% {
        clip-path: inset(25% 0 35% 0);
    }

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