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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

@layer base {
  body {
    @apply font-sans antialiased text-gray-900;
    letter-spacing: -0.01em;
    user-select: none;
    -webkit-user-select: none;
  }

  /* Re-enable selection for inputs */
  input,
  textarea,
  [contenteditable] {
    user-select: text;
    -webkit-user-select: text;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    letter-spacing: -0.02em;
  }
}

@layer components {
  .btn-primary {
    @apply bg-black text-white px-8 py-3.5 rounded-lg font-medium hover:bg-gray-900 transition-all duration-700 inline-flex items-center gap-2 shadow-sm hover:shadow-md;
    letter-spacing: -0.01em;
  }

  .btn-secondary {
    @apply bg-white text-black px-8 py-3.5 rounded-lg font-medium border border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-all duration-700 inline-flex items-center gap-2 shadow-sm hover:shadow-md;
    letter-spacing: -0.01em;
  }

  .card {
    @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover:shadow-lg hover:border-gray-200 transition-all duration-700;
  }

  .section-title {
    @apply text-4xl md:text-5xl lg:text-6xl font-bold text-black mb-6;
    letter-spacing: -0.03em;
    line-height: 1.1;
  }

  .section-subtitle {
    @apply text-lg md:text-xl text-gray-600 mb-12 max-w-2xl;
    letter-spacing: -0.01em;
    line-height: 1.7;
  }
}


/* Critical Anti-Flicker & Layout Stability Rules */
html {
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  font-size: 15px;
  /* Minimalist Base Size */
}

/* Marquee Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-reverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-scroll {
  animation: scroll 40s linear infinite;
}

.animate-scroll-reverse {
  animation: scroll-reverse 40s linear infinite;
}

.animate-scroll:hover,
.animate-scroll-reverse:hover {
  animation-play-state: paused;
}

::-webkit-scrollbar {
  width: 8px !important;
}

::-webkit-scrollbar-track {
  background: #f1f1f1 !important;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8 !important;
}

/* Pre-reserve header space to prevent content jump */
#header-placeholder {
  min-height: 64px;
  display: block;
}

#footer-placeholder {
  min-height: 200px;
  display: block;
}

/* Default hidden state for content transition */
#main-content {
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}