@import 'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap';

* {
  margin: 0;
  padding: 0;
}

body {
  background: black;
  color: white;
  cursor: none;
  display: grid;
  font-family: 'Space Mono', sans-serif;
  font-size: 4rem;
  place-items: center;
}

body,
html {
  height: 100%;
}

.ayla-is-listening {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  width: 50rem;
}

.ayla-is-listening:not(:first-child) {
  left: 0;
  position: absolute;
  top: 0;
}

.ayla-is-listening:nth-child(1) {
  animation: clip 3000ms -300ms linear infinite,
    glitch1 500ms -200ms linear infinite,
    tremble1 60ms linear infinite;
}

.ayla-is-listening:nth-child(2) {
  animation: clip 3000ms -600ms linear infinite,
    glitch2 500ms -400ms linear infinite,
    tremble1 60ms linear infinite;
}

.ayla-is-listening:nth-child(3) {
  animation: clip 3000ms -900ms linear infinite,
    glitch3 500ms -600ms linear infinite,
    tremble2 60ms linear infinite;
}

.ayla-is-listening:nth-child(4) {
  animation: clip 3000ms -1200ms linear infinite,
    glitch4 500ms -800ms linear infinite,
    tremble3 60ms linear infinite;
}

.ayla-is-listening:nth-child(5) {
  animation: clip 3000ms -1500ms linear infinite,
    glitch5 500ms -1000ms linear infinite,
    tremble2 60ms linear infinite;
}

.ayla-is-listening:nth-child(6) {
  animation: clip 3000ms -1800ms linear infinite,
    glitch6 500ms -1200ms linear infinite,
    tremble1 60ms linear infinite;
}

.ayla-is-listening:nth-child(7) {
  animation: clip 3000ms -2100ms linear infinite,
    glitch7 500ms -1400ms linear infinite,
    tremble3 60ms linear infinite;
}

.ayla-is-listening:nth-child(8) {
  animation: clip 3000ms -2400ms linear infinite,
    glitch8 500ms -1600ms linear infinite,
    tremble2 60ms linear infinite;
}

.ayla-is-listening:nth-child(9) {
  animation: clip 3000ms -2700ms linear infinite,
    glitch9 500ms -1800ms linear infinite,
    tremble1 60ms linear infinite;
}

.glitch {
  position: relative;
}

@keyframes clip {
  0% {
    clip-path: polygon(
      0 100%,
      100% 100%,
      100% 120%,
      0 120%
    );
  }
  100% {
    clip-path: polygon(
      0 -20%,
      100% -20%,
      100% 0%,
      0 0
    );
  }
}

@keyframes glitch1 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(-2px);
  }
  90% {
    color: #ac1212;
    transform: translateX(3px);
  }
  95% {
    color: #fff;
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch2 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(4px);
  }
  90% {
    color: #ac1212;
    transform: translateX(-3px);
  }
  95% {
    color: #fff;
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch3 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(-4px);
  }
  90% {
    color: #ac1212;
    transform: translateX(2px);
  }
  95% {
    color: #fff;
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch4 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(3px);
  }
  90% {
    color: #ac1212;
    transform: translateX(-2px);
  }
  95% {
    color: #fff;
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch5 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(-3px);
  }
  90% {
    color: #ac1212;
    transform: translateX(4px);
  }
  95% {
    color: #fff;
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch6 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(2px);
  }
  90% {
    color: #ac1212;
    transform: translateX(-4px);
  }
  95% {
    color: #fff;
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch7 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(-1px);
  }
  90% {
    color: #ac1212;
    transform: translateX(3px);
  }
  95% {
    color: #fff;
    transform: translateX(-4px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch8 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(4px);
  }
  90% {
    color: #ac1212;
    transform: translateX(-1px);
  }
  95% {
    color: #fff;
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glitch9 {
  0% {
    transform: translateX(0);
  }
  80% {
    color: #fff;
    transform: translateX(0);
  }
  85% {
    color: #4e9a26;
    transform: translateX(-3px);
  }
  90% {
    color: #ac1212;
    transform: translateX(1px);
  }
  95% {
    color: #fff;
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes tremble1 {
  0% {
    transform: translate(5px, 2px);
  }
  25% {
    transform: translate(-4px, -3px);
  }
  50% {
    transform: translate(3.5px, 1px);
  }
  75% {
    transform: translate(-5px, 2.5px);
  }
  100% {
    transform: translate(4.5px, -1px);
  }
}

@keyframes tremble2 {
  0% {
    transform: translate(4px, -2px);
  }
  25% {
    transform: translate(-5px, 3.5px);
  }
  50% {
    transform: translate(3px, -1.5px);
  }
  75% {
    transform: translate(-3.5px, 2px);
  }
  100% {
    transform: translate(5px, -2.5px);
  }
}

@keyframes tremble3 {
  0% {
    transform: translate(3px, 1.5px);
  }
  25% {
    transform: translate(-4.5px, -2px);
  }
  50% {
    transform: translate(5px, 3px);
  }
  75% {
    transform: translate(-3px, -1px);
  }
  100% {
    transform: translate(4px, 2.5px);
  }
}