@import "tailwindcss";

@theme {
  --color-brand-50:  #eef4fb;
  --color-brand-100: #d6e4f3;
  --color-brand-500: #2f6db4;
  --color-brand-600: #265a98;
  --color-brand-700: #1f4e79;
  --color-brand-800: #173d60;
  --color-brand-900: #0f2a44;

  --color-accent-400: #fb923c;
  --color-accent-500: #f97316;
  --color-accent-600: #ea580c;

  --color-ink-700: #334155;
  --color-ink-800: #1e293b;
  --color-ink-900: #0f172a;

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease-smooth: cubic-bezier(.22,.61,.36,1);
}

@layer base {
  html { scroll-behavior: smooth; }
  body { @apply font-sans antialiased text-ink-800 bg-white; }
  h1, h2, h3, h4 { @apply tracking-tight text-brand-700; }
}

@layer components {
  .btn,
  .btn-primary,
  .btn-accent,
  .btn-ghost,
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 rounded-full px-6 py-3 text-sm font-semibold transition-all duration-300 ease-[var(--ease-smooth)] shadow-sm;
  }
  .btn-primary {
    @apply bg-brand-700 text-white hover:bg-brand-800 hover:-translate-y-0.5 hover:shadow-lg;
  }
  .btn-accent {
    @apply bg-accent-500 text-white hover:bg-accent-600 hover:-translate-y-0.5 hover:shadow-xl shadow-accent-500/30;
  }
  .btn-ghost {
    @apply bg-white/10 text-white ring-1 ring-white/30 backdrop-blur hover:bg-white/20 hover:-translate-y-0.5;
  }
  .btn-outline {
    @apply bg-white text-brand-700 ring-1 ring-brand-700/20 hover:ring-brand-700/40 hover:-translate-y-0.5;
  }

  .glass-card {
    @apply rounded-2xl bg-white/10 px-5 py-3 text-sm font-medium text-white ring-1 ring-white/20 backdrop-blur-md shadow-lg;
  }

  .section { @apply py-20 md:py-28; }
  .container-narrow { @apply mx-auto w-full max-w-7xl px-6; }

  .section-eyebrow {
    @apply inline-block text-xs font-semibold uppercase tracking-[0.2em] text-accent-500;
  }

  .section-title {
    @apply mt-3 text-3xl md:text-5xl font-semibold tracking-tight text-brand-700;
  }

  .section-lead {
    @apply mt-4 max-w-2xl text-lg text-ink-700;
  }

  .card {
    @apply rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition-all duration-300 ease-[var(--ease-smooth)] hover:-translate-y-1 hover:shadow-2xl hover:ring-accent-400/40;
  }

  .service-card {
    @apply rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition-all duration-300 ease-[var(--ease-smooth)] hover:-translate-y-1 hover:shadow-2xl hover:ring-accent-400/40 flex items-start gap-4;
  }

  .industry-tile {
    @apply rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition-all duration-300 ease-[var(--ease-smooth)] hover:-translate-y-1 hover:shadow-2xl hover:ring-accent-400/40 flex flex-col items-center text-center gap-3;
  }

  .icon-circle {
    @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700;
  }

  .icon-circle-accent {
    @apply inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-accent-500/10 text-accent-600;
  }

  .form-input {
    @apply w-full rounded-xl border-0 bg-slate-50 px-4 py-3 text-ink-900 ring-1 ring-slate-200 transition placeholder:text-slate-400 focus:bg-white focus:ring-2 focus:ring-brand-500 focus:outline-none;
  }

  .form-label {
    @apply mb-1.5 block text-sm font-medium text-ink-800;
  }
}

/* ----- Reveal-on-scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--ease-smooth), transform 700ms var(--ease-smooth);
  will-change: opacity, transform;
}
.reveal[data-reveal-direction-value="left"]  { transform: translateX(-32px); }
.reveal[data-reveal-direction-value="right"] { transform: translateX(32px); }
.reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ----- Services horizontal scroll ----- */
@media (max-width: 639px) {
  .services-card.reveal { transform: translateY(24px); }
}

.services-scroll {
  scrollbar-width: none;
}
.services-scroll::-webkit-scrollbar {
  display: none;
}

/* ----- Service carousel ----- */
.service-carousel {
  touch-action: pan-y;
}
.service-carousel-slide {
  opacity: .28;
  transition: opacity 500ms var(--ease-smooth);
}
.service-carousel-slide-active {
  opacity: 1;
}
.service-carousel-slide-muted {
  pointer-events: none;
}
.service-carousel-image {
  transform: scale(1.05);
  transition: transform 900ms var(--ease-smooth);
}
.service-carousel-slide-active .service-carousel-image {
  transform: scale(1);
}
.service-carousel-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 420ms var(--ease-smooth), transform 420ms var(--ease-smooth);
}
.service-carousel-slide-active .service-carousel-item {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(220ms + (var(--item-index) * 45ms));
}

/* ----- Keyframes ----- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 35s linear infinite;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes scroll-hint {
  0%, 100% { transform: translate(-50%, 0); opacity: .9; }
  50%      { transform: translate(-50%, 8px); opacity: .4; }
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .55); }
  50%      { box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
}
.animate-pulse-glow { animation: pulse-glow 2s ease-out infinite; }

@keyframes draw-line {
  from { stroke-dashoffset: 100%; }
  to   { stroke-dashoffset: 0; }
}

/* ----- Logo grayscale → color on hover ----- */
.logo-mono {
  @apply opacity-60 grayscale transition duration-300;
}
.logo-mono:hover {
  @apply opacity-100 grayscale-0;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .services-card.reveal { transform: none; }
  .animate-marquee,
  .animate-pulse-glow { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}