body {
  overflow: hidden;
}

#feed {
  min-height: 100vh;
  overflow: hidden;
  image-rendering: pixelated;
}

#feed-wave {
  position: absolute;
  top: 0;
  z-index: -1;

  width: 100%;
  height: 100%;
  overflow: hidden;

  image-rendering: pixelated;

  transform: scale(1);
  transition: background-size 10s ease-in;
}

#bandwidth-wrapper {
  display: flex;
  gap: 0.5rem;

  padding: 0.5rem;
}

.clip-animation {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  animation: clipReveal 1s linear forwards;
}

@keyframes clipReveal {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  }
  20%,
  40% {
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 30%);
  }
  60%,
  80% {
    clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

.shake {
  animation: shake 100ms infinite both;
}

@keyframes shake {
  0%,
  50% {
    transform: translateX(20px);
  }
  51%,
  100% {
    transform: translateX(-20px);
  }
}

.glitch {
  position: relative;
  overflow: hidden;
}

.glitch::before,
.glitch::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: '';
  background: inherit;
  background-size: cover;
  opacity: 0.7;
}

.glitch::before {
  filter: hue-rotate(-20deg);
  transform: translateX(-2px);
  animation: glitchA 1500ms infinite steps(1);
}

.glitch::after {
  filter: hue-rotate(20deg);
  transform: translateX(2px);
  animation: glitchB 850ms infinite steps(1);
}

@keyframes glitchA {
  0% {
    clip-path: inset(3% 0 93% 0);
    transform: translate(-5px);
  }
  5% {
    clip-path: inset(10% 0 82% 0);
    transform: translate(6px);
  }
  60% {
    clip-path: inset(18% 0 74% 0);
    transform: translate(-4px);
  }
  15% {
    clip-path: inset(23% 0 67% 0);
    transform: translate(5px);
  }
  40% {
    clip-path: inset(31% 0 60% 0);
    transform: translate(-7px);
  }
  25% {
    clip-path: inset(38% 0 52% 0);
    transform: translate(4px);
  }
  30% {
    clip-path: inset(44% 0 45% 0);
    transform: translate(-3px);
  }
  35% {
    clip-path: inset(50% 0 38% 0);
    transform: translate(7px);
  }
  20% {
    clip-path: inset(57% 0 31% 0);
    transform: translate(-6px);
  }
  45% {
    clip-path: inset(63% 0 25% 0);
    transform: translate(4px);
  }
  50% {
    clip-path: inset(69% 0 18% 0);
    transform: translate(-5px);
  }
  55% {
    clip-path: inset(74% 0 13% 0);
    transform: translate(6px);
  }
  10% {
    clip-path: inset(80% 0 8% 0);
    transform: translate(-4px);
  }
  65% {
    clip-path: inset(86% 0 4% 0);
    transform: translate(5px);
  }
  75% {
    clip-path: inset(50% 0 38% 0);
    transform: translate(7px);
  }
  100% {
    clip-path: inset(0);
    transform: translate(0);
  }
}

@keyframes glitchB {
  0% {
    clip-path: inset(6% 0 90% 0);
    transform: translate(5px);
  }
  8% {
    clip-path: inset(14% 0 78% 0);
    transform: translate(-7px);
  }
  80% {
    clip-path: inset(22% 0 70% 0);
    transform: translate(6px);
  }
  56% {
    clip-path: inset(29% 0 63% 0);
    transform: translate(-4px);
  }
  32% {
    clip-path: inset(37% 0 54% 0);
    transform: translate(7px);
  }
  40% {
    clip-path: inset(46% 0 45% 0);
    transform: translate(-5px);
  }
  48% {
    clip-path: inset(54% 0 37% 0);
    transform: translate(6px);
  }
  76% {
    clip-path: inset(62% 0 29% 0);
    transform: translate(-7px);
  }
  64% {
    clip-path: inset(70% 0 21% 0);
    transform: translate(4px);
  }
  22% {
    clip-path: inset(77% 0 14% 0);
    transform: translate(-6px);
  }
  16% {
    clip-path: inset(84% 0 8% 0);
    transform: translate(5px);
  }
  100% {
    clip-path: inset(0);
    transform: translate(0);
  }
}