/* src/styles/effects.css */

.glow-pulse {
  animation: glowPulseBreathing 1.8s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes glowPulseBreathing {
  0% {
    filter: brightness(1) contrast(1);
    box-shadow: 0 0 10px var(--glow-color, rgba(88, 255, 216, 0.3)),
      inset 0 0 30px var(--glow-color, rgba(88, 255, 216, 0.1));
  }
  50% {
    filter: brightness(1.4) contrast(1.2);
    box-shadow: 0 0 30px var(--glow-color, rgba(88, 255, 216, 0.8)),
      inset 0 0 80px var(--glow-color, rgba(88, 255, 216, 0.4));
  }
  100% {
    filter: brightness(1) contrast(1);
    box-shadow: 0 0 10px var(--glow-color, rgba(88, 255, 216, 0.3)),
      inset 0 0 30px var(--glow-color, rgba(88, 255, 216, 0.1));
  }
}

.raster-pulse {
  animation: rasterPulseEnhanced 420ms ease;
  animation-fill-mode: both;
}

@keyframes rasterPulseEnhanced {
  0% {
    filter: brightness(1) contrast(1) saturate(1);
    box-shadow: 0 0 0 rgba(100, 200, 255, 0);
  }
  30% {
    filter: brightness(1.4) contrast(1.2) saturate(1.3);
    box-shadow: inset 0 0 100px var(--pulse-color, rgba(100, 200, 255, 0.15)),
      0 0 30px var(--pulse-color, rgba(100, 200, 255, 0.3));
  }
  60% {
    filter: brightness(1.2) contrast(1.1) saturate(1.15);
    box-shadow: inset 0 0 50px var(--pulse-color, rgba(100, 200, 255, 0.08)),
      0 0 15px var(--pulse-color, rgba(100, 200, 255, 0.15));
  }
  100% {
    filter: brightness(1) contrast(1) saturate(1);
    box-shadow: 0 0 0 rgba(100, 200, 255, 0);
  }
}

.circuit-flash {
  animation: circuitFlash 300ms ease-out;
}

@keyframes circuitFlash {
  0%,
  100% {
    box-shadow: 0 0 0 rgba(0, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 20px var(--circuit-color, rgba(0, 255, 255, 0.6)),
      inset 0 0 30px var(--circuit-color, rgba(0, 255, 255, 0.3));
  }
}

.shake-soft {
  animation: shakeSoft 220ms ease;
}

@keyframes shakeSoft {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-1px, 0);
  }
  40% {
    transform: translate(1px, 0);
  }
  60% {
    transform: translate(-1px, 0);
  }
  80% {
    transform: translate(1px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

.blur-dizzy {
  animation: blurDizzy 0.8s ease;
}

@keyframes blurDizzy {
  0% {
    filter: blur(0px);
  }
  50% {
    filter: blur(6px) brightness(1.1);
  }
  100% {
    filter: blur(0px);
  }
}

.white-flash {
  animation: whiteFlashEnhanced 400ms ease-out !important;
}

@keyframes whiteFlashEnhanced {
  0% {
    background-color: rgba(255, 255, 255, 0) !important;
    filter: brightness(1) contrast(1) !important;
  }
  15% {
    background-color: rgba(255, 255, 255, 0.9) !important;
    filter: brightness(2) contrast(1.5) !important;
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8) !important;
  }
  30% {
    background-color: rgba(255, 255, 255, 0.7) !important;
    filter: brightness(1.8) contrast(1.3) !important;
    box-shadow: 0 0 60px rgba(255, 255, 255, 0.6) !important;
  }
  50% {
    background-color: rgba(255, 255, 255, 0.4) !important;
    filter: brightness(1.4) contrast(1.1) !important;
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3) !important;
  }
  70% {
    background-color: rgba(255, 255, 255, 0.2) !important;
    filter: brightness(1.1) contrast(1) !important;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1) !important;
  }
  100% {
    background-color: rgba(255, 255, 255, 0) !important;
    filter: brightness(1) contrast(1) !important;
    box-shadow: none !important;
  }
}

.screen-shake {
  animation: screenShake 500ms ease-in-out;
}

@keyframes screenShake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(-4px, -2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate(4px, 2px);
  }
}

.warp-tunnel {
  animation: warpTunnel 1200ms ease-in-out;
}

@keyframes warpTunnel {
  0% {
    filter: blur(0px) hue-rotate(0deg);
    transform: scale(1);
  }
  30% {
    filter: blur(8px) hue-rotate(180deg);
    transform: scale(1.1);
  }
  70% {
    filter: blur(12px) hue-rotate(360deg);
    transform: scale(0.95);
  }
  100% {
    filter: blur(0px) hue-rotate(0deg);
    transform: scale(1);
  }
}

.particle-converge {
  animation: particleConverge 800ms ease-out;
}

@keyframes particleConverge {
  0% {
    background: radial-gradient(
        circle at 20% 20%,
        var(--particle-color, rgba(88, 255, 216, 0.1)) 0%,
        transparent 50%
      ),
      radial-gradient(
        circle at 80% 80%,
        var(--particle-color, rgba(88, 255, 216, 0.1)) 0%,
        transparent 50%
      );
  }
  50% {
    background: radial-gradient(
      circle at 50% 50%,
      var(--particle-color, rgba(88, 255, 216, 0.3)) 0%,
      transparent 70%
    );
  }
  100% {
    background: radial-gradient(
      circle at 50% 50%,
      var(--particle-color, rgba(88, 255, 216, 0)) 0%,
      transparent 70%
    );
  }
}

.grid-containment {
  animation: gridContainment 1000ms ease-in-out;
}

@keyframes gridContainment {
  0% {
    box-shadow: 0 0 0 rgba(255, 77, 79, 0);
    background-image: linear-gradient(
        rgba(255, 77, 79, 0.1) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 77, 79, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 77, 79, 0.4);
    background-image: linear-gradient(
        rgba(255, 77, 79, 0.3) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 77, 79, 0.3) 1px, transparent 1px);
    background-size: 20px 20px;
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 77, 79, 0);
    background-image: linear-gradient(rgba(255, 77, 79, 0) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 77, 79, 0) 1px, transparent 1px);
    background-size: 20px 20px;
  }
}