/* fx.css — Global special effects layer
   This file contains reusable animations, particles, glows,
   distortions, trails, pulses, holograms, and all the delicious nonsense.
-------------------------------------------------------------- */

/* 1. Generic Glow Pulse -------------------------------------------------- */
.fx-glow-pulse {
  animation: fx-glow-pulse 3s ease-in-out infinite;
}

@keyframes fx-glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--fx-glow-color, #6ff));
    opacity: 1;
  }
  50% {
    filter: drop-shadow(0 0 8px var(--fx-glow-color, #6ff)) drop-shadow(0 0 18px var(--fx-glow-color, #6ff));
    opacity: 0.65;
  }
}

/* 2. Scanline Overlay ---------------------------------------------------- */
.fx-scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  animation: fx-scanlines 8s linear infinite;
}

@keyframes fx-scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* 3. CRT Flicker --------------------------------------------------------- */
.fx-crt-flicker {
  animation: fx-crt-flicker 0.12s infinite alternate;
}

@keyframes fx-crt-flicker {
  0% { opacity: 0.92; }
  100% { opacity: 1; }
}

/* 4. Parallax Drift ------------------------------------------------------ */
.fx-parallax-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  will-change: transform;
  animation: fx-parallax-drift 20s linear infinite;
  opacity: var(--fx-parallax-opacity, 0.5);
}

@keyframes fx-parallax-drift {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-2%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* 5. Hologram Shimmer ---------------------------------------------------- */
.fx-holo {
  animation: fx-holo 6s linear infinite;
  background: linear-gradient(
    115deg,
    rgba(0,255,255,0.15),
    rgba(255,0,255,0.15),
    rgba(0,255,255,0.15)
  );
  background-size: 300% 300%;
  mix-blend-mode: screen;
}

@keyframes fx-holo {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 6. Distortion Wobble --------------------------------------------------- */
.fx-wobble {
  animation: fx-wobble 3s ease-in-out infinite;
}

@keyframes fx-wobble {
  0% { transform: translateX(0) skewX(0deg); }
  25% { transform: translateX(2px) skewX(2deg); }
  50% { transform: translateX(-1px) skewX(-1deg); }
  75% { transform: translateX(1px) skewX(1deg); }
  100% { transform: translateX(0) skewX(0deg); }
}

/* 7. Particle Float ------------------------------------------------------ */
.fx-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.fx-particles span {
  position: absolute;
  width: var(--fx-p-size, 6px);
  height: var(--fx-p-size, 6px);
  border-radius: 50%;
  background: var(--fx-p-color, #6ff);
  opacity: 0.65;
  animation: fx-particle-float var(--fx-p-speed, 12s) linear infinite;
}

@keyframes fx-particle-float {
  0% { transform: translateY(120vh) translateX(0); opacity: 0; }
  10% { opacity: 0.85; }
  100% { transform: translateY(-20vh) translateX(var(--fx-p-drift, 20px)); opacity: 0; }
}

/* 8. Glitch Shock -------------------------------------------------------- */
.fx-glitch {
  position: relative;
  animation: fx-glitch-cycle 3s infinite;
}

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

.fx-glitch::before {
  color: #f0f;
  animation: fx-glitch-top 0.3s infinite linear alternate-reverse;
}

.fx-glitch::after {
  color: #0ff;
  animation: fx-glitch-bottom 0.3s infinite linear alternate-reverse;
}

@keyframes fx-glitch-top {
  0% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
  25% { clip: rect(5px, 9999px, 25px, 0); transform: translate(-2px); }
  75% { clip: rect(10px, 9999px, 40px, 0); transform: translate(2px); }
  100% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
}

@keyframes fx-glitch-bottom {
  0% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
  20% { clip: rect(30px, 9999px, 60px, 0); transform: translate(2px); }
  60% { clip: rect(10px, 9999px, 40px, 0); transform: translate(-2px); }
  100% { clip: rect(0, 9999px, 0, 0); transform: translate(0); }
}

@keyframes fx-glitch-cycle {
  0%, 90% { filter: none; }
  92% { filter: hue-rotate(45deg) contrast(180%); }
  94% { filter: none; }
  96% { filter: hue-rotate(-45deg) contrast(180%); }
  100% { filter: none; }
}