/**
 * INKEGG Design System - Visual Effects
 * Glitch, CRT scanlines, and cyberpunk effects
 */

/* ===== CRT SCANLINES ===== */
.effect-scanlines {
  position: relative;
  overflow: hidden;
}

.effect-scanlines::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
  animation: scanline 8s linear infinite;
}

@keyframes scanline {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

/* ===== CRT FULL EFFECT (scanlines + curvature) ===== */
.effect-crt {
  position: relative;
  overflow: hidden;
}

/* Scanlines */
.effect-crt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  z-index: 2;
  animation: scanline 8s linear infinite;
}

/* Screen flicker */
.effect-crt::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

/* ===== GLITCH EFFECT ===== */
.effect-glitch {
  position: relative;
  display: inline-block;
}

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

.effect-glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--color-cyberpunk-pink);
  clip: rect(24px, 550px, 90px, 0);
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
}

.effect-glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--color-terminal-green);
  clip: rect(85px, 550px, 140px, 0);
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim-1 {
  0% { clip: rect(61px, 9999px, 85px, 0); }
  5% { clip: rect(94px, 9999px, 37px, 0); }
  10% { clip: rect(12px, 9999px, 148px, 0); }
  15% { clip: rect(73px, 9999px, 101px, 0); }
  20% { clip: rect(88px, 9999px, 56px, 0); }
  25% { clip: rect(24px, 9999px, 126px, 0); }
  30% { clip: rect(107px, 9999px, 72px, 0); }
  35% { clip: rect(43px, 9999px, 115px, 0); }
  40% { clip: rect(91px, 9999px, 29px, 0); }
  45% { clip: rect(52px, 9999px, 138px, 0); }
  50% { clip: rect(78px, 9999px, 64px, 0); }
  55% { clip: rect(19px, 9999px, 142px, 0); }
  60% { clip: rect(104px, 9999px, 47px, 0); }
  65% { clip: rect(36px, 9999px, 119px, 0); }
  70% { clip: rect(85px, 9999px, 60px, 0); }
  75% { clip: rect(28px, 9999px, 133px, 0); }
  80% { clip: rect(96px, 9999px, 41px, 0); }
  85% { clip: rect(55px, 9999px, 109px, 0); }
  90% { clip: rect(68px, 9999px, 82px, 0); }
  95% { clip: rect(31px, 9999px, 124px, 0); }
  100% { clip: rect(99px, 9999px, 53px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(85px, 9999px, 18px, 0); }
  5% { clip: rect(46px, 9999px, 132px, 0); }
  10% { clip: rect(112px, 9999px, 71px, 0); }
  15% { clip: rect(23px, 9999px, 145px, 0); }
  20% { clip: rect(93px, 9999px, 34px, 0); }
  25% { clip: rect(58px, 9999px, 127px, 0); }
  30% { clip: rect(5px, 9999px, 98px, 0); }
  35% { clip: rect(118px, 9999px, 63px, 0); }
  40% { clip: rect(39px, 9999px, 140px, 0); }
  45% { clip: rect(81px, 9999px, 22px, 0); }
  50% { clip: rect(67px, 9999px, 105px, 0); }
  55% { clip: rect(14px, 9999px, 151px, 0); }
  60% { clip: rect(103px, 9999px, 48px, 0); }
  65% { clip: rect(29px, 9999px, 136px, 0); }
  70% { clip: rect(90px, 9999px, 57px, 0); }
  75% { clip: rect(42px, 9999px, 121px, 0); }
  80% { clip: rect(76px, 9999px, 11px, 0); }
  85% { clip: rect(108px, 9999px, 84px, 0); }
  90% { clip: rect(35px, 9999px, 143px, 0); }
  95% { clip: rect(97px, 9999px, 26px, 0); }
  100% { clip: rect(61px, 9999px, 114px, 0); }
}

/* Subtle glitch (less intense) */
.effect-glitch-subtle {
  position: relative;
  animation: glitch-subtle 8s infinite;
}

@keyframes glitch-subtle {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(2px, 0); }
  66% { transform: translate(-2px, 0); }
}

/* ===== DISTORTION EFFECT ===== */
.effect-distort {
  animation: distort 10s infinite;
}

@keyframes distort {
  0%, 100% {
    transform: skew(0deg, 0deg);
  }
  25% {
    transform: skew(0.3deg, 0);
  }
  50% {
    transform: skew(-0.3deg, 0);
  }
  75% {
    transform: skew(0, 0.3deg);
  }
}

/* ===== CHROMATIC ABERRATION ===== */
.effect-chromatic {
  position: relative;
  filter: blur(0.5px);
}

.effect-chromatic::before,
.effect-chromatic::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.effect-chromatic::before {
  background: var(--color-cyberpunk-pink);
  opacity: 0.1;
  transform: translateX(-2px);
}

.effect-chromatic::after {
  background: var(--color-terminal-green);
  opacity: 0.1;
  transform: translateX(2px);
}

/* ===== STATIC NOISE ===== */
.effect-noise {
  position: relative;
  overflow: hidden;
}

.effect-noise::before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='4' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: noise 1s steps(10) infinite;
  pointer-events: none;
}

@keyframes noise {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -10%); }
  20% { transform: translate(-15%, 5%); }
  30% { transform: translate(7%, -25%); }
  40% { transform: translate(-5%, 25%); }
  50% { transform: translate(-15%, 10%); }
  60% { transform: translate(15%, 0%); }
  70% { transform: translate(0%, 15%); }
  80% { transform: translate(3%, 35%); }
  90% { transform: translate(-10%, 10%); }
}

/* ===== RGB SPLIT ===== */
.effect-rgb-split {
  position: relative;
}

.effect-rgb-split::before,
.effect-rgb-split::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
  pointer-events: none;
}

.effect-rgb-split::before {
  color: var(--color-cyberpunk-pink);
  transform: translateX(-1px);
  animation: rgb-split-left 4s infinite;
}

.effect-rgb-split::after {
  color: var(--color-terminal-green);
  transform: translateX(1px);
  animation: rgb-split-right 4s infinite;
}

@keyframes rgb-split-left {
  0%, 100% { transform: translateX(-1px); }
  50% { transform: translateX(-3px); }
}

@keyframes rgb-split-right {
  0%, 100% { transform: translateX(1px); }
  50% { transform: translateX(3px); }
}

/* ===== GLOW PULSE ===== */
.effect-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: var(--glow-green);
  }
  50% {
    box-shadow: var(--glow-green-lg);
  }
}

.effect-glow-pulse-pink {
  animation: glow-pulse-pink 2s ease-in-out infinite;
}

@keyframes glow-pulse-pink {
  0%, 100% {
    box-shadow: var(--glow-pink);
  }
  50% {
    box-shadow: var(--glow-pink-lg);
  }
}

/* ===== LOADING CURSOR ===== */
.effect-loading-cursor::after {
  content: '█';
  display: inline-block;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

/* ===== TYPING EFFECT ===== */
.effect-typing {
  overflow: hidden;
  border-right: 2px solid var(--color-terminal-green);
  white-space: nowrap;
  animation:
    typing 3.5s steps(40, end),
    cursor-blink 0.75s step-end infinite;
}

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

/* ===== SCREEN TEARING ===== */
.effect-tear {
  position: relative;
  animation: tear 8s infinite;
}

@keyframes tear {
  0%, 100% {
    clip-path: inset(0 0 0 0);
  }
  3% {
    clip-path: inset(20% 0 0 0);
  }
  6% {
    clip-path: inset(0 0 0 0);
  }
  9% {
    clip-path: inset(0 0 40% 0);
  }
  12% {
    clip-path: inset(0 0 0 0);
  }
}

/* ===== PIXEL SHIFT ===== */
.effect-pixel-shift {
  animation: pixel-shift 5s infinite;
}

@keyframes pixel-shift {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-1px, 1px);
  }
  20% {
    transform: translate(1px, -1px);
  }
  30% {
    transform: translate(-1px, -1px);
  }
  40% {
    transform: translate(1px, 1px);
  }
  50% {
    transform: translate(0, 0);
  }
}

/* ===== HOLOGRAM EFFECT ===== */
.effect-hologram {
  position: relative;
  animation: hologram-flicker 0.5s infinite;
}

.effect-hologram::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    transparent 0%,
    rgba(51, 255, 51, 0.1) 50%,
    transparent 100%
  );
  animation: hologram-scan 3s linear infinite;
  pointer-events: none;
}

@keyframes hologram-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.95; }
}

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

/* ===== ACCESSIBILITY: Disable effects for reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .effect-scanlines::before,
  .effect-crt::before,
  .effect-crt::after,
  .effect-glitch::before,
  .effect-glitch::after,
  .effect-noise::before {
    animation: none;
  }

  .effect-glitch-subtle,
  .effect-distort,
  .effect-glow-pulse,
  .effect-glow-pulse-pink,
  .effect-loading-cursor::after,
  .effect-typing,
  .effect-tear,
  .effect-pixel-shift,
  .effect-hologram {
    animation: none;
  }
}

/* ===== UTILITY: Apply effects on hover ===== */
.hover-glitch:hover {
  animation: glitch-subtle 0.3s;
}

.hover-glow-green:hover {
  box-shadow: var(--glow-green-lg);
}

.hover-glow-pink:hover {
  box-shadow: var(--glow-pink-lg);
}