/* HeyData — base: fonts, reset, typography */


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-deep);
  background-image:
    radial-gradient(60% 44% at 50% -8%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 72%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.02em;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

p { margin: 0 0 var(--space-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

ul, ol { margin: 0; padding: 0; list-style: none; }
img, canvas, svg { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

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

/* ---- text roles ---- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lead {
  font-size: var(--fs-lead);
  color: var(--ink-dim);
  margin-bottom: var(--space-8);
}

.base, .num, .tools, .small, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.base {
  font-size: var(--fs-label);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
}
.small { font-size: var(--fs-small); color: var(--ink-faint); }

/* blinking cursor */
.cursor {
  display: inline-block;
  width: .5em;
  height: .88em;
  margin-left: .08em;
  background: var(--accent);
  vertical-align: -0.06em;
  border-radius: 1px;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- focus ---- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: var(--space-4); top: -100px;
  z-index: 500;
  padding: var(--space-3) var(--space-4);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 600;
  transition: top var(--dur-micro) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---- reveal ---- */

.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.reveal.is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 760ms cubic-bezier(.22,.7,.2,1),
              transform 760ms cubic-bezier(.22,.7,.2,1);
}
.reveal.is-in > *:nth-child(1) { transition-delay: 0ms; }
.reveal.is-in > *:nth-child(2) { transition-delay: 70ms; }
.reveal.is-in > *:nth-child(3) { transition-delay: 140ms; }
.reveal.is-in > *:nth-child(4) { transition-delay: 210ms; }
.reveal.is-in > *:nth-child(n+5) { transition-delay: 280ms; }

section[id] { scroll-margin-top: 84px; }

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