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

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'sohne-var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 400;
    color: #334155;
    line-height: 1.6;
  }

  /* Compact, Refined Typography Scale (Never monstrous/oversized fonts) */
  h1, h2, h3, h4, h5, h6 {
    font-family: 'sohne-var', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
    color: #01385F;
    letter-spacing: -0.025em;
  }

  /* Mobile-first compact base sizes */
  h1 { font-size: 24px; font-weight: 700; line-height: 1.25; }
  h2 { font-size: 20px; font-weight: 650; line-height: 1.3; }
  h3 { font-size: 17px; font-weight: 600; line-height: 1.35; }
  h4 { font-size: 15px; font-weight: 600; line-height: 1.4; }
  p  { font-size: 14px; line-height: 1.6; }

  /* Tablet */
  @media (min-width: 640px) {
    h1 { font-size: 30px; }
    h2 { font-size: 24px; }
    h3 { font-size: 19px; }
    p  { font-size: 14.5px; }
  }

  /* Desktop / Laptop (Capped: Never exceeds 36-38px) */
  @media (min-width: 1024px) {
    h1 { font-size: 36px; }
    h2 { font-size: 26px; }
    h3 { font-size: 20px; }
    p  { font-size: 15px; }
  }
}

@layer components {
  /* Custom scrollbar */
  ::-webkit-scrollbar {
    width: 6px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
  }

  /* Form Elements */
  .form-input {
    @apply w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 bg-gray-50/50 focus:bg-white outline-none;
  }
  
  .form-label {
    @apply block text-sm font-medium text-gray-600 mb-2;
  }
}

/* ==============================
   Animations
   ============================== */

/* Fade In Up */
.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  transform: translateY(20px);
}

/* Fade In Left */
.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

/* Fade In Right */
.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
  opacity: 0;
  transform: translateX(20px);
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  to { opacity: 1; transform: translateX(0); }
}

/* Slow Bounce */
.animate-bounce-slow {
  animation: bounceSlow 3s infinite;
}
@keyframes bounceSlow {
  0%, 100% { transform: translateY(-5%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* Marquee (Client carousel) */
.animate-marquee {
  animation: marquee 25s linear infinite;
  display: flex;
}
.animate-marquee:hover {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Scroll Reveal (Intersection Observer) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }