@import "tailwindcss";

/* ============================================
   URBANIST SCHRIFTART
   ============================================ */
@font-face {
  font-family: "Urbanist";
  src: url("/Urbanist/static/Urbanist-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("/Urbanist/static/Urbanist-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("/Urbanist/static/Urbanist-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("/Urbanist/static/Urbanist-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Urbanist";
  src: url("/Urbanist/static/Urbanist-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================
   TAILWIND THEME
   ============================================ */
@theme {
  --font-display: "Urbanist", sans-serif;
  --breakpoint-3xl: 1920px;
  --color-primary: #8dff69;
}

@layer base {
  html {
    font-family: var(--font-display);
    scroll-behavior: smooth;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
  }

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

  ::-webkit-scrollbar-track {
    background: #1a1a1a;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8dff69, #6fe047);
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a8ff8d, #5bc92e);
  }

  /* Firefox Scrollbar */
  * {
    scrollbar-width: auto;
    scrollbar-color: #6fe047 #1a1a1a;
  }

  /* Hide Scrollbar for Carousel */
  .hide-scrollbar::-webkit-scrollbar {
    display: none;
  }

  /* Animation Keyframes */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes pulse {
    0%,
    100% {
      opacity: 0.3;
    }
    50% {
      opacity: 0.5;
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Utility Classes */
  .animate-fadeIn {
    animation: fadeIn 0.5s ease-out;
  }

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

  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  /* Line Clamp */
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
