@import "tailwindcss";

@theme {
  --color-primary: #0df2df;
  --color-accent-violet: #8b5cf6;
  --color-accent-orange: #f97316;
  --font-display: "Plus Jakarta Sans", sans-serif;
}

@layer base {
  body {
    background-color: #f8fafc;
    color: #0f172a;
    font-family: var(--font-display);
    @apply antialiased;
  }
}

@utility gradient-text {
  background-image: linear-gradient(to right, #0df2df, #8b5cf6, #f97316) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline !important;
}

@utility icon-circle {
  @apply bg-slate-100 rounded-full flex items-center justify-center transition-all duration-300 hover:bg-slate-200 hover:scale-105;
}

@utility glass-card {
  @apply bg-white/80 backdrop-blur-xl border border-primary/10;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

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

  100% {
    transform: translateY(0px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@utility animate-fade-in {
  animation: fade-in 0.4s ease-out forwards;
}

@utility animate-float {
  animation: float 6s ease-in-out infinite;
}

@utility scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}