/* Shared animations for page transitions and effects */

@keyframes glitch-flash {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }
  5% {
    opacity: 0.8;
    transform: translateY(-10px);
    filter: hue-rotate(0deg);
  }
  10% {
    opacity: 0;
    transform: translateY(10px);
  }
  15% {
    opacity: 0.9;
    transform: translateY(-5px);
    filter: hue-rotate(90deg);
  }
  20% {
    opacity: 0;
    transform: translateY(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(-8px);
    filter: hue-rotate(180deg);
  }
  35% {
    opacity: 0;
    transform: translateY(8px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-3px);
    filter: hue-rotate(270deg);
  }
  55% {
    opacity: 0.5;
    transform: translateY(3px);
  }
  70% {
    opacity: 0.9;
    transform: translateY(-6px);
    filter: hue-rotate(360deg);
  }
  75% {
    opacity: 0.5;
    transform: translateY(6px);
  }
  90% {
    opacity: 0.2;
    transform: translateY(-2px);
  }
}

.glitch-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 0, 255, 0.5) 0px,
    rgba(0, 255, 255, 0.5) 2px,
    rgba(255, 255, 0, 0.5) 4px,
    transparent 6px
  );
  z-index: 10000;
  pointer-events: none;
  animation: glitch-flash 1.2s ease-in-out;
}

@keyframes enter-simulator {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: brightness(1);
  }
  100% {
    transform: scale(15) rotate(calc(var(--button-direction) * 360deg));
    opacity: 0;
    filter: brightness(5);
  }
}

@keyframes spiral-in {
  0% {
    opacity: 0;
    transform: scale(1) rotate(calc(var(--spiral-direction) * 720deg));
    filter: blur(10px);
  }
  5% { opacity: 0.3; }
  50% {
    filter: blur(2px);
  }
  100% {
    opacity: 0.5;
    transform: scale(10) rotate(0deg);
    filter: blur(0px);
  }
}

.spiral-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  animation: spiral-in 2s ease-out forwards;
}

.spiral-overlay.cw {
  --spiral-direction: 1;
}

.spiral-overlay.ccw {
  --spiral-direction: -1;
}

@keyframes color-wave {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  30% { opacity: 0.6; }
  70% { opacity: 0.6; }
  100% { opacity: 0; }
}

.color-wave-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    45deg,
    rgba(30, 144, 255, 0.4),
    rgba(147, 112, 219, 0.4),
    rgba(255, 215, 0, 0.4),
    rgba(255, 105, 180, 0.4),
    rgba(30, 144, 255, 0.4)
  );
  background-size: 300% 300%;
  z-index: 9997;
  pointer-events: none;
  animation: color-wave 2s ease-in-out, fade-in-out 2.5s ease-in-out;
}