/* Shared base styling for project sub-pages (keeps them consistent with index.html). */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00f0ff;
}

.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  left: 2px;
  text-shadow: -1px 0 #ff003c;
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -1px 0 #00f0ff;
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(14px, 9999px, 127px, 0);
  }
  20% {
    clip: rect(66px, 9999px, 16px, 0);
  }
  40% {
    clip: rect(6px, 9999px, 106px, 0);
  }
  60% {
    clip: rect(109px, 9999px, 86px, 0);
  }
  80% {
    clip: rect(32px, 9999px, 5px, 0);
  }
  100% {
    clip: rect(87px, 9999px, 137px, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip: rect(125px, 9999px, 16px, 0);
  }
  20% {
    clip: rect(3px, 9999px, 122px, 0);
  }
  40% {
    clip: rect(33px, 9999px, 78px, 0);
  }
  60% {
    clip: rect(87px, 9999px, 16px, 0);
  }
  80% {
    clip: rect(110px, 9999px, 83px, 0);
  }
  100% {
    clip: rect(14px, 9999px, 55px, 0);
  }
}