:root {
  --bg:#fafbfd; --bg-soft:#eef2f8;
  --surface:rgba(17,24,42,0.028); --surface2:rgba(17,24,42,0.055);
  --border:rgba(17,24,42,0.10); --border2:rgba(17,24,42,0.20);
  --text:#11182a; --muted:#525c70; --faint:#8a94a8;
  --accent:#2563eb; --accent2:#7c3aed; --accent3:#0d9488;
  --display:'Space Grotesk',sans-serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(37,99,235,0.06), transparent 60%), #fafbfd;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(37,99,235,0.18); color: #11182a; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #eef1f6; }
::-webkit-scrollbar-thumb { background: rgba(17,24,42,0.20); border-radius: 8px; border: 2px solid #eef1f6; }
::-webkit-scrollbar-thumb:hover { background: rgba(17,24,42,0.32); }

@keyframes auroraA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,-40px) scale(1.18); } }
@keyframes auroraB { 0%,100% { transform: translate(0,0) scale(1.1); } 50% { transform: translate(-50px,30px) scale(0.92); } }
@keyframes auroraC { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,40px) scale(1.12); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.5); opacity: .4; } }

/* hover states (inline styles can't do :hover) */
.navlink:hover { color: var(--text); background: var(--surface2); }
.navcta:hover { background: var(--surface2); border-color: var(--accent); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 38px rgba(106,168,255,0.42); }
.btn-ghost:hover { background: var(--surface2); border-color: var(--accent); }
.social:hover { color: var(--text); border-color: var(--accent); background: var(--surface); }
.social-foot:hover { color: var(--text); border-color: var(--accent); }
.proj-card:hover { transform: translateY(-5px); border-color: var(--border2); background: var(--surface2); }
.post-row:hover { background: var(--surface); }
.post-row:hover h3 { color: var(--accent); }
.backlink:hover { color: var(--accent); }
.backlink2:hover { opacity: .7; }

/* respect reduced-motion: settle animations instantly, force reveal elements visible */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .fade, [data-reveal] { opacity: 1 !important; transform: none !important; }
}