/* public/css/fx.css - Visual FX, Confetti & Sound Animations */
.fx-layer {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

/* Confetti particle */
.confetti-particle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  animation: confettiFall 2.8s linear forwards;
}

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(0deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(105vh) rotate(720deg) scale(0.6);
  }
}

/* Screen Shake Effect */
.shake-screen {
  animation: screenShake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes screenShake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

/* Horn sound wave pulse */
.horn-wave-burst {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 4px solid #00f3ff;
  animation: hornBurst 0.8s ease-out forwards;
}

@keyframes hornBurst {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

/* Matrix Rain Canvas */
.matrix-canvas {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0.35;
  pointer-events: none;
}