body, html {
    height: 100%;
    margin: 0;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.glitch-wrapper {
    width: 300px;
    height: 300px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.glitch {
    width: 100%;
    height: 100%;
    background-size: cover;
    position: relative;
    animation: glitch-animation 5s infinite;
}

@keyframes glitch-animation {
    0%, 100% {
        clip-path: inset(0 100% 0 0);
        transform: translate(0);
    }
    2%, 8% {
        clip-path: inset(0 50% 0 45%);
        transform: translate(-2px, 0);
    }
    2.1% {
        clip-path: inset(0 50% 0 45%);
        transform: translate(2px, 0);
    }
    10%, 15% {
        clip-path: inset(5% 25% 0 70%);
        transform: translate(0, -3px);
    }
    20% {
        clip-path: inset(0 80% 0 19%);
        transform: translate(-2px, 2px);
    }
    25%, 30% {
        clip-path: inset(30% 40% 30% 30%);
        transform: translate(0, 2px);
    }
    35%, 45% {
        clip-path: inset(10% 90% 0 5%);
        transform: translate(3px, 0);
    }
    50%, 60% {
        clip-path: inset(20% 33% 40% 30%);
        transform: translate(-4px, 3px);
    }
    65%, 75% {
        clip-path: inset(30% 20% 30% 40%);
        transform: translate(0, -2px);
    }
    80%, 90% {
        clip-path: inset(10% 10% 75% 10%);
        transform: translate(2px, -1px);
    }
}