/* Glitch Header Effects */
h1.glitch {
    font-size: 3em;
    position: relative;
    color: #0f0;
    text-transform: uppercase;
    animation: glitch 1s linear infinite;
}

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

h1.glitch::before {
    color: #f0f;
    animation: glitch-top 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

h1.glitch::after {
    color: #00f;
    animation: glitch-bottom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
    2%, 64% { transform: translate(2px, 0) skew(0deg); }
    4%, 60% { transform: translate(-2px, 0) skew(0deg); }
    62% { transform: translate(0, 0) skew(5deg); }
}

@keyframes glitch-top {
    2%, 64% { transform: translate(2px, -2px); }
    4%, 60% { transform: translate(-2px, 2px); }
    62% { transform: translate(0, 0) skew(5deg); }
}

@keyframes glitch-bottom {
    2%, 64% { transform: translate(-2px, 0); }
    4%, 60% { transform: translate(2px, 0); }
    62% { transform: translate(0, 0) skew(5deg); }
}