/* ==========================================================================
   main.css — base, chrome (cursor, lattice, nav, command bar), hero, atom,
   command palette. Section content lives in sections.css.
   All values reference tokens.css.
   ========================================================================== */

*       { margin: 0; padding: 0; box-sizing: border-box; }
html    { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  cursor: none;                          /* replaced by custom cursor */
}
a            { color: inherit; text-decoration: none; }
::selection  { background: var(--accent); color: #000; }

/* ---- Custom cursor ------------------------------------------------------ */
.cursor {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 26px; height: 26px; border: 1px solid var(--accent); border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease);
}
.cursor.is-hover { width: 54px; height: 54px; background: var(--accent-dim); }
.cursor-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 4px; height: 4px; background: var(--accent); border-radius: 50%;
  transform: translate(-50%, -50%);
}
@media (hover: none) { .cursor, .cursor-dot { display: none; } body { cursor: auto; } }

/* ---- Lattice grid field ------------------------------------------------- */
.lattice {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 60% at 60% 40%, #000 28%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 60% at 60% 40%, #000 28%, transparent 72%);
}

/* ---- Nav ---------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h); padding: 0 var(--pad-x);
  font-family: var(--font-mono); font-size: 12px;
  background: #070708ee; backdrop-filter: blur(4px);
}
.nav-brand { display: flex; align-items: center; gap: 10px; letter-spacing: .05em; }
.nav-links { display: flex; align-items: center; gap: 24px; color: var(--text-dim); }
.nav-links a { transition: color .25s var(--ease); }
.nav-links a:hover, .nav-links a.is-active { color: var(--text); }

/* Periodic-element brand tile (re-used as favicon-style mark) */
.element-tile {
  width: 32px; height: 32px; padding: 3px 4px;
  border: 1px solid var(--line); border-radius: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.element-tile small { font-size: 7px; line-height: 1; color: var(--accent); }
.element-tile b     { font-size: 12px; font-weight: 500; align-self: center; margin-top: -2px; }

/* Command launcher (opens palette). Reads as an inviting CTA: a labelled
   pill with an accent tint and a soft breathing glow to draw the eye. */
.kbd-hint {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 12px;
  border: 1px solid var(--accent-soft); border-radius: 8px;
  background: var(--accent-dim); color: var(--text); cursor: none;
  font-family: var(--font-mono); font-size: 12px;
  transition: .25s var(--ease); animation: kbd-pulse 2.8s ease-in-out infinite;
}
.kbd-hint:hover {
  background: rgba(61, 212, 255, .26); border-color: var(--accent);
  transform: translateY(-1px); box-shadow: 0 0 22px -6px var(--accent-soft);
}
.kbd-hint-label { display: flex; align-items: center; gap: 6px; color: var(--text); }
.kbd-prompt     { color: var(--accent); }
.kbd-keys       { display: flex; gap: 4px; }
.kbd-hint kbd {
  font-family: var(--font-mono); font-size: 10px; line-height: 1; color: var(--accent);
  padding: 3px 5px; border: 1px solid var(--accent-soft); border-radius: 4px; background: #0d1418;
  transition: .25s var(--ease);
}
.kbd-hint:hover kbd { border-color: var(--accent); }
@keyframes kbd-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 212, 255, 0); }
  50%      { box-shadow: 0 0 18px -4px var(--accent-soft); }
}

/* ---- Command bar (persists under nav; mirrors the active command) ------- */
.command-bar {
  position: fixed; left: 0; right: 0; z-index: 55; top: var(--nav-h);
  display: flex; align-items: center; height: 34px; padding: 0 var(--pad-x);
  font-family: var(--font-mono); font-size: 12px;
  background: var(--bg-term); border-bottom: 1px solid var(--accent-dim);
  backdrop-filter: blur(4px); pointer-events: none;
  overflow: hidden; white-space: nowrap;
}
.command-bar .cb-user  { color: var(--accent); }
.command-bar .cb-path  { color: #5a8aa0; }
.command-bar .cb-cmd   { color: #dcdcdc; margin-left: 8px; }
.command-bar .cb-caret { color: var(--accent); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- Section scaffold --------------------------------------------------- */
.section {
  position: relative; z-index: 10;
  min-height: 100vh; padding: calc(var(--nav-h) + 40px) var(--pad-x) 80px;
  display: flex; flex-direction: column; justify-content: center;
}
.section-inner { width: 100%; max-width: var(--maxw); margin: 0 auto; }

/* Mono "readout" label that prefixes each section + hero */
.readout {
  display: flex; align-items: center; gap: 10px; margin-bottom: 1.4rem;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  color: var(--accent);
}
.readout::before { content: ""; width: 26px; height: 1px; background: var(--accent); }

/* ---- Hero --------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 38px; align-items: center; }
.hero-kicker { font-family: var(--font-mono); font-size: 13px; color: var(--text-dim); margin-bottom: 1rem; }
.hero-name {
  font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: .95;
  letter-spacing: -.03em; margin-bottom: 1.1rem;
}
.hero-title { font-size: 1.35rem; font-weight: 300; color: var(--text-soft); margin-bottom: 1.4rem; }
.hero-blurb { max-width: 470px; font-size: 1rem; line-height: 1.75; color: var(--text-muted); margin-bottom: 2rem; }
.hero-blurb a { color: var(--accent); border-bottom: 1px solid var(--accent-dim); }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* White-to-grey headline gradient (the "expensive SaaS" signature) */
.text-gradient {
  background: linear-gradient(100deg, #fff, #8a8a8a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons (shared) --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px; padding: .8rem 1.5rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: .3s var(--ease);
}
.btn:hover     { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 24px -6px var(--accent-dim); }
.btn--primary  { border-color: var(--accent-dim); background: var(--accent-dim); color: #cdefff; }
.btn--primary:hover { background: var(--accent-soft); color: #eafaff; }

/* ---- Atom --------------------------------------------------------------- */
.atom-stage { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; }
.atom { position: relative; width: min(44vw, 520px); aspect-ratio: 1; }
.atom canvas { width: 100%; height: 100%; display: block; }

.nucleus {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92px; height: 104px; padding: 7px 9px; pointer-events: none;
  border: 1px solid var(--accent); border-radius: var(--radius);
  background: rgba(7, 16, 20, .72); backdrop-filter: blur(3px);
  box-shadow: 0 0 36px -6px var(--accent-dim), inset 0 0 22px -10px var(--accent);
  display: flex; flex-direction: column; font-family: var(--font-mono);
}
.nucleus .n-num  { font-size: 10px; color: var(--accent); }
.nucleus .n-sym  { font-family: var(--font-sans); font-weight: 500; font-size: 2.5rem; line-height: 1; text-align: center; margin-top: 2px; }
.nucleus .n-name { font-size: 8.5px; color: #cdefff; text-align: center; letter-spacing: .04em; }
.nucleus .n-mass { font-size: 8px; color: var(--text-dim); text-align: center; margin-top: auto; }

.valence-label {
  position: absolute; font-family: var(--font-mono); font-size: 10px; color: var(--accent);
  pointer-events: none; text-shadow: 0 0 8px var(--accent);
  transform: translate(8px, -14px); transition: opacity .3s;
}
.shell-key {
  position: absolute; bottom: 6%; right: 5%; text-align: right; line-height: 1.7;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.shell-key b { font-weight: 400; color: var(--accent); }

/* ---- Inline icon (sprite) ----------------------------------------------- */
/* Icons draw with currentColor, so they take the color of whatever link they
   sit in. Size is set per context below. */
.icon { display: block; width: 20px; height: 20px; fill: currentColor; }

/* ---- Floating side rails (social + email) ------------------------------- */
.side-rail { position: fixed; bottom: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.side-rail--left  { left: 24px; }
.side-rail--right { right: 24px; }
/* Glowing accent line so the rail reads against the dark background. */
.side-rail::after { content: ""; width: 1px; height: 96px; background: linear-gradient(to top, var(--accent-soft), transparent); }
.side-rail a { display: inline-flex; color: var(--text-soft); transition: color .25s var(--ease), transform .25s var(--ease); }
.side-rail a:hover { color: var(--accent); transform: translateY(-3px); }
.side-rail .icon { width: 21px; height: 21px; }
.side-email {
  writing-mode: vertical-rl; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .1em; color: var(--text-soft); transition: .25s var(--ease);
}
.side-email:hover { color: var(--accent); transform: translateY(-3px); }
@media (max-width: 980px) { .side-rail { display: none; } }

/* ---- Command palette (⌘K) ---------------------------------------------- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: flex-start; justify-content: center; padding-top: 14vh;
  background: rgba(3, 5, 7, .62); backdrop-filter: blur(4px);
}
.palette-overlay.is-open { display: flex; }
.palette {
  width: min(560px, 92vw); overflow: hidden;
  background: #0b0e10; border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px -20px #000, 0 0 0 1px var(--accent-dim);
}
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); }
.palette-input .prompt { color: var(--accent); }
.palette-input input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 15px; caret-color: var(--accent); }
.palette-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px; }
.palette-item .pi-icon  { width: 22px; text-align: center; color: var(--text-dim); }
.palette-item .pi-label { flex: 1; color: #cfcfcf; }
.palette-item .pi-cmd   { font-size: 11px; color: var(--text-dim); }
.palette-item.is-selected { background: var(--accent-dim); }
.palette-item.is-selected .pi-icon,
.palette-item.is-selected .pi-label,
.palette-item.is-selected .pi-cmd { color: var(--accent); }
.palette-empty { padding: 14px; color: var(--text-dim); font-family: var(--font-mono); font-size: 13px; }
.palette-foot { display: flex; gap: 18px; padding: 9px 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; color: var(--text-dim); }
.palette-foot kbd { color: var(--accent); }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .atom-stage { display: none; }
  .nav-links a { display: none; }
}