---
const strips = [
  { top: 0, h: 5, x1: -2, hue1: -16, x2: 2, hue2: 13, anim: "glitch-9", dur: 9000, delay: 2 },
  { top: 5, h: 3, x1: -1, hue1: -42, x2: -6, hue2: -23, anim: "glitch-5", dur: 5000, delay: 1 },
  { top: 8, h: 3, x1: -10, hue1: -42, x2: -9, hue2: 45, anim: "glitch-7", dur: 7000, delay: 0 },
  { top: 11, h: 5, x1: -6, hue1: -11, x2: 2, hue2: 29, anim: "glitch-8", dur: 8000, delay: 1 },
  { top: 16, h: 5, x1: 0, hue1: 42, x2: 2, hue2: -28, anim: "glitch-6", dur: 6000, delay: 0 },
  { top: 21, h: 2, x1: -3, hue1: -45, x2: -5, hue2: -15, anim: "glitch-7", dur: 7000, delay: 0 },
  { top: 23, h: 2, x1: -5, hue1: 35, x2: 9, hue2: 35, anim: "glitch-6", dur: 6000, delay: 0 },
  { top: 25, h: 6, x1: 10, hue1: 39, x2: -8, hue2: 24, anim: "glitch-7", dur: 7000, delay: 1 },
  { top: 31, h: 6, x1: -6, hue1: -46, x2: -3, hue2: 18, anim: "glitch-10", dur: 10000, delay: 1 },
  { top: 37, h: 1, x1: -8, hue1: -37, x2: -6, hue2: 15, anim: "glitch-9", dur: 9000, delay: 1 },
  { top: 38, h: 2, x1: -1, hue1: 16, x2: 2, hue2: 25, anim: "glitch-5", dur: 5000, delay: 1 },
  { top: 40, h: 2, x1: 5, hue1: 32, x2: 10, hue2: -3, anim: "glitch-9", dur: 9000, delay: 1 },
  { top: 42, h: 4, x1: 10, hue1: -26, x2: 6, hue2: -45, anim: "glitch-6", dur: 6000, delay: 1 },
  { top: 46, h: 3, x1: -7, hue1: -45, x2: -8, hue2: 45, anim: "glitch-5", dur: 5000, delay: 2 },
  { top: 49, h: 3, x1: 4, hue1: 40, x2: -8, hue2: 29, anim: "glitch-6", dur: 6000, delay: 1 },
  { top: 52, h: 6, x1: -4, hue1: 26, x2: -6, hue2: -3, anim: "glitch-10", dur: 10000, delay: 0 },
  { top: 58, h: 4, x1: 6, hue1: 43, x2: -1, hue2: -1, anim: "glitch-8", dur: 8000, delay: 0 },
];
---

<div class="bard">
  {strips.map(s => (
    <div class="strip" style={`
      --glitch-x-1: ${s.x1}em;
      --glitch-hue-1: ${s.hue1}deg;
      --glitch-x-2: ${s.x2}em;
      --glitch-hue-2: ${s.hue2}deg;
      background-position: 0 -${s.top}em;
      height: ${s.h}em;
      animation-name: ${s.anim};
      animation-duration: ${s.dur}ms;
      animation-delay: ${s.delay}s;
    `}></div>
  ))}
</div>

<style>
  .bard {
    margin: 0 auto 30px;
    width: 100%;
    max-width: 65em;
    height: auto;
    aspect-ratio: 1 / 0.95;
    font-size: 2px;
    flex-shrink: 0;
  }

  .strip {
    overflow: hidden;
    position: relative;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    background-size: 100% auto;
    background-image: url('/src/img/bard.png');
  }

  @keyframes glitch-5 {
    0.00%, 33.33%, 43.33%, 66.67%, 76.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 43.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -4px 0 rgba(0, 0, 255, 0.1)); }
    66.77%, 76.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-1px 0px 0 rgba(255, 0, 0, 0.1)); }
  }
  @keyframes glitch-6 {
    0.00%, 33.33%, 41.67%, 66.67%, 75.00%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 41.57% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 3px 0 rgba(255, 0, 0, 0.1)); }
    66.77%, 74.90% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px -2px 0 rgba(0, 0, 255, 0.1)); }
  }
  @keyframes glitch-7 {
    0.00%, 33.33%, 40.48%, 66.67%, 73.81%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 40.38% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(0px -3px 0 rgba(0, 0, 255, 0.1)); }
    66.77%, 73.71% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(4px 1px 0 rgba(255, 0, 0, 0.1)); }
  }
  @keyframes glitch-8 {
    0.00%, 33.33%, 39.58%, 66.67%, 72.92%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 39.48% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-1px -1px 0 rgba(0, 0, 255, 0.1)); }
    66.77%, 72.82% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px -1px 0 rgba(0, 0, 255, 0.1)); }
  }
  @keyframes glitch-9 {
    0.00%, 33.33%, 38.89%, 66.67%, 72.22%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 38.79% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(1px -3px 0 rgba(255, 0, 0, 0.1)); }
    66.77%, 72.12% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(1px 1px 0 rgba(255, 0, 0, 0.1)); }
  }
  @keyframes glitch-10 {
    0.00%, 33.33%, 38.33%, 66.67%, 71.67%, 100.00% { transform: none; filter: hue-rotate(0) drop-shadow(0 0 0 transparent); }
    33.43%, 38.23% { transform: translateX(var(--glitch-x-1)); filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px -1px 0 rgba(255, 0, 0, 0.1)); }
    66.77%, 71.57% { transform: translateX(var(--glitch-x-2)); filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 2px 0 rgba(255, 0, 0, 0.1)); }
  }

  @media (max-width: 768px) {
    .bard { font-size: 3px; }
  }
  @media (max-width: 400px) {
    .bard { aspect-ratio: 1 / 1; }
  }
</style>