/**
 * ROUGESWORLD - Matrix Effects
 * Visual effects for the Matrix-themed website
 */

/* Digital Rain Canvas */
#matrix-rain-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  pointer-events: none;
}

/* Scanlines Overlay */
.scanlines-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 40, 0, 0.25) 0px,
    rgba(0, 40, 0, 0.25) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanlines 8s linear infinite;
}

@keyframes scanlines {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 100px;
  }
}

/* Energy Waves */
.energy-waves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  pointer-events: none;
  overflow: hidden;
}

.energy-wave {
  position: absolute;
  height: 2px;
  width: 200%;
  left: -50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--matrix-green-glow) 20%,
    var(--matrix-green) 50%,
    var(--matrix-green-glow) 80%,
    transparent 100%
  );
  opacity: 0.5;
  animation: wave-animation 8s linear infinite;
}

.energy-wave:nth-child(1) {
  top: 20%;
  animation-duration: 10s;
}

.energy-wave:nth-child(2) {
  top: 50%;
  animation-delay: 3s;
  animation-duration: 12s;
}

.energy-wave:nth-child(3) {
  top: 80%;
  animation-delay: 6s;
  animation-duration: 14s;
}

@keyframes wave-animation {
  0% {
    transform: translateX(-100%) translateY(0) scaleY(1);
  }
  50% {
    transform: translateX(0%) translateY(10px) scaleY(1.2);
  }
  100% {
    transform: translateX(100%) translateY(0) scaleY(1);
  }
}

/* Glitch Text Effect */
.glitch-text {
  position: relative;
  display: inline-block;
  color: var(--matrix-green);
  text-shadow: 0 0 10px var(--matrix-green-glow);
}

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

.glitch-text::before {
  animation: glitch-animation-1 3s infinite linear alternate-reverse;
  color: var(--cyber-pink);
  left: 2px;
  text-shadow: -1px 0 var(--cyber-blue);
  clip: rect(44px, 450px, 56px, 0);
}

.glitch-text::after {
  animation: glitch-animation-2 2s infinite linear alternate-reverse;
  color: var(--cyber-blue);
  left: -2px;
  text-shadow: 1px 0 var(--cyber-pink);
  clip: rect(24px, 450px, 36px, 0);
}

@keyframes glitch-animation-1 {
  0% {
    clip: rect(20px, 450px, 30px, 0);
  }
  20% {
    clip: rect(14px, 450px, 44px, 0);
  }
  40% {
    clip: rect(64px, 450px, 78px, 0);
  }
  60% {
    clip: rect(24px, 450px, 36px, 0);
  }
  80% {
    clip: rect(56px, 450px, 68px, 0);
  }
  100% {
    clip: rect(44px, 450px, 56px, 0);
  }
}

@keyframes glitch-animation-2 {
  0% {
    clip: rect(44px, 450px, 56px, 0);
  }
  20% {
    clip: rect(56px, 450px, 68px, 0);
  }
  40% {
    clip: rect(24px, 450px, 36px, 0);
  }
  60% {
    clip: rect(64px, 450px, 78px, 0);
  }
  80% {
    clip: rect(14px, 450px, 44px, 0);
  }
  100% {
    clip: rect(20px, 450px, 30px, 0);
  }
}

/* Animated Background */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-background);
  background: radial-gradient(
    ellipse at center,
    rgba(0, 40, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  animation: pulse-bg 10s ease-in-out infinite alternate;
}

@keyframes pulse-bg {
  0% {
    opacity: 0.7;
    background-position: 0% 0%;
  }
  50% {
    opacity: 0.9;
    background-position: 100% 0%;
  }
  100% {
    opacity: 0.7;
    background-position: 0% 0%;
  }
}

/* Matrix Code Characters */
.matrix-char {
  position: absolute;
  color: var(--matrix-green);
  font-family: var(--font-matrix);
  font-size: 1.2rem;
  text-shadow: 0 0 8px var(--matrix-green-glow);
  animation: matrix-fall linear forwards;
  opacity: 0;
}

@keyframes matrix-fall {
  0% {
    opacity: 0;
    transform: translateY(-100vh);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh);
  }
}

/* Neon Glow Effect */
.neon-glow {
  box-shadow: 0 0 10px var(--matrix-green-glow),
              0 0 20px var(--matrix-green-glow),
              0 0 30px var(--matrix-green-glow),
              0 0 40px var(--matrix-green-glow);
  animation: neon-pulse 2s ease-in-out infinite alternate;
}

@keyframes neon-pulse {
  from {
    box-shadow: 0 0 10px var(--matrix-green-glow),
                0 0 20px var(--matrix-green-glow),
                0 0 30px var(--matrix-green-glow),
                0 0 40px var(--matrix-green-glow);
  }
  to {
    box-shadow: 0 0 15px var(--matrix-green-glow),
                0 0 30px var(--matrix-green-glow),
                0 0 45px var(--matrix-green-glow),
                0 0 60px var(--matrix-green-glow);
  }
}

/* Flicker Effect */
.flicker {
  animation: flicker 2s linear infinite;
}

@keyframes flicker {
  0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% {
    opacity: 1;
  }
  20%, 21.999%, 63%, 63.999%, 65%, 69.999% {
    opacity: 0.33;
  }
}

/* Typing Effect */
.typing {
  overflow: hidden;
  border-right: 0.15em solid var(--matrix-green);
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--matrix-green) }
}

/* Pulse Effect */
.pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Hover Glow Effect */
.hover-glow {
  transition: all var(--transition-smooth);
}

.hover-glow:hover {
  color: var(--matrix-green-bright);
  text-shadow: 0 0 10px var(--matrix-green-glow),
               0 0 20px var(--matrix-green-glow);
}

/* Matrix Rain Intensification */
.matrix-intensify {
  animation: intensify 2s ease-in-out;
}

@keyframes intensify {
  0% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.5) saturate(1.5);
  }
  100% {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }
}

/* Performance Optimizations */
@media (prefers-reduced-motion: reduce) {
  .scanlines-overlay,
  .energy-wave,
  .glitch-text::before,
  .glitch-text::after,
  .animated-bg,
  .matrix-char,
  .neon-glow,
  .flicker,
  .typing,
  .pulse,
  .matrix-intensify {
    animation: none !important;
    transition: none !important;
  }
}

/* Low Performance Mode */
.low-performance .scanlines-overlay,
.low-performance .energy-waves,
.low-performance .animated-bg {
  display: none;
}

.low-performance .matrix-char {
  animation-duration: 10s !important;
}

.low-performance .glitch-text::before,
.low-performance .glitch-text::after {
  display: none;
}