/* Base Settings */
body {
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
}

[x-cloak] {
  display: none !important;
}

/* --- ANIMATIONS --- */

/* 1. Floating Stat Boxes */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.animate-float {
  animation: float 5s ease-in-out infinite;
}
.animate-float-delayed {
  animation: float 5s ease-in-out infinite;
  animation-delay: 2.5s;
}

/* 2. Background Particle Pulse */
@keyframes pulse-soft {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.1);
  }
}

.particle {
  animation: pulse-soft 8s infinite;
  position: absolute;
  border-radius: 9999px;
  filter: blur(40px);
}

/* 3. Entry Reveal (Fade In Up) */
/* Initial State */
.scroll-element {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}
.reveal {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}
/* Active State (Added by JS) */
.animate-enter {
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. Marquee (Gallery) */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
  width: max-content;
}
.hover\:pause:hover {
  animation-play-state: paused;
}

/* 5. Staggered Delays */
.delay-1 {
  animation-delay: 0.1s;
}
.delay-2 {
  animation-delay: 0.2s;
}
.delay-3 {
  animation-delay: 0.3s;
}
.delay-4 {
  animation-delay: 0.4s;
}