@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --ink: #0a0f1a;
  --ink-soft: #131b2c;
  --paper: #f8fafc;
  --line: #e2e8f0;
  --slate: #475569;
  --slate-900: #0f172a;
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --amber: #d97706;
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background-color: var(--paper);
  color: #334155;
}

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Background Patterns & Glows */
.mesh-gradient {
  background: radial-gradient(circle at 50% -10%, rgba(13, 148, 136, 0.12) 0%, rgba(248, 250, 252, 0) 65%);
}

.grid-dots {
  background-size: 28px 28px;
  background-image: radial-gradient(rgba(15, 23, 42, 0.08) 1.2px, transparent 1.2px);
  mask-image: linear-gradient(to bottom, black 60%, transparent 98%);
}

.noise::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Fluid Scroll Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.20s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.28s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.36s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.44s; }

/* Interactive Modern Terminal */
.terminal {
  background: var(--ink);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
}
.terminal-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 16px;
  background: #111827;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-body { padding: 20px 22px; font-size: 12.5px; line-height: 1.8; color: #cbd5e1; }
.terminal-body .prompt { color: #2dd4bf; }
.terminal-body .path { color: #38bdf8; }
.terminal-body .comment { color: #64748b; }
.term-cursor {
  display: inline-block; width: 7px; height: 14px; background: var(--teal);
  vertical-align: -2px; animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Interactive Hover Cards */
.tilt-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.tilt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.1);
  border-color: #cbd5e1;
}

/* Timeline */
.timeline { position: relative; padding-left: 36px; }
.timeline::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(to bottom, var(--teal), var(--line) 90%);
}
.timeline-item { position: relative; padding-bottom: 2.5rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; left: -36px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: #ffffff; border: 3.5px solid var(--teal); box-shadow: 0 0 0 3px var(--paper);
}

/* Marquee */
.marquee-track {
  display: flex; width: max-content; animation: marquee 28s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Nav Link Hover */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--teal);
  transition: width 0.25s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

.diff-add { color: #16a34a; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.diff-del { color: #dc2626; font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.chip { font-family: 'JetBrains Mono', monospace; font-size: 11px; }