:root {
  --ground: #0F1112;
  --surface: #181C1F;
  --ink: #FFFFFF;
  --ink-muted: #A7A9AC;
  --accent: #C2912E; /* filament (default). Phosphor alternate: #8FE3B0 */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.hero {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 7vh 24px;
  overflow: hidden;
  background: var(--ground);
}

/* Motif lives on its own layers so it can move independently of the scrim + text.
   Outer layer = pointer parallax (offset set from JS); inner layer = slow ambient drift. */
.hero__motif {
  position: absolute;
  inset: -8%;
  z-index: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  will-change: transform;
}
.hero__motif-img {
  position: absolute;
  inset: 0;
  background: url('assets/motif.png') center / cover no-repeat;
  transform: scale(1.03);
}

/* WebGL layer that renders the motif with its gold dust flowing — sits directly
   over the static motif (its fallback), beneath the legibility scrim. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Legibility scrim — keeps text contrast measured against the dark ground, not the brightest motif pixel. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 62% 58% at 50% 47%,
    rgba(15, 17, 18, 0.72) 0%,
    rgba(15, 17, 18, 0.34) 55%,
    rgba(15, 17, 18, 0.05) 100%);
}

.hero__inner { position: relative; z-index: 3; max-width: 38rem; }

.wordmark {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* optical centering against trailing letter-spacing */
  font-size: clamp(2rem, 7vw, 3.6rem);
  line-height: 1;
  animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.ambition {
  font-family: var(--font-serif);
  color: #CBCBC7;
  font-size: clamp(1rem, 2.4vw, 1.35rem);
  line-height: 1.5;
  margin-top: 1.5rem;
  animation: heroRise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}
@keyframes heroRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* v2 hint line — the "largest untapped chemical search space" hook */
.lead {
  font-size: clamp(1.15rem, 2.9vw, 1.65rem);
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  color: #DADAD6;
}

.stealth {
  font-size: 0.75rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1.7rem;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #71747a;
  border-top: 0.5px solid rgba(255, 255, 255, 0.07);
}

@media (max-width: 600px) {
  .footer { flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}