/*
 * BgARC Launch Site — Base + Components
 * created: 2026-07-04
 * created_by: frontend-developer
 * updated: 2026-07-04
 * updated_by: frontend-developer
 *
 * Static HTML/CSS only. No utility framework, no preprocessor (UX spec §1).
 * Builds the §2 components, §3/§4 motion surfaces, §5 responsive rhythm,
 * §6 accessibility gates.
 */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg-deep);
  color: var(--ink-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 700; }
ul, ol { padding-left: 1.2em; }
:target { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

/* Accessibility — visible focus on every interactive target (§6.5) */
:focus-visible {
  outline: 2px solid var(--arc-teal);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  background: var(--bg-slate-elev); color: var(--ink-cream);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  z-index: 100; transition: top .15s ease;
}
.skip-link:focus { top: var(--space-2); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--maxw-container); margin-inline: auto; padding-inline: var(--space-6); }
.reading   { max-width: var(--maxw-content); margin-inline: auto; }
.section   { padding-block: var(--section-pad-y); }
.stack > * + * { margin-top: var(--space-4); }

/* Two-register rhythm (§5). Never two adjacent sections of the same register. */
.register-instrument { background: var(--bg-deep); color: var(--ink-cream); }
.register-instrument--raised { background: var(--bg-slate); }
.register-charter {
  background: var(--parchment); color: var(--ink-on-parch);
}
.register-charter a { color: oklch(45% 0.09 235); text-decoration: underline; text-underline-offset: 2px; }
.register-charter .eyebrow { color: oklch(42% 0.06 235); }
.register-charter .roman { color: var(--parchment-deep); -webkit-text-stroke: 1px oklch(58% 0.04 235); }

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--arc-teal);
  display: inline-block;
}
.lead { font-size: var(--fs-lead); color: var(--ink-cream-sec); line-height: var(--lh-reading); }
.register-charter .lead { color: oklch(32% 0.02 60); }
.reading p { font-size: var(--fs-body); line-height: var(--lh-reading); }
.reading p + p { margin-top: var(--space-4); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.muted { color: var(--ink-cream-sec); }
.roman { font-family: var(--font-charter); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; }

/* ---------- Wordmark ---------- */
.wordmark { display: inline-flex; align-items: baseline; font-weight: 400; letter-spacing: -0.01em; white-space: nowrap; line-height: 1; }
.wordmark .bg { color: var(--ink-cream); font-weight: 400; }
.wordmark .arc {
  font-weight: 700;
  background-image: var(--arc-wordmark);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wordmark--nav { font-size: 1.05rem; }
.wordmark--hero { font-size: var(--fs-hero); }
.wordmark--hero .arc { filter: drop-shadow(0 2px 18px var(--arc-glow)); }
.wordmark-lockup { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.wordmark-arc { width: 62%; max-width: 300px; opacity: 0.9; }
.wordmark-tagline { font-size: var(--fs-body); letter-spacing: 0.04em; color: var(--arc-blue); }

/* ---------- Header / nav (§2.1) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: color-mix(in oklch, var(--bg-deep) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--bg-rule);
}
.site-header .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.nav-links { display: flex; align-items: center; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.nav-links a { font-size: var(--fs-small); color: var(--ink-cream-sec); padding-block: var(--space-2); border-bottom: 2px solid transparent; transition: color .12s ease, border-color .12s ease; }
.nav-links a:hover { color: var(--ink-cream); }
.nav-links a[aria-current="page"] { color: var(--ink-cream); border-bottom-color: var(--arc-blue); }
.nav-right { display: flex; align-items: center; gap: var(--space-4); }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink-cream); padding: var(--space-2); cursor: pointer; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn-primary { background: var(--arc-blue); color: var(--bg-deep); }
.btn-primary:hover { background: var(--arc-azure); }
.btn-ghost { background: transparent; color: var(--ink-cream); border-color: var(--bg-rule); }
.btn-ghost:hover { border-color: var(--arc-blue); }
.register-charter .btn-primary { color: var(--parchment); background: oklch(45% 0.09 235); }
.register-charter .btn-ghost { color: var(--ink-on-parch); border-color: oklch(60% 0.03 60); }
.link-arrow { color: var(--arc-teal); font-weight: 600; font-size: var(--fs-small); display: inline-flex; align-items: center; gap: .4em; }
.link-arrow::after { content: "\2192"; transition: transform .12s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- Glyphs ---------- */
.glyph { width: 20px; height: 20px; color: inherit; flex: none; }
.glyph--lg { width: 28px; height: 28px; }

/* ---------- Hero (§4) ---------- */
.hero { position: relative; min-height: 88vh; display: flex; align-items: center; background: var(--bg-deep); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; text-align: center; padding-block: var(--space-24) var(--space-16); }
.hero__stage { position: relative; width: 100%; max-width: 900px; margin: 0 auto var(--space-8); aspect-ratio: 900 / 300; }
.hero__stage svg { width: 100%; height: 100%; overflow: visible; }
.hero h1 { font-family: var(--font-charter); font-size: var(--fs-hero); color: var(--ink-cream); letter-spacing: -0.01em; }
.hero .subhead { margin-top: var(--space-4); font-size: var(--fs-lead); color: var(--ink-cream-sec); max-width: 46ch; margin-inline: auto; line-height: var(--lh-reading); }
.hero__cta { margin-top: var(--space-8); display: flex; gap: var(--space-4); justify-content: center; align-items: center; flex-wrap: wrap; }

/* Concept line under the hero */
.concept-line { font-size: var(--fs-lead); line-height: var(--lh-reading); }

/* ---------- Pillar region (§2.4) ---------- */
.pillar { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 1024px) { .pillar { grid-template-columns: 1fr 1fr; gap: var(--space-16); } .pillar--flip .pillar__media { order: -1; } }
.pillar__marker { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-4); }
.pillar h3 { font-size: var(--fs-h2); }

/* ---------- Screenshot frame (§2.6) ---------- */
.frame { background: var(--bg-slate-elev); border: 1px solid var(--bg-rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.frame__bar { display: flex; gap: 6px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--bg-rule); }
.frame__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-cream-ter); opacity: .5; }
.frame__img { display: block; width: 100%; height: auto; }
.frame__placeholder { display: grid; place-items: center; aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--bg-slate) 0%, var(--panel-center) 100%); color: var(--ink-cream-ter); font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.2em; text-align: center; padding: var(--space-8); }
.frame-caption { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--ink-cream-sec); }

/* ---------- Roster grid (§2.5) ---------- */
.division-group { margin-top: var(--space-12); }
.division-header { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.division-header .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.agent-card { background: var(--bg-slate-elev); border: 1px solid var(--bg-rule); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); transition: border-color .12s ease; }
.agent-card:hover { border-color: var(--arc-blue); }
.agent-card__row1 { display: flex; align-items: center; gap: var(--space-3); }
.agent-card__name { font-weight: 600; font-size: var(--fs-body); }
.agent-card__code { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-cream-ter); margin-left: auto; }
.agent-card__craft { margin-top: var(--space-3); font-size: var(--fs-small); color: var(--ink-cream-sec); line-height: 1.5; }
.chip { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.12em; padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in oklch, currentColor 18%, transparent); }
.agent-card--open { grid-column: 1 / -1; }
.agent-card--open .agent-card__detail { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--bg-rule); display: grid; gap: var(--space-3); }
.detail-row { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); font-size: var(--fs-small); }
.detail-row dt { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-cream-ter); }

/* ---------- Diagram frame (§2.7) ---------- */
.diagram { background: var(--bg-slate); border: 1px solid var(--bg-rule); border-radius: var(--radius-lg); padding: var(--space-12) var(--space-8); }
.diagram svg { width: 100%; height: auto; overflow: visible; }
.diagram-caption { margin-top: var(--space-6); text-align: center; font-size: var(--fs-small); color: var(--ink-cream-sec); }

/* ---------- Concept tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.tile { padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid oklch(58% 0.03 60 / .35); background: oklch(93% 0.02 80); }
.register-instrument .tile { border-color: var(--bg-rule); background: var(--bg-slate); }
.tile h3 { font-size: var(--fs-h3); margin-bottom: var(--space-2); }

/* ---------- CTA band (§2.8) ---------- */
.cta-band { text-align: center; }
.cta-band__line { font-family: var(--font-charter); font-size: clamp(1.4rem, 3vw, 2rem); max-width: 24ch; margin: 0 auto var(--space-6); font-weight: 700; }
.pending { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--arc-teal); border: 1px dashed color-mix(in oklch, var(--arc-teal) 50%, transparent); padding: 2px 8px; border-radius: var(--radius-sm); white-space: nowrap; }

/* ---------- Pricing ---------- */
.price-table { width: 100%; border-collapse: collapse; margin-block: var(--space-6); }
.price-table th, .price-table td { text-align: left; padding: var(--space-4); border-bottom: 1px solid oklch(58% 0.03 60 / .3); font-size: var(--fs-small); vertical-align: top; }
.price-table th { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.14em; }
.checklist { list-style: none; padding: 0; display: grid; gap: var(--space-4); }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); }
.checklist .mark { color: oklch(50% 0.09 200); }

/* ---------- Footer (§2.2) ---------- */
.site-footer { background: var(--bg-deep); border-top: 1px solid var(--bg-rule); padding-block: var(--space-16) var(--space-8); }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.footer-cols h4 { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-cream-ter); margin-bottom: var(--space-4); }
.footer-cols a { display: block; font-size: var(--fs-small); color: var(--ink-cream-sec); padding-block: var(--space-1); }
.footer-cols a:hover { color: var(--ink-cream); }
.footer-arc { border-top: 1px solid var(--bg-rule); margin-top: var(--space-12); padding-top: var(--space-12); }
.footer-attribution { margin-top: var(--space-16); text-align: center; }
.footer-attribution .by { font-size: var(--fs-small); color: var(--ink-cream-ter); margin-bottom: var(--space-3); }
.footer-attribution img { width: 200px; margin: 0 auto; opacity: 0.9; }

/* ---------- Responsive (§5) ---------- */
@media (max-width: 767px) {
  .nav-links, .nav-right .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-drawer[data-open="true"] { display: flex; }
  .footer-cols { grid-template-columns: 1fr; gap: var(--space-8); }
  .detail-row { grid-template-columns: 1fr; gap: var(--space-1); }
}
/* Mobile nav drawer */
.nav-drawer { display: none; position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; flex-direction: column; background: var(--bg-slate); padding: var(--space-8) var(--space-6); }
.nav-drawer a { font-size: var(--fs-h3); padding-block: var(--space-4); border-bottom: 1px solid var(--bg-rule); color: var(--ink-cream); }
.nav-drawer .btn { margin-top: auto; }

/* ---------- Motion (§6) ---------- */
/* The two sanctioned brand shimmers — ported verbatim from index.css. */
@keyframes bgarc-shimmer { 0%, 100% { opacity: .55; filter: brightness(.9); } 50% { opacity: 1; filter: brightness(1.06); } }
.bgarc-shimmer { animation: bgarc-shimmer 1.8s ease-in-out infinite; }
@keyframes bgarc-hint-shimmer { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.bgarc-hint-shimmer { animation: bgarc-hint-shimmer 3.6s ease-in-out infinite; }

/* Bespoke motion #1 — hero light-thread (Noah-approved). A short bright dash
   travels the exact arc path via stroke-dashoffset (pathLength normalized to
   1000). JS adds [data-play] once, on scroll-into-view. The base arc, lit
   glyph-signatures, and checked diamond are the DEFAULT render — so first
   paint and the no-JS path already show the completed founding image; the
   thread only adds the one-time travel over the top of it. */
.hero__thread { opacity: 0; stroke-dasharray: 70 930; stroke-dashoffset: 1000; }
.hero[data-play="true"] .hero__thread { opacity: 1; animation: thread-travel 4s ease-in-out forwards; }
@keyframes thread-travel {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* The checkpoint check draws in as the thread reaches the apex (the human
   gate beat). Statically drawn by default; re-draws once under [data-play]. */
.hero__check { stroke-dasharray: 14; stroke-dashoffset: 0; }
.hero[data-play="true"] .hero__check { animation: check-draw 4s ease-in-out forwards; }
@keyframes check-draw {
  0%, 55% { stroke-dashoffset: 14; }
  72%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

/* ---------- Flow centerpiece (§3) — bespoke motion #2 ---------- */
.flow { background: var(--bg-deep); }
.flow__stage { position: relative; width: 100%; max-width: var(--maxw-container); margin: 0 auto; aspect-ratio: 1200 / 300; }
.flow__stage svg { width: 100%; height: 100%; overflow: visible; }
/* The traveling thread: 0->apex(500) by the gate, hold, then apex->end(1000). */
.flow__thread { opacity: 0; stroke-dasharray: 80 920; stroke-dashoffset: 1000; }
.flow[data-play="true"] .flow__thread { opacity: 1; animation: flow-thread 6.4s ease-in-out forwards; }
@keyframes flow-thread {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  8%   { opacity: 1; }
  50%  { stroke-dashoffset: 500; }   /* reaches the apex checkpoint */
  81%  { stroke-dashoffset: 500; }   /* holds through the human gate beat */
  100% { stroke-dashoffset: 0; opacity: 1; }  /* completes to the delivered end */
}
/* The broker envelope detaches from the specialist and slides to the apex. */
.flow__envelope { opacity: 0; }
.flow[data-play="true"] .flow__envelope { animation: flow-envelope 6.4s ease-in-out forwards; }
@keyframes flow-envelope {
  0%, 31% { opacity: 0; transform: translate(0, 0); }
  36%     { opacity: 1; transform: translate(0, 0); }
  50%     { opacity: 1; transform: translate(268px, -44px); } /* to the apex */
  70%     { opacity: 1; transform: translate(268px, -44px); }
  72%     { opacity: 0; transform: translate(268px, -44px); } /* absorbed */
  100%    { opacity: 0; transform: translate(268px, -44px); }
}
/* The checkpoint check draws at the gate; delivered end brightens last. */
.flow__check { stroke-dasharray: 20; stroke-dashoffset: 0; }
.flow[data-play="true"] .flow__check { animation: flow-check 6.4s ease-in-out forwards; }
@keyframes flow-check { 0%, 50% { stroke-dashoffset: 20; } 68% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.flow__deliver { opacity: 1; }
.flow[data-play="true"] .flow__deliver { animation: flow-deliver 6.4s ease-in-out forwards; }
@keyframes flow-deliver { 0%, 81% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; } }
/* Specialist glyph wakes as the thread arrives (one shimmer window). */
.flow__specialist { opacity: 0.6; }
.flow[data-play="true"] .flow__specialist { animation: flow-wake 6.4s ease-in-out forwards; }
@keyframes flow-wake { 0%, 12% { opacity: .6; } 20% { opacity: 1; } 100% { opacity: 1; } }

/* Tier A static — the numbered civic caption list. Always in the DOM; it is
   the thesis in words, legible with zero frames of motion. Active-step
   emphasis is layered on only under [data-play]. */
.flow__captions { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--space-4); margin-top: var(--space-12); }
.flow__captions li { display: grid; grid-template-columns: 2.4rem 1fr; gap: var(--space-4); align-items: baseline; }
.flow__captions li::before { counter-increment: step; content: counter(step, upper-roman); font-family: var(--font-charter); font-weight: 700; font-size: 1.4rem; color: var(--arc-teal); }
.flow__captions .step-label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-cream-ter); display: block; margin-bottom: 2px; }
.flow__captions p { color: var(--ink-cream-sec); font-size: var(--fs-body); }
.replay-row { margin-top: var(--space-6); text-align: center; }

/* Two-chains + gates diagrams share the .diagram frame (§2.7). */
.diagram .node-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; fill: var(--ink-cream-sec); }
.diagram .node-name { font-family: var(--font-sans); font-size: 14px; font-weight: 700; fill: var(--ink-cream); }
.diagram .flow-line { stroke: var(--arc-blue); stroke-width: 1.6; fill: none; opacity: .7; }
.diagram .node-box { fill: var(--bg-slate-elev); stroke: var(--bg-rule); stroke-width: 1; }

/* Reduced motion + no-JS: everything renders as the completed still —
   full arc, lit glyphs, checked diamond, delivered end; no thread/envelope. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bgarc-shimmer, .bgarc-hint-shimmer { animation: none; opacity: 1; }
  .hero[data-play="true"] .hero__thread { animation: none; opacity: 0; }
  .hero[data-play="true"] .hero__check { animation: none; stroke-dashoffset: 0; }
  .flow[data-play="true"] .flow__thread { animation: none; opacity: 0; }
  .flow[data-play="true"] .flow__envelope { animation: none; opacity: 0; }
  .flow[data-play="true"] .flow__check { animation: none; stroke-dashoffset: 0; }
  .flow[data-play="true"] .flow__specialist { animation: none; opacity: 1; }
  .flow[data-play="true"] .flow__deliver { animation: none; opacity: 1; }
  .btn, .nav-links a, .agent-card, .link-arrow::after { transition: none; }
}