/* Custom Animations & Overrides */

/* Keyframe Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5), 0 0 40px rgba(236, 72, 153, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(236, 72, 153, 0.8), 0 0 60px rgba(236, 72, 153, 0.5);
  }
}

@keyframes slot-glow {
  0%,
  100% {
    box-shadow: 0 0 30px rgba(251, 146, 60, 0.6), 0 0 60px rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 50px rgba(251, 146, 60, 0.9), 0 0 80px rgba(239, 68, 68, 0.6);
  }
}

@keyframes parallax-slow {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-20px);
  }
}

@keyframes category-3d {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

/* Applied Animation Classes */
.hero-float {
  animation: float 6s ease-in-out infinite;
}

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

.slot-glow {
  animation: slot-glow 3s ease-in-out infinite;
}

.game-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card:hover {
  transform: translateY(-5px) scale(1.02);
}

.feature-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
}

.category-3d {
  transition: transform 0.3s ease;
}

.category-3d:hover {
  transform: perspective(1000px) rotateY(10deg) scale(1.05);
}

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/* Prose Styling for Readability */
.prose {
  color: #374151;
  line-height: 1.75;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  color: #111827;
  font-weight: 700;
  line-height: 1.25;
}

.prose h2 {
  margin-top: 2em;
  margin-bottom: 1em;
}

.prose h3 {
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.prose p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

.prose a {
  color: #ec4899;
  text-decoration: underline;
  font-weight: 500;
}

.prose a:hover {
  color: #db2777;
}

.prose strong {
  color: #111827;
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}

.prose li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* CSS Pattern Background (Snowflakes) */
body {
  background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
    radial-gradient(circle at 40% 20%, rgba(255, 255, 255, 0.2) 1px, transparent 1px),
    radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
  background-size: 200px 200px, 300px 300px, 250px 250px, 350px 350px;
  background-position: 0 0, 50px 50px, 100px 100px, 150px 150px;
  animation: parallax-slow 20s ease-in-out infinite alternate;
}

/* Gradient Text */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Custom Shadows */
.shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Responsive Typography */
@media (max-width: 640px) {
  .prose {
    font-size: 0.95rem;
  }
}