@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    background: black;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none;
  }
  
  .font-podium {
    font-family: "FSP DEMO - PODIUM Sharp 4.11", impact, sans-serif;
  }

  .font-inter {
    font-family: 'Inter', sans-serif;
  }
}

@layer utilities {
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .animate-fade-up {
    animation: fade-up 0.8s ease-out forwards;
    opacity: 0;
  }

  .animate-fade-up-delay-1 {
    animation: fade-up 0.8s ease-out 0.2s forwards;
    opacity: 0;
  }

  .animate-fade-up-delay-2 {
    animation: fade-up 0.8s ease-out 0.4s forwards;
    opacity: 0;
  }

  .animate-fade-up-delay-3 {
    animation: fade-up 0.8s ease-out 0.6s forwards;
    opacity: 0;
  }

  .animate-fade-up-delay-4 {
    animation: fade-up 0.8s ease-out 0.8s forwards;
    opacity: 0;
  }

  .video-bg {
    filter: brightness(0.6) contrast(1.1);
  }
}

.text-clamp-heading {
  font-size: clamp(2.8rem, 8vw, 7rem);
}