@font-face {
  font-family: 'Open Sauce';
  src: url('/src/fonts/OpenSauceOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('/src/fonts/OpenSauceOne-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('/src/fonts/OpenSauceOne-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sauce';
  src: url('/src/fonts/OpenSauceOne-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

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

@layer base {
  body {
    @apply bg-black text-white dark:bg-black dark:text-white font-opensauce;
  }
}

@layer components {
  .hero-heading {
    @apply text-3xl md:text-4xl lg:text-5xl text-white mb-4;
    font-weight: 500;
    line-height: 1.3;
    @apply md:leading-[1.2];
  }

  .hero-heading-2 {
    @apply text-2xl md:text-3xl lg:text-5xl text-white mb-4;
    font-weight: 300;
    line-height: 1.3;
    @apply md:leading-[1.2];
  }

  .hero-paragraph {
    @apply text-base md:text-lg lg:text-xl text-gray-300 mb-8;
    font-weight: 300;
    line-height: 1.6;
    @apply md:leading-[1.5];
  }

  .main-button {
    @apply relative px-4 py-2 md:px-6 md:py-3 text-white text-base md:text-lg font-medium rounded-full bg-black border border-yellow-500 transition-all duration-300 before:absolute before:inset-0 before:rounded-full before:blur-lg before:bg-yellow-500 before:opacity-20 before:content-[''] before:z-[-1] hover:before:opacity-40 hover:before:blur-xl hover:scale-105 hover:shadow-yellow-500/70;
  }

  .starry-bg {
    background-image: 
      radial-gradient(circle at center, transparent 0%, black 100%),
      url("data:image/svg+xml,%3Csvg width='300' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='rgba(255,255,255,0.25)'%3E%3Ccircle cx='150' cy='150' r='1.2'/%3E%3Ccircle cx='60' cy='90' r='1.2'/%3E%3Ccircle cx='240' cy='210' r='1.2'/%3E%3Ccircle cx='90' cy='240' r='1.2'/%3E%3Ccircle cx='210' cy='60' r='1.2'/%3E%3Ccircle cx='120' cy='180' r='1.2'/%3E%3Ccircle cx='180' cy='120' r='1.2'/%3E%3Ccircle cx='30' cy='30' r='1.2'/%3E%3Ccircle cx='270' cy='270' r='1.2'/%3E%3Ccircle cx='45' cy='150' r='1.2'/%3E%3Ccircle cx='255' cy='150' r='1.2'/%3E%3Ccircle cx='150' cy='45' r='1.2'/%3E%3Ccircle cx='150' cy='255' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%, 350px 350px;
  }

  .pill-button {
    @apply px-5 py-2.5 rounded-[50px] bg-black text-white font-bold relative transition-all duration-500 transform hover:scale-105 text-base;
    box-shadow: 0 0 60px rgba(234, 179, 8, 0.8),
                0 0 120px rgba(234, 179, 8, 0.6),
                0 0 180px rgba(234, 179, 8, 0.4);
    border: 2px solid rgba(234, 179, 8, 0.9);
  }

  .circular-layout {
    @apply relative w-[500px] h-[500px] md:w-[600px] md:h-[600px] mx-auto;
  }

  .circular-button {
    @apply absolute opacity-0 z-20;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transform: translate(-50%, -50%);
  }

  .circular-button[style*="right"] {
    transform: translate(50%, -50%);
  }

  .circular-button[style*="bottom"] {
    transform: translate(-50%, 50%);
  }

  .circular-button[style*="bottom"][style*="right"] {
    transform: translate(50%, 50%);
  }

  .title-container {
    @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10;
  }

  @media (max-width: 767px) {
    .bg-black\/80 {
      @apply bg-none;
    }

    .circular-layout {
      @apply flex flex-col justify-center items-center w-full max-w-full h-auto;
    }

    .title-container {
      @apply relative top-0 mb-5;
    }

    .pill-button-container {
      @apply mb-4 w-full max-w-[350px];
    }

    .pill-button {
      @apply w-full px-6 py-3 text-center text-base rounded-[50px];
    }

    body, html {
      @apply overflow-x-hidden;
    }

    section {
      @apply mx-0;
    }
  }
}

@layer utilities {
  .fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .fade-up.appear {
    opacity: 1;
    transform: translateY(0);
  }

  .delay-200 {
    transition-delay: 200ms;
  }

  .delay-400 {
    transition-delay: 400ms;
  }

  .delay-600 {
    transition-delay: 600ms;
  }

  .fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
  }

  .fade-in.appear {
    opacity: 1;
  }

  .scale-up {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .scale-up.appear {
    opacity: 1;
    transform: scale(1);
  }

  .slide-left {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .slide-left.appear {
    opacity: 1;
    transform: translateX(0);
  }
}