/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

#loader.hide {
  opacity: 0;
  visibility: hidden;
}

.loader-text-wrap {
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  color: var(--white);
  letter-spacing: 0.04em;
}

.dot {
  opacity: 0;
  display: inline-block;
  transition: opacity 0.25s ease;
}

/* Glitch */
.loader-text-wrap {
  position: relative;
  font-family: 'Space Mono', monospace;
  font-size: 32px;
  color: var(--white);
  letter-spacing: 0.04em;
}

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

.loader-text-wrap::before {
  color: #fff;
  animation: glitch-1 0.4s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
}

.loader-text-wrap::after {
  color: #fff;
  animation: glitch-2 0.4s infinite;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
  0%   { transform: translate(0); opacity: 1; }
  20%  { transform: translate(-3px, 1px); opacity: 0.8; }
  40%  { transform: translate(3px, -1px); opacity: 0.9; }
  60%  { transform: translate(-2px, 2px); opacity: 0.8; }
  80%  { transform: translate(2px, -2px); opacity: 0.9; }
  100% { transform: translate(0); opacity: 1; }
}

@keyframes glitch-2 {
  0%   { transform: translate(0); opacity: 1; }
  20%  { transform: translate(3px, -1px); opacity: 0.8; }
  40%  { transform: translate(-3px, 1px); opacity: 0.9; }
  60%  { transform: translate(2px, -2px); opacity: 0.8; }
  80%  { transform: translate(-2px, 2px); opacity: 0.9; }
  100% { transform: translate(0); opacity: 1; }
}