@keyframes glitch {
    0% { transform: translate(0); }
    20% { transform: translate(-2px,2px); }
    40% { transform: translate(-2px,-2px); }
    60% { transform: translate(2px,2px); }
    80% { transform: translate(2px,-2px); }
    100% { transform: translate(0); }
}

.logo:hover {
    animation: glitch 0.3s linear infinite;
}
@keyframes chaos {
    0% { transform: skew(0deg); }
    20% { transform: skew(-2deg); }
    40% { transform: skew(1deg); }
    60% { transform: skew(-1deg); }
    80% { transform: skew(2deg); }
    100% { transform: skew(0deg); }
}

.hero-overlay h1:hover {
    animation: chaos 0.3s infinite;
}

@keyframes slowZoom {
0% { transform: scale(1); }
100% { transform: scale(1.12); }
}

.slide.active{
animation: slowZoom 14s linear forwards;
}

@keyframes noiseMove {
0% { transform: translate(0,0); }
10% { transform: translate(-2%,2%); }
20% { transform: translate(2%,-1%); }
30% { transform: translate(-1%,1%); }
40% { transform: translate(1%,-2%); }
50% { transform: translate(-2%,0); }
60% { transform: translate(2%,1%); }
70% { transform: translate(-1%,-1%); }
80% { transform: translate(1%,2%); }
90% { transform: translate(-2%,1%); }
100% { transform: translate(0,0); }
}

.slide.glitch{
animation:glitchSlide 0.4s;
}

@keyframes glitchSlide{

0%{
transform:translateX(0);
filter:contrast(2) saturate(2);
}

20%{
transform:translateX(-10px);
filter:hue-rotate(90deg);
}

40%{
transform:translateX(10px);
filter:hue-rotate(-90deg);
}

60%{
transform:translateX(-5px);
}

100%{
transform:translateX(0);
filter:none;
}

}