/* IdTek static site — fonts and brutalist custom utilities */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 0%;
  --primary: 48 96% 53%;
  --radius: 0px;
}

* {
  border-color: #000;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #000;
  -webkit-font-smoothing: antialiased;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

::selection {
  background-color: #facc15;
  color: #000;
}

/* Brutalist utilities */
.brutal-shadow { box-shadow: 4px 4px 0 0 #000; }
.brutal-shadow-lg { box-shadow: 8px 8px 0 0 #000; }
.brutal-shadow-xl { box-shadow: 12px 12px 0 0 #000; }

.brutal-hover { transition: all 0.15s; }
.brutal-hover:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #000;
}
.brutal-hover:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}

.brutal-invert:hover { background-color: #facc15; color: #000; }

.brutal-card {
  background-color: #fff;
  border: 4px solid #000;
  padding: 1.5rem;
  box-shadow: 4px 4px 0 0 #000;
}
.brutal-card-yellow {
  background-color: #facc15;
  border: 4px solid #000;
  padding: 1.5rem;
  box-shadow: 4px 4px 0 0 #000;
}
.brutal-card-dark {
  background-color: #000;
  border: 4px solid #000;
  padding: 1.5rem;
  color: #fff;
  box-shadow: 4px 4px 0 0 #facc15;
}

.brutal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 4px solid #000;
  transition: all 0.15s;
  box-shadow: 4px 4px 0 0 #000;
}
.brutal-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #000;
}
.brutal-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 #000;
}
.brutal-btn-primary { background-color: #facc15; color: #000; }
.brutal-btn-secondary { background-color: #fff; color: #000; }
.brutal-btn-dark { background-color: #000; color: #fff; }

.brutal-heading {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brutal-mono { font-family: 'Space Mono', monospace; }

.brutal-underline { position: relative; display: inline-block; }
.brutal-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.1em;
  height: 0.75rem;
  background-color: #facc15;
  z-index: -10;
}

.brutal-grid {
  background-image:
    linear-gradient(#000 1px, transparent 1px),
    linear-gradient(90deg, #000 1px, transparent 1px);
  background-size: 40px 40px;
}

@keyframes brutal-slide-up {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes brutal-slide-in {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes brutal-pop {
  0% { opacity: 0; transform: scale(0.9); }
  50% { transform: scale(1.02); }
  100% { opacity: 1; transform: scale(1); }
}

.brutal-animate-up { animation: brutal-slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.brutal-animate-in { animation: brutal-slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.brutal-animate-pop { animation: brutal-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 30s linear infinite; }