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

/**
 * Dark theme design tokens. These CSS variables are the single source of
 * truth for colors — Tailwind references them in tailwind.config.ts, so
 * use semantic classes (bg-background, text-foreground, bg-primary, …)
 * everywhere instead of raw hex values.
 */
:root {
  /* Colors are stored as "R G B" channel triplets (not hex) so Tailwind's
     opacity modifiers work: bg-surface/95, bg-background/80, from-primary/10…
     Reference them as rgb(var(--token)) in raw CSS. */
  --background: 10 10 11;
  --foreground: 245 245 246;

  --surface: 20 20 23;
  --border: 38 38 43;

  --muted: 28 28 32;
  --muted-foreground: 161 161 170;

  /* Brand orange — sampled from CerkelLogo.png */
  --primary: 239 128 34;
  --primary-foreground: 255 255 255;

  /* Warm gold accent for gradients / highlights */
  --accent: 251 176 64;
  --accent-foreground: 10 10 11;

  --radius: 0.75rem;
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    color-scheme: dark;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-heading font-semibold tracking-tight;
  }

  ::selection {
    @apply bg-primary text-primary-foreground;
  }
}

@layer components {
  /* Fluid content wrapper — near full-width with a thin side gutter.
     Bumps the gutter up slightly on larger screens; the max-width ceiling
     only kicks in on very wide/4K displays to keep line lengths sane.
     Tune the padding values here to taste. */
  .container {
    width: 100%;
    margin-inline: auto;
    max-width: 120rem; /* ~1920px ceiling */
    padding-inline: 1rem;
  }

  @media (min-width: 640px) {
    .container {
      padding-inline: 1.5rem;
    }
  }

  @media (min-width: 1024px) {
    .container {
      padding-inline: 2.5rem;
    }
  }

  /* Reusable layout wrapper for consistent horizontal rhythm. */
  .section {
    @apply py-16 md:py-24;
  }
}

/* Continuous marquee (hero tech band). The track holds two copies of the
   content, so translating -50% loops seamlessly. */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-marquee:hover {
  animation-play-state: paused;
}

/* Faster marquee for the video-hero logo strip. */
.animate-marquee-20 {
  animation: marquee 20s linear infinite;
}

.animate-marquee-20:hover {
  animation-play-state: paused;
}

/* Testimonial wall rows — opposite directions, pause on hover. */
.animate-marquee-slow {
  animation: marquee 42s linear infinite;
}

.animate-marquee-slow-rev {
  animation: marquee 48s linear infinite reverse;
}

.animate-marquee-slow:hover,
.animate-marquee-slow-rev:hover {
  animation-play-state: paused;
}

/* Liquid-glass tile (video hero logo marquee, glass buttons). */
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Hero: cinematic slow zoom (Ken Burns) on the background banners. */
@keyframes kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.08);
  }
}

.animate-kenburns {
  animation: kenburns 12s ease-in-out infinite alternate;
}

/* Hero: slideshow progress bar fill (matches the auto-advance interval). */
@keyframes slide-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.slide-progress {
  transform-origin: left;
  animation: slide-progress 4500ms linear forwards;
}

/* Slow orbit (Cerkel AI visual). */
@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

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

.animate-spin-slow-rev {
  animation: spin-slow 22s linear infinite reverse;
}

/* Rotating conic "beam" border (service cards). */
.animate-border-spin {
  animation: spin-slow 5s linear infinite;
}

/* Gradient text shimmer (section headlines). */
@keyframes text-shimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.animate-text-shimmer {
  background-size: 200% auto;
  animation: text-shimmer 4s linear infinite;
}

/* Traveling light beam (header hairline, announcement sheen). */
@keyframes beam-x {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(420%);
  }
}

.animate-beam {
  animation: beam-x 5.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Mega-menu link entrance (plays on mount; set animation-delay inline). */
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-in {
  animation: menu-in 0.35s ease-out both;
}

/* Lenis smooth scroll (see src/components/providers/SmoothScroll.jsx) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* Animated CTA button (adapted from Uiverse / gharsh11032000) — brand orange.
   Use via the <AnimatedButton> component. */
.animated-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 14px 46px;
  border: 4px solid transparent;
  font-size: 15px;
  background-color: transparent;
  border-radius: 100px;
  font-weight: 600;
  color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgb(var(--primary));
  cursor: pointer;
  overflow: hidden;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button svg {
  position: absolute;
  width: 20px;
  fill: rgb(var(--primary));
  z-index: 9;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .arr-1 {
  right: 20px;
  opacity: 1;
}

.animated-button .arr-2 {
  left: -25%;
  opacity: 0;
}

.animated-button .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background-color: rgb(var(--primary));
  border-radius: 50%;
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button .text {
  position: relative;
  z-index: 1;
  transform: translateX(0);
  white-space: nowrap;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.animated-button:hover {
  box-shadow: 0 0 0 12px transparent;
  color: rgb(var(--background));
  border-radius: 12px;
}

.animated-button:hover .arr-1 {
  right: -25%;
  opacity: 0;
}

.animated-button:hover .arr-2 {
  left: 16px;
  opacity: 1;
}

.animated-button:hover .text {
  transform: translateX(0);
}

.animated-button:hover svg {
  fill: rgb(var(--background));
}

.animated-button:active {
  scale: 0.96;
  box-shadow: 0 0 0 4px rgb(var(--primary));
}

.animated-button:hover .circle {
  width: 460px;
  height: 460px;
  opacity: 1;
}

/* Compact variant for tight spots (header, menus). */
.animated-button.btn-sm {
  padding: 9px 36px;
  font-size: 13px;
}

.animated-button.btn-sm svg {
  width: 16px;
}

.animated-button.btn-sm .arr-1 {
  right: 14px;
}

.animated-button.btn-sm:hover .arr-2 {
  left: 14px;
}