:root {
  --bg: #0b1016;
  --ink: #e8edf2;
  --muted: #8a97a4;
  --line: #2a3542;
  --accent: #8ea2ff;
  --dot: rgba(232, 237, 242, 0.09);
  --dot-lit: rgba(142, 162, 255, 0.75);
  --glow-a: rgba(80, 104, 255, 0.22);
  --glow-b: rgba(46, 196, 182, 0.12);
  --grain: 0.07;
  --gutter: clamp(20px, 8vw, 128px);
  --x: 50vw;
  --y: 45vh;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f3f5f7;
    --ink: #0f1720;
    --muted: #5a6672;
    --line: #cfd6dd;
    --accent: #2f45d8;
    --dot: rgba(15, 23, 32, 0.1);
    --dot-lit: rgba(47, 69, 216, 0.7);
    --glow-a: rgba(80, 104, 255, 0.14);
    --glow-b: rgba(46, 196, 182, 0.1);
    --grain: 0.05;
    color-scheme: light;
  }
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.backdrop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.glow {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 42% at 30% 40%, var(--glow-a), transparent 70%),
    radial-gradient(32% 36% at 72% 64%, var(--glow-b), transparent 70%);
  filter: blur(40px);
  animation: drift 26s ease-in-out infinite alternate;
}

.grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, var(--dot) 1px, transparent 1.4px);
  background-size: 24px 24px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 100%);
}

.grid-lit {
  background-image:
    radial-gradient(circle at center, var(--dot-lit) 1.2px, transparent 1.8px),
    radial-gradient(260px circle at var(--x) var(--y), var(--glow-a), transparent 70%);
  background-size: 24px 24px, 100% 100%;
  background-position: center, 0 0;
  -webkit-mask-image: radial-gradient(260px circle at var(--x) var(--y), #000, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--x) var(--y), #000, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.is-pointing .grid-lit {
  opacity: 1;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.card {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
}

.name {
  margin: 0;
  font-size: clamp(2.75rem, 8.5vw, 7rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.045em;
  animation: focus 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.role {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: clamp(0.85rem, 1.2vw, 0.95rem);
  letter-spacing: 0.02em;
  animation: fade 1s ease-out 0.5s both;
}

body.scroll {
  overflow-y: auto;
}

.scroll .card {
  min-height: 100dvh;
  padding-top: clamp(48px, 12vh, 140px);
  padding-bottom: clamp(48px, 12vh, 140px);
}

.eyebrow {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  animation: fade 1s ease-out both;
}

.title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(2.25rem, 6.5vw, 5.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  animation: focus 1.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.title .quiet {
  color: var(--muted);
}

.lede {
  margin: 2rem 0 0;
  max-width: 58ch;
  color: var(--ink);
  opacity: 0.86;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  animation: fade 1s ease-out 0.5s both;
}

.endpoint {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
  margin: 2rem 0 0;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.95rem;
  animation: fade 1s ease-out 0.6s both;
}

.endpoint span {
  color: var(--muted);
  font-size: 0.85rem;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2.75rem 0 0;
  padding: 0;
  list-style: none;
  animation: fade 1s ease-out 0.7s both;
}

.links a {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.15em;
  transition: color 0.2s, border-color 0.2s;
}

.links a:hover {
  color: var(--accent);
  border-color: currentColor;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@keyframes focus {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes drift {
  from {
    transform: translate3d(-3%, -2%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(3%, 2%, 0) rotate(8deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .name,
  .role,
  .links,
  .glow,
  .eyebrow,
  .title,
  .lede,
  .endpoint {
    animation: none;
  }

  .grid-lit {
    transition: none;
  }

  .links a {
    transition: none;
  }
}