.loader-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(10, 10, 12);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Class to disable scrolling */
body.no-scroll {
  overflow: hidden;
  height: 100%;
  width: 100%;
  position: fixed;
}

.loader {
  font-family: "Signord", sans-serif;
  font-size: clamp(3rem, 8vw, 8rem);
  position: relative;
  text-transform: uppercase;
  padding: 0 1rem;
  text-align: center;
  letter-spacing: 0.5rem;
  background: linear-gradient(180deg, #ffffff 0%, #a0a0a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.loader::before,
.loader::after {
  content: "10D10T";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: -1;
  letter-spacing: 0.5rem;
}

.loader::before {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(160, 160, 160, 0.8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitch-effect 3s infinite linear;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(clamp(-2px, -0.2vw, -4px), clamp(-2px, -0.2vw, -4px));
  opacity: 0.5;
}

.loader::after {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(160, 160, 160, 0.8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: glitch-effect 2s infinite linear reverse;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  transform: translate(clamp(2px, 0.2vw, 4px), clamp(2px, 0.2vw, 4px));
  opacity: 0.5;
}

@keyframes glitch-effect {
  0% {
    transform: translate(0);
    opacity: 0.5;
  }
  20% {
    transform: translate(clamp(-3px, -0.3vw, -6px), clamp(3px, 0.3vw, 6px));
    opacity: 0.7;
  }
  40% {
    transform: translate(clamp(-3px, -0.3vw, -6px), clamp(-3px, -0.3vw, -6px));
    opacity: 0.5;
  }
  60% {
    transform: translate(clamp(3px, 0.3vw, 6px), clamp(3px, 0.3vw, 6px));
    opacity: 0.7;
  }
  80% {
    transform: translate(clamp(3px, 0.3vw, 6px), clamp(-3px, -0.3vw, -6px));
    opacity: 0.5;
  }
  100% {
    transform: translate(0);
    opacity: 0.5;
  }
}

/* Fade out animation */
.loader-container.fade-out {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Add radial gradient overlay */
.loader-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    rgba(10, 10, 12, 0.7) 0%,
    rgb(10, 10, 12) 100%
  );
  pointer-events: none;
}