/* Animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 0.6;
  }
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0) rotate(0);
  }
  25% {
    transform: translateY(-15px) translateX(10px) rotate(5deg);
  }
  50% {
    transform: translateY(10px) translateX(-10px) rotate(-5deg);
  }
  75% {
    transform: translateY(-5px) translateX(15px) rotate(8deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0);
  }
}

@keyframes movePattern {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 100px;
  }
}

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 var(--primary), -0.025em -0.05em 0 var(--secondary),
      0.025em 0.05em 0 var(--accent);
  }
  14% {
    text-shadow: 0.05em 0 0 var(--primary), -0.025em -0.05em 0 var(--secondary),
      0.025em 0.05em 0 var(--accent);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 var(--primary), 0.025em 0.025em 0 var(--secondary),
      -0.05em -0.05em 0 var(--accent);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 var(--primary), 0.025em 0.025em 0 var(--secondary),
      -0.05em -0.05em 0 var(--accent);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 var(--primary), 0.05em 0 0 var(--secondary),
      0 -0.05em 0 var(--accent);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 var(--primary), 0.05em 0 0 var(--secondary),
      0 -0.05em 0 var(--accent);
  }
  100% {
    text-shadow: -0.025em 0 0 var(--primary), -0.025em -0.025em 0 var(--secondary),
      -0.025em -0.05em 0 var(--accent);
  }
}

/* Glitch Text Effect */
.glitch {
  position: relative;
  animation: glitch 2s infinite;
}

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

.glitch:before {
  left: 2px;
  text-shadow: -1px 0 var(--primary);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch:after {
  left: -2px;
  text-shadow: -1px 0 var(--secondary);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% {
    clip: rect(22px, 9999px, 68px, 0);
  }
  10% {
    clip: rect(39px, 9999px, 25px, 0);
  }
  20% {
    clip: rect(21px, 9999px, 67px, 0);
  }
  30% {
    clip: rect(11px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(50px, 9999px, 82px, 0);
  }
  50% {
    clip: rect(32px, 9999px, 13px, 0);
  }
  60% {
    clip: rect(73px, 9999px, 92px, 0);
  }
  70% {
    clip: rect(51px, 9999px, 36px, 0);
  }
  80% {
    clip: rect(10px, 9999px, 64px, 0);
  }
  90% {
    clip: rect(91px, 9999px, 59px, 0);
  }
  100% {
    clip: rect(84px, 9999px, 73px, 0);
  }
}

@keyframes glitch-anim2 {
  0% {
    clip: rect(45px, 9999px, 70px, 0);
  }
  10% {
    clip: rect(25px, 9999px, 39px, 0);
  }
  20% {
    clip: rect(63px, 9999px, 45px, 0);
  }
  30% {
    clip: rect(15px, 9999px, 56px, 0);
  }
  40% {
    clip: rect(82px, 9999px, 31px, 0);
  }
  50% {
    clip: rect(41px, 9999px, 73px, 0);
  }
  60% {
    clip: rect(54px, 9999px, 18px, 0);
  }
  70% {
    clip: rect(26px, 9999px, 42px, 0);
  }
  80% {
    clip: rect(60px, 9999px, 13px, 0);
  }
  90% {
    clip: rect(12px, 9999px, 90px, 0);
  }
  100% {
    clip: rect(79px, 9999px, 66px, 0);
  }
}

/* Button Hover Effect */
@keyframes btnHover {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 61, 137, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 61, 137, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 61, 137, 0);
  }
}

.btn-primary:hover {
  animation: btnHover 1s infinite;
}

/* Morphing Shapes */
@keyframes morphShape {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
  25% {
    border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%;
  }
  50% {
    border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%;
  }
  75% {
    border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%;
  }
  100% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  }
}

.art-piece {
  animation: morphShape 15s infinite;
}

/* Menu Item Hover Animation */
.menu-item span {
  display: inline-block;
  transition: transform 0.3s ease;
}

.menu-item:hover span {
  transform: translateY(-3px);
}

/* Section Entrance Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feature-item, .game-card, .about-content > div {
  opacity: 0;
  animation: fadeInUp 0.8s forwards;
}

/* Loading Animation for Game Cards */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.game-image:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--grey-900) 8%, var(--grey-800) 18%, var(--grey-900) 33%);
  background-size: 800px 104px;
  animation: shimmer 1.5s infinite;
  z-index: -1;
}