/* Design system — base, scrollbar, animations, and reusable utilities.
   Ported verbatim from src/app/globals.css (Tailwind's @layer base unwrapped to
   plain rules; no Tailwind dependency). */

/* ── Reset/base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--color-void);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.7;
  overflow-x: hidden;
}

::selection {
  background: var(--color-accent);
  color: var(--color-void);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-void); }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); }

/* ── Animations ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes terminalBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-fade-in-up { animation: fadeInUp 0.8s var(--ease-out-expo) forwards; }
.animate-fade-in { animation: fadeIn 0.6s ease forwards; }
.animate-slide-down { animation: slideDown 0.6s var(--ease-out-expo) forwards; }
.animate-float { animation: float 6s var(--ease-in-out-sine) infinite; }

/* ── Utility Classes ── */
.grid-pattern {
  background-image:
    linear-gradient(rgba(42, 42, 58, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 42, 58, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
}

.dot-pattern {
  background-image: radial-gradient(circle, rgba(42, 42, 58, 0.5) 1px, transparent 1px);
  background-size: 24px 24px;
}

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.card-hover { transition: border-color 0.4s var(--ease-out-expo); }
.card-hover:hover {
  border-color: rgba(0, 229, 255, 0.25);
}

/* ── Blog Post Typography ── */
.prose-rm h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
}
.prose-rm p {
  color: var(--color-text-muted);
  line-height: 1.8;
  font-size: 1.05rem;
}
.prose-rm a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.prose-rm a:hover { opacity: 0.8; }