/* ============================================================
   BASE.CSS
   CSS variables, resets, typography, animations, utility classes.
   Loaded first.
   ============================================================ */

/* === DESIGN TOKENS === */
:root {
  /* Surfaces */
  --bg: #0a0c0d;
  --bg-elev: #101315;
  --bg-card: #14181a;
  --bg-warm: #131110;

  /* Lines */
  --line: #1f2528;
  --line-bright: #2a3236;

  /* Ink */
  --ink: #e8e6e1;
  --ink-dim: #8a8f92;
  --ink-mute: #5a6064;

  /* Accents */
  --accent: #c4ff3d;
  --accent-dim: #a8d92e;
  --warn: #ff6b3d;
  --info: #82d4ff;

  /* Grid */
  --grid: rgba(255, 255, 255, 0.025);

  /* Typography */
  --font-sans: 'Inter Tight', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
}

/* === RESET === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

/* === BODY === */
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
}

/* Noise texture overlay
   Uses soft-light blend mode (instead of overlay) so it adds subtle
   film-grain character to dark UI surfaces without destroying
   photographs sitting beneath it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
  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='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

/* === UTILITY CLASSES === */
.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.serif { font-family: var(--font-serif); font-optical-sizing: auto; }
.accent { color: var(--accent); }
.dim { color: var(--ink-dim); }
.mute { color: var(--ink-mute); }

/* === ANIMATIONS === */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes rise {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SCROLL REVEAL === */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}