/* Vsevolod — portfolio. Shared tokens, type and motion. */
:root {
  --navy-900: #0b1020;
  --navy-800: #111833;
  --navy-700: #18213f;
  --ink: #0f172a;
  --ink-2: #334155;
  --ink-3: #64748b;
  --paper: #ffffff;
  --paper-2: #f6f8fb;
  --line: #e5e9f0;

  --blue: #3b82f6;
  --blue-soft: #5ea2ff;
  --purple: #8b5cf6;
  --teal: #14b8a6;
  --amber: #f59e0b;
  --pink: #ec4899;
  --red: #ef4444;
  --gold: #d6b06b;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
code, pre { font-family: var(--mono); }
::selection { background: rgba(59, 130, 246, 0.25); }

/* ---------------------------------------------------------- reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}