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

:root {
  --background: 210 40% 98%;
  --foreground: 222 47% 11%;
  --card: 0 0% 100%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 19% 38%;
  --border: 214 32% 88%;
  --grid-line: rgba(15, 23, 42, 0.055);
  --selection: rgba(99, 102, 241, 0.2);
  color-scheme: light;
}

.dark {
  --background: 228 33% 4%;
  --foreground: 210 40% 96%;
  --card: 222 28% 7%;
  --muted: 217 33% 11%;
  --muted-foreground: 215 20% 62%;
  --border: 217 33% 17%;
  --grid-line: rgba(148, 163, 184, 0.06);
  --selection: rgba(99, 102, 241, 0.35);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
}

section {
  scroll-margin-top: 6.5rem;
}

::selection {
  background: var(--selection);
  color: hsl(var(--foreground));
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4f46e5, #0ea5e9);
  border-radius: 999px;
  border: 2px solid hsl(var(--background));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6366f1, #22d3ee);
}

@layer components {
  .glass {
    @apply border border-border bg-card/70 backdrop-blur-xl;
  }

  .text-gradient {
    @apply bg-gradient-to-r from-indigo-600 via-sky-600 to-cyan-600 bg-clip-text text-transparent dark:from-indigo-400 dark:via-sky-400 dark:to-cyan-300;
  }

  .section-padding {
    @apply px-4 py-16 sm:px-6 md:py-20;
  }

  .section-shell {
    @apply mx-auto w-full max-w-6xl;
  }

  .card-hover {
    @apply transition-all duration-300 hover:-translate-y-1 hover:border-indigo-500/30 hover:shadow-lg hover:shadow-slate-900/5 dark:hover:border-white/20 dark:hover:shadow-black/30;
  }
}

.grid-backdrop {
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}