@import "tailwindcss";

@theme {
  --color-ink: #0a0a0b;
  --color-coal: #121215;
  --color-smoke: #1b1b1f;
  --color-bone: #f2f2ee;
  --color-ash: #8b8b93;
  --color-volt: #c8ff2e;

  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

html { background: var(--color-ink); }
body {
  @apply bg-ink text-bone font-body antialiased;
  overflow-x: clip;
}
::selection {
  background: var(--color-volt);
  color: var(--color-ink);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

.noise {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); }
  20% { transform: translate(-12%, 4%); }
  30% { transform: translate(6%, -14%); }
  40% { transform: translate(-4%, 12%); }
  50% { transform: translate(-12%, 7%); }
  60% { transform: translate(11%, 0%); }
  70% { transform: translate(0%, 10%); }
  80% { transform: translate(3%, 13%); }
  90% { transform: translate(-8%, 8%); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee var(--marquee-duration, 24s) linear infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.15; }
}
.animate-blink { animation: blink 1.4s ease-in-out infinite; }

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.animate-spin-slow { animation: spin-slow 18s linear infinite; }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-up {
  animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.text-outline {
  -webkit-text-stroke: 1.5px rgba(242, 242, 238, 0.22);
  color: transparent;
}