/* ============================================================
   Axial Engineering — site styles
   Built on Blackford Trading design tokens.
   Editorial / dark / generous whitespace.
   ============================================================ */

@import url('./tokens.css');

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

body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: var(--lh-relaxed);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
a.link {
  color: var(--fg-1);
  border-bottom: 1px solid var(--border-3);
  padding-bottom: 1px;
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
a.link:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Subtle radial wash on the page ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 600px at 15% -10%, rgba(217, 207, 190, 0.04), transparent 60%);
  z-index: 0;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 56px;
  border-bottom: 1px solid var(--border-1);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--fg-1);
}
.brand-mark {
  width: 32px;
  height: 32px;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.brand-descriptor {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}

.nav-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav-link {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  letter-spacing: 0.01em;
  transition: color var(--dur-base) var(--ease-out);
  position: relative;
  padding: 4px 0;
}
.nav-link:hover { color: var(--fg-1); }
.nav-link.active { color: var(--fg-1); }
.nav-link.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateX(-50%);
}

/* ============================================================
   LAYOUT
   ============================================================ */
main {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 56px;
}

.section {
  padding: 96px 0;
}
.section + .section { border-top: 1px solid var(--border-1); }

/* ============================================================
   EDITORIAL TYPE
   ============================================================ */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 32px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--fg-3);
}

.display {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-weight: 300;
  color: var(--fg-1);
  font-variation-settings: 'WONK' 1, 'SOFT' 50;
}

.headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
}

.lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 56ch;
  text-wrap: pretty;
}

.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.body strong { color: var(--fg-1); font-weight: 500; }
.body em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
  color: var(--fg-1);
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ============================================================
   GRID HELPERS
   ============================================================ */
.row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  padding: 40px 0;
  border-top: 1px solid var(--border-1);
}
.row:last-of-type { border-bottom: 1px solid var(--border-1); }
.row-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 8px;
}

/* ============================================================
   PILLAR BLOCKS (home — what we do)
   ============================================================ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 48px;
}
.pillar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pillar-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.pillar-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
.pillar-body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg-2);
  margin: 0;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot {
  position: relative;
  z-index: 1;
  margin-top: 96px;
  border-top: 1px solid var(--border-1);
  padding: 48px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 48px;
  font-size: 13px;
}
.foot-col-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 12px;
}
.foot-col-body { color: var(--fg-2); line-height: 1.6; }
.foot-col-body a:hover { color: var(--accent); }
.foot-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  margin-top: 16px;
  border-top: 1px solid var(--border-1);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ============================================================
   CONTACT — form-ish block
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 96px;
  padding: 64px 0;
}
.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.contact-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 32px;
  padding: 24px 0;
  border-top: 1px solid var(--border-1);
  align-items: baseline;
}
.contact-list li:last-child { border-bottom: 1px solid var(--border-1); }
.contact-list dt {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.contact-list dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--fg-1);
}
.contact-list dd .secondary {
  display: block;
  color: var(--fg-3);
  font-size: 13px;
  margin-top: 4px;
}
.contact-email {
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: -0.005em;
}

.aside-card {
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  padding: 32px;
}
.aside-card .h-small {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 16px;
  color: var(--fg-1);
}
.aside-card p {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 0 0 16px;
}
.aside-card p:last-child { margin-bottom: 0; }

/* ============================================================
   FOUNDERS
   ============================================================ */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 48px;
}
.founder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 32px;
  border-top: 1px solid var(--border-2);
}
.founder-name {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-1);
  margin: 0;
}
.founder-role {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.founder-bio {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  margin: 8px 0 0;
}

/* ============================================================
   META TICKER (small data strip)
   ============================================================ */
.meta-ticker {
  display: flex;
  gap: 48px;
  padding: 24px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.meta-ticker span { display: inline-flex; gap: 8px; align-items: center; }
.meta-ticker .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 880px) {
  main { padding: 0 32px; }
  .site-nav { padding: 24px 32px; }
  .site-foot { padding: 40px 32px; grid-template-columns: 1fr 1fr; }
  .pillars { grid-template-columns: 1fr; gap: 40px; }
  .row { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .founders { grid-template-columns: 1fr; gap: 32px; }
  .contact-list li { grid-template-columns: 1fr; gap: 4px; }
  .meta-ticker { flex-wrap: wrap; gap: 24px; }
  .section { padding: 64px 0; }
  .nav-links { gap: 24px; }
}

/* ============================================================
   MOTION
   Cross-document page transitions + entry animations.
   - @view-transition: free crossfade between Home/About/Contact in
     browsers that support cross-document View Transitions (Chrome/Edge,
     Safari 18.2+). Firefox no-ops gracefully — instant nav, no flash.
   - Page-load stagger for the hero block (nav, eyebrow, display, lead).
   - Scroll-driven fade-up on everything below the fold where supported
     (Chromium 115+); static elsewhere — never a janky fallback.
   - All gated on prefers-reduced-motion: no-preference, so users who
     opt out get an instant, motionless site.
   ============================================================ */

@view-transition {
  navigation: auto;
}

/* Root crossfade — the body content swaps between pages on this timing. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Persistent nav: give the top bar its own VT name so the browser pairs old
   and new nav snapshots and crossfades them independently from the body. The
   two snapshots are visually almost identical (only the active link's accent
   dot moves), so the crossfade is imperceptible — no white flash. */
.site-nav {
  view-transition-name: site-nav;
}

::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes axial-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes axial-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Above-the-fold: deterministic page-load stagger. Nav is intentionally
     NOT animated on load — it has its own view-transition pair (above), and
     starting it at opacity 0 caused a perceptible flicker during cross-doc
     transitions because the live DOM is hidden mid-VT. Letting it render
     immediately on first paint and rely on VT for inter-page motion is
     cleaner. */
  .eyebrow  { animation: axial-fade-up 500ms var(--ease-out) 80ms both; }
  .display  { animation: axial-fade-up 700ms var(--ease-out) 160ms both; }
  .lead     { animation: axial-fade-up 500ms var(--ease-out) 340ms both; }

  /* Below-the-fold: scroll-driven fade-up where supported. Elements that
     are already past the entry range at load (above the fold on tall
     viewports) settle at the end state — no double-animation with hero. */
  @supports (animation-timeline: view()) {
    main .row,
    .pillar,
    .founder,
    .contact-list li,
    .aside-card {
      animation: axial-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }

  /* Footer fades in last, page-load (always at bottom — by the time the
     user scrolls there it has long settled). */
  .site-foot { animation: axial-fade 600ms var(--ease-out) 500ms both; }
}

/* ============================================================
   HERO PARTICLE FIELD
   Full-bleed (100vw) WebGL canvas behind the home hero. Drifting points,
   slow scene rotation, sand accent. Pointer-events disabled so the canvas
   never interferes with text selection or clicks on the hero copy.
   isolation: isolate contains the absolute child without escaping main's
   stacking context. About/Contact pages have no .hero, so the canvas
   never renders there.
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-particles {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  margin-left: -50vw;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hero-particles canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero > .eyebrow,
.hero > .display,
.hero > .lead {
  position: relative;
  z-index: 1;
}