@import "tailwindcss";

@theme {
  --font-display: var(--font-archivo), sans-serif;
  --font-body: var(--font-space-grotesk), sans-serif;
  --font-mono: var(--font-ibm-plex-mono), monospace;
}

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  background: #F4F0E8;
}

body {
  background: #F4F0E8;
  color: #0A0A0A;
  overflow-x: hidden;
}

::selection {
  background-color: #FFE600;
  color: #0A0A0A;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #F4F0E8; }
::-webkit-scrollbar-thumb { background: #0A0A0A; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #FF4500; }

/* ── NOISE OVERLAY ── */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 150px 150px;
}

/* ── STROKE TEXT ── */
.text-stroke {
  -webkit-text-stroke: 2px #0A0A0A;
  color: transparent;
}
.text-stroke-yellow {
  -webkit-text-stroke: 2px #FFE600;
  color: transparent;
}

/* ── MARQUEE ── */
.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
}
.marquee-track {
  display: flex;
  animation: marqueeScroll 18s linear infinite;
}
.marquee-track-reverse {
  display: flex;
  animation: marqueeScrollReverse 22s linear infinite;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes marqueeScrollReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── DOT GRID ── */
.dot-grid {
  background-image: radial-gradient(#C8C2B8 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── YELLOW STRIKE ── */
.yellow-strike {
  position: relative;
  display: inline-block;
}
.yellow-strike::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0;
  right: 0;
  height: 6px;
  background: #FFE600;
  z-index: -1;
}

/* ── BRUTAL BUTTON ── */
.btn-brutal {
  position: relative;
  border: 2px solid #0A0A0A;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  background: transparent;
  color: #0A0A0A;
}
.btn-brutal::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: -5px;
  width: 100%;
  height: 100%;
  border: 2px solid #0A0A0A;
  z-index: -1;
  transition: all 0.15s ease;
}
.btn-brutal:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 #FFE600;
}
.btn-brutal:hover::after {
  transform: translate(3px, 3px);
}
.btn-brutal:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.btn-brutal-yellow {
  background: #FFE600;
  color: #0A0A0A;
  border: 2px solid #0A0A0A;
}
.btn-brutal-yellow::after {
  border-color: #0A0A0A;
}
.btn-brutal-yellow:hover {
  box-shadow: 6px 6px 0 #FF4500;
}