body {
    margin: 0;
    font-family: sans-serif;
    color: white; /* Adjust text color for contrast with your background image */
    text-align: center;
}

.glitch-background-container {
  position: relative;
  width: 100vw; /* Or specific width */
  height: 100vh; /* Or specific height */
  overflow: hidden; /* Important to contain glitch effects */
  background-image: url('bg.jpg'); /* Your background image */
  background-size: cover;
  background-position: center;

  opacity: 0; /* Start with opacity 0 */
  transition: opacity 2s ease-in; /* Apply a 2-second fade-in transition */
}

.fade-in {
    opacity: 1;
}

.glitch-background-container::before,
.glitch-background-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Inherit the background image */
  background-size: cover;
  background-position: center;
  pointer-events: none; /* Allow interaction with underlying content */
}

/* Glitch animation for the ::before pseudo-element */
.glitch-background-container::before {
  filter: hue-rotate(90deg) saturate(150%); /* Adjust colors for a neon effect */
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

/* Glitch animation for the ::after pseudo-element */
.glitch-background-container::after {
  filter: hue-rotate(180deg) saturate(200%); /* Adjust colors for a different neon effect */
  animation: glitch-anim-2 3.5s infinite linear alternate-reverse;
}

/* Keyframe animations for the glitch effect */
@keyframes glitch-anim-1 {
  0%, 100% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  20% {
    transform: translate(-5px, 5px);
    clip-path: inset(10% 0 80% 0);
  }
  40% {
    transform: translate(5px, -5px);
    clip-path: inset(30% 0 60% 0);
  }
  60% {
    transform: translate(-3px, 3px);
    clip-path: inset(50% 0 40% 0);
  }
  80% {
    transform: translate(3px, -3px);
    clip-path: inset(70% 0 20% 0);
  }
}

@keyframes glitch-anim-2 {
  0%, 100% {
    transform: translate(0, 0);
    clip-path: inset(0 0 0 0);
  }
  25% {
    transform: translate(4px, -4px);
    clip-path: inset(5% 0 85% 0);
  }
  50% {
    transform: translate(-4px, 4px);
    clip-path: inset(25% 0 65% 0);
  }
  75% {
    transform: translate(2px, -2px);
    clip-path: inset(45% 0 45% 0);
  }
}