body {
  background: black;
  font-family: "Oswald", sans-serif;
  font-style: italic;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  position: relative;
  text-align: center;
}

.glitch {
  color: rgb(223, 191, 191);
  position: relative;
  font-size: 9vw;
  animation: glitch 1s infinite;
}

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

.glitch::before {
  left: -2px;
  text-shadow: -5px 0 magenta;
  animation: noise-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: 2px;
  text-shadow: -5px 0 lightgreen;
  animation: noise-2 2s infinite linear alternate-reverse;
}

@keyframes glitch {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(0);
  }
  10% {
    transform: translate(-5px, 2px) rotate(-1deg);
  }
  30% {
    transform: translate(5px, -2px) rotate(1deg);
  }
  50% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, -1px) rotate(-1deg);
  }
  90% {
    transform: translate(-2px, 2px) rotate(1deg);
  }
}

/* Noise animations */
@keyframes noise-1 {
  0%, 100% { clip-path: inset(0% 0 80% 0); }
  25% { clip-path: inset(20% 0 60% 0); }
  50% { clip-path: inset(40% 0 40% 0); }
  75% { clip-path: inset(60% 0 20% 0); }
}

@keyframes noise-2 {
  0%, 100% { clip-path: inset(80% 0 0% 0); }
  25% { clip-path: inset(60% 0 20% 0); }
  50% { clip-path: inset(40% 0 40% 0); }
  75% { clip-path: inset(20% 0 60% 0); }
}

/* Scanlines effect */
.scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: difference;
}

.scanlines::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.05) 0.5%,
    transparent 1%
  );
  animation: fudge 1s ease-in-out infinite alternate;
}

@keyframes fudge {
  from { transform: translateY(0); }
  to { transform: translateY(2%); }
}

/* Subtitle */
.subtitle {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 100;
  font-size: 1vw;
  color: rgba(165, 141, 141, 0.4);
  text-transform: uppercase;
  letter-spacing: 1em;
  position: absolute;
  width: 100%;
  bottom: -40px;
  left: 0;
  text-align: center;
  animation: glitch-2 1s infinite;
}

@keyframes glitch-2 {
  0%, 20%, 40%, 60%, 80%, 100% {
    transform: translate(0);
  }
  10% { transform: translate(-2px, 1px); }
  30% { transform: translate(2px, -1px); }
  50% { transform: translate(-1px, 2px); }
  70% { transform: translate(1px, -2px); }
  90% { transform: translate(-2px, 1px); }
}



/* Loading bar */

.loading-bar {
  position: absolute;
  bottom: 20px;       /* screen ke bottom se thoda upar */
  left: 50%;
  transform: translateX(-50%);
  width: 80%;         /* width adjust kar sakte ho */
  height: 4px;        /* patla line */
  background: rgba(255, 255, 255, 0.1); /* transparent background */
  border-radius: 2px;
  overflow: hidden;
}

.loading-bar .progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff00ff, #00ffff);
  animation: load 3s infinite;  /* 3s me full progress */
  border-radius: 2px;
}

@keyframes load {
  0% { width: 0%; }
  50% { width: 100%; }
  100% { width: 0%; }
}