@font-face {
  font-family: 'Share Tech Mono';
  src: url('/ShareTechMono-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}


@keyframes errorFlicker {
  0%, 50% { opacity: 0; }
  25%, 75%, 100% { opacity: 1; }
}

@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 0); }  /* fully hidden (100% right cut) */
  to   { clip-path: inset(0 0 0 0); }     /* fully visible */
}


.glitch, .live-reload {
  color: #fff;
  position: relative;
  margin: 0 auto;
  font-family: 'Share Tech Mono';
}

/* keyframes expanded from the SCSS @for + random() */
@keyframes noise-anim {
   00% { clip: rect(40px, 9999px, 60px, 0); }
   05% { clip: rect(76px, 9999px, 10px, 0); }
   10% { clip: rect(18px, 9999px, 74px, 0); }
   15% { clip: rect(96px, 9999px, 32px, 0); }
   20% { clip: rect(90px, 9999px, 8px, 0); }
   25% { clip: rect(14px, 9999px, 72px, 0); }
   30% { clip: rect(54px, 9999px, 36px, 0); }
   35% { clip: rect(48px, 9999px, 92px, 0); }
   40% { clip: rect(6px, 9999px, 40px, 0); }
   45% { clip: rect(70px, 9999px, 16px, 0); }
   50% { clip: rect(22px, 9999px, 84px, 0); }
   55% { clip: rect(88px, 9999px, 28px, 0); }
   60% { clip: rect(4px, 9999px, 44px, 0); }
   65% { clip: rect(12px, 9999px, 98px, 0); }
   70% { clip: rect(66px, 9999px, 22px, 0); }
   75% { clip: rect(30px, 9999px, 80px, 0); }
   80% { clip: rect(28px, 9999px, 58px, 0); }
   85% { clip: rect(60px, 9999px, 20px, 0); }
   90% { clip: rect(8px, 9999px, 96px, 0); }
   95% { clip: rect(34px, 9999px, 12px, 0); }
  100% { clip: rect(0px, 9999px, 100px, 0); }
}

@keyframes noise-anim-2 {
    0% { clip: rect(10px, 9999px, 76px, 0); }
    5% { clip: rect(72px, 9999px, 40px, 0); }
   10% { clip: rect(24px, 9999px, 58px, 0); }
   15% { clip: rect(60px, 9999px, 18px, 0); }
   20% { clip: rect(36px, 9999px, 96px, 0); }
   25% { clip: rect(52px, 9999px, 28px, 0); }
   30% { clip: rect(6px, 9999px, 60px, 0); }
   35% { clip: rect(80px, 9999px, 8px, 0); }
   40% { clip: rect(14px, 9999px, 34px, 0); }
   45% { clip: rect(100px, 9999px, 0px, 0); }
   50% { clip: rect(64px, 9999px, 12px, 0); }
   55% { clip: rect(8px, 9999px, 88px, 0); }
   60% { clip: rect(44px, 9999px, 66px, 0); }
   65% { clip: rect(2px, 9999px, 30px, 0); }
   70% { clip: rect(78px, 9999px, 24px, 0); }
   75% { clip: rect(20px, 9999px, 92px, 0); }
   80% { clip: rect(86px, 9999px, 14px, 0); }
   85% { clip: rect(32px, 9999px, 70px, 0); }
   90% { clip: rect(58px, 9999px, 6px, 0); }
   95% { clip: rect(16px, 9999px, 48px, 0); }
  100% { clip: rect(94px, 9999px, 22px, 0); }
}

/* red/blue channel splits */
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  top: 0;
  color: #fff;
  text-shadow: -1px 0 #f00;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 1s linear alternate-reverse;
}

.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  top: 0;
  color: #fff;
  text-shadow: 1px 0 #00f;
  background: transparent;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 1s linear alternate-reverse;
}