body {
  font-family: "Inter", sans-serif;
  background-color: #000;
  color: #fff;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Smooth Fade In */
.page-section {
  display: none;
  animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-section.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- FRAMER STYLE ANIMATIONS --- */
@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-enter {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* SVG Line Drawing */
@keyframes drawLine {
  from {
    stroke-dashoffset: 100;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

.svg-draw path,
.svg-draw circle,
.svg-draw rect {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Floating Elements */
@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.floating {
  animation: floatSlow 6s ease-in-out infinite;
}

/* Background Orb Movement */
.bg-orb {
  position: absolute;
  filter: blur(100px);
  opacity: 0.4;
  transition: all 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

/* Slide Transitions */
.onboarding-slide {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.onboarding-slide.active {
  display: flex;
}

/* Auth Form Transitions */
.auth-form-container {
  transition: all 0.3s ease-in-out;
}

.hidden-form {
  display: none;
  opacity: 0;
  transform: translateY(10px);
}

.visible-form {
  display: block;
  opacity: 1;
  transform: translateY(0);
  animation: slideUpFade 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Toast Animation (FIXED ALIGNMENT) */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.toast-enter {
  animation: slideDown 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Horizontal Scroll Snap */
.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-center {
  scroll-snap-align: center;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

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

/* Floating Coins Animation */
@keyframes floatCoin {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.6;
  }
  25% {
    transform: translateY(-20px) translateX(10px) rotate(90deg);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-30px) translateX(-5px) rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: translateY(-15px) translateX(-10px) rotate(270deg);
    opacity: 0.8;
  }
}

@keyframes floatCoin2 {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.5;
  }
  33% {
    transform: translateY(-25px) translateX(-8px) rotate(120deg);
    opacity: 0.9;
  }
  66% {
    transform: translateY(-35px) translateX(12px) rotate(240deg);
    opacity: 0.7;
  }
}

@keyframes floatCoin3 {
  0%,
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-18px) translateX(15px) rotate(144deg);
    opacity: 0.8;
  }
  80% {
    transform: translateY(-28px) translateX(-12px) rotate(288deg);
    opacity: 0.6;
  }
}

.floating-coin {
  animation: floatCoin 8s ease-in-out infinite;
}

.floating-coin-2 {
  animation: floatCoin2 10s ease-in-out infinite;
  animation-delay: 1s;
}

.floating-coin-3 {
  animation: floatCoin3 12s ease-in-out infinite;
  animation-delay: 2s;
}

/* Growing Chart Animation */
@keyframes growChart {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.chart-bar {
  animation: growChart 2s ease-out forwards;
}

.chart-bar-delay-1 {
  animation-delay: 0.2s;
}

.chart-bar-delay-2 {
  animation-delay: 0.4s;
}

.chart-bar-delay-3 {
  animation-delay: 0.6s;
}

.chart-bar-delay-4 {
  animation-delay: 0.8s;
}

.chart-bar-delay-5 {
  animation-delay: 1s;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.6);
  }
}

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

/* Counter Animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.count-animate {
  animation: countUp 1s ease-out forwards;
}