/* Glitch Effects */

.glitch-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
}

.glitch-layer.active {
  animation: glitch-flash 0.3s ease-in-out;
}

@keyframes glitch-flash {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
}

/* RGB Split Effect */
.rgb-split {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  opacity: 0;
}

.rgb-split.active {
  animation: rgb-split-anim 0.2s ease-in-out;
}

@keyframes rgb-split-anim {
  0% {
    opacity: 0;
    transform: translate(0, 0);
  }
  33% {
    opacity: 1;
    transform: translate(-3px, 0);
    filter: 
      drop-shadow(3px 0 0 rgba(255, 0, 0, 0.8))
      drop-shadow(-3px 0 0 rgba(0, 255, 255, 0.8));
  }
  66% {
    opacity: 1;
    transform: translate(3px, 0);
    filter: 
      drop-shadow(-3px 0 0 rgba(255, 0, 0, 0.8))
      drop-shadow(3px 0 0 rgba(0, 255, 255, 0.8));
  }
  100% {
    opacity: 0;
    transform: translate(0, 0);
  }
}

/* Scan Lines */
.scan-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  opacity: 0.1;
  animation: scan-line-move 8s linear infinite;
}

@keyframes scan-line-move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}

/* Pixel Distortion */
.pixel-distortion {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  opacity: 0;
}

.pixel-distortion.active {
  animation: pixel-distort 0.4s steps(4) forwards;
}

@keyframes pixel-distort {
  0% {
    opacity: 0;
    filter: blur(0px);
  }
  25% {
    opacity: 0.5;
    filter: blur(2px);
    transform: scale(1.01);
  }
  50% {
    opacity: 0.8;
    filter: blur(4px);
    transform: scale(0.99);
  }
  75% {
    opacity: 0.5;
    filter: blur(2px);
    transform: scale(1.01);
  }
  100% {
    opacity: 0;
    filter: blur(0px);
    transform: scale(1);
  }
}

/* Screen Tear Effect */
.screen-tear {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 48%,
    rgba(255, 255, 255, 0.1) 49%,
    rgba(255, 255, 255, 0.1) 51%,
    transparent 52%,
    transparent 100%
  );
}

.screen-tear.active {
  animation: screen-tear-anim 0.3s ease-in-out;
}

@keyframes screen-tear-anim {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(20px);
  }
}

/* Chromatic Aberration */
.chromatic-aberration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-glitch);
  pointer-events: none;
  opacity: 0;
}

.chromatic-aberration.active {
  animation: chromatic-anim 0.5s ease-in-out;
}

@keyframes chromatic-anim {
  0%, 100% {
    opacity: 0;
    filter: 
      drop-shadow(0 0 0 rgba(255, 0, 0, 0))
      drop-shadow(0 0 0 rgba(0, 255, 255, 0));
  }
  50% {
    opacity: 1;
    filter: 
      drop-shadow(-5px 0 0 rgba(255, 0, 0, 0.8))
      drop-shadow(5px 0 0 rgba(0, 255, 255, 0.8));
  }
}