/* ==========================================================================
   HERO — THE SYSTEM DIAGRAM
   The hero's visual is an instrument view, not a product card. Four layers
   read top to bottom: sources enter, become decisions, join the knowledge
   core, and are routed to authorized outputs.

   Three materials are doing the work, and the difference must be visible at a
   glance or the whole thing collapses back into "one dark card at three
   opacities":

     ARCHIVE      warm ivory paper, dark ink. Physical records arriving from
                  the business. The only warm-light surface on the page.
     INSTRUMENT   dark slate with brass marks and hairline rules. Controls and
                  readouts — Polaris, the node states, the flow.
     OBSERVATORY  the dark cool ground everything sits on.

   Radii stay at 2-3px: these are catalog cards and instrument panels, not
   SaaS pills.
   ========================================================================== */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* -- Typographic voice: sans for people, mono for the machine ------------ */
.mono-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.hero__eyebrow-sep {
  width: 1px;
  height: 11px;
  background: var(--line-strong);
}

/* The bridge line: the service, stated before any scrolling. */
.hero__bridge {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp-4);
  max-width: none;
}
.hero__bridge span { color: var(--brass-muted); margin-inline: .35em; }

/* -- Instrument control, not a pill ------------------------------------- */
.btn--instrument {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink-2);
  padding: .72rem 1.05rem;
}
.btn--instrument:hover {
  border-color: var(--brass-line);
  background: var(--brass-dim);
  color: var(--paper);
  transform: none;
}
.btn--instrument .mono-tag { color: inherit; }

/* Primary stays periwinkle, but squared off like a control surface. */
.btn--primary { border-radius: 2px; }

/* ==========================================================================
   THE DIAGRAM
   ========================================================================== */
.diagram {
  margin: 0;
  display: grid;
  gap: var(--sp-4);
  /* Observatory ground: a very slightly raised plane, hairline edge. */
  background: linear-gradient(180deg, rgba(23, 30, 43, .55), rgba(13, 19, 32, .35));
  border: 1px solid var(--line-ink);
  border-radius: 3px;
  padding: clamp(1rem, 2vw, 1.5rem);
  position: relative;
}

/* Corner registration marks — the cheapest way to make a rectangle read as an
   instrument panel rather than a container. */
.diagram::before,
.diagram::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border-color: var(--brass-muted);
  border-style: solid;
  opacity: .7;
}
.diagram::before { top: 4px; left: 4px; border-width: 1px 0 0 1px; }
.diagram::after { bottom: 4px; right: 4px; border-width: 0 1px 1px 0; }

.diagram__svg { display: block; width: 100%; height: auto; }

.diagram__caption {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-ink);
}
.diagram__caption-sep { color: var(--ink-4); font-family: var(--font-mono); font-size: 10px; }

/* -- Layer headers ------------------------------------------------------ */
.sys__layer-label {
  fill: var(--brass-bright);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
.sys__layer-rule { stroke: var(--brass-line); stroke-width: 1; }

/* ============================================================ LAYER A — SOURCE
   Archive paper. The only warm-light material in the hero, used here because
   these are the business's own documents. */
.sys__doc-paper {
  fill: var(--paper);
  stroke: none;
}
.sys__doc-tab {
  fill: var(--brass-muted);
}
.sys__doc-tab-text {
  fill: var(--paper);
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}
.sys__doc-name {
  fill: var(--ink-on-paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.sys__doc-meta {
  fill: var(--ink-on-paper);
  opacity: .75;
  font-family: var(--font-body);
  font-size: 8.5px;
  letter-spacing: .02em;
}

/* ===================================================== LAYER B — DECISION NODES
   Instrument surfaces, with state carried by colour:
     canonical  brass     — authoritative, settled
     candidate  periwinkle — awaiting review
     collision  coral      — sources disagree
     dark       violet     — nothing known, a gap */
.sys__node-card {
  fill: rgba(13, 19, 32, .85);
  stroke: var(--line-ink);
  stroke-width: 1;
}
.sys__node-state {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}
.sys__node-id {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.sys__node-note {
  font-family: var(--font-body);
  font-size: 9.5px;
  fill: var(--ink-2);
}
.sys--canonical .sys__node-state { fill: var(--brass); }
.sys--canonical .sys__node-card  { stroke: var(--brass-line); }
.sys--candidate .sys__node-state { fill: var(--signal); }
.sys--candidate .sys__node-card  { stroke: var(--signal-line); }
.sys--collision .sys__node-state { fill: var(--dispute); }
.sys--collision .sys__node-card  { stroke: var(--dispute-line); }
.sys--unknown   .sys__node-state { fill: var(--violet-dark); }
.sys--unknown   .sys__node-card  { stroke: var(--violet-line); }

/* ======================================================== LAYER C — POLARIS
   The central instrument. Brass authority ring outside, periwinkle live ring
   inside, hairline topology edges. Deliberately not a glowing orb. */
.sys__core-edge { stroke: var(--brass-line); stroke-width: 1; fill: none; }
.sys__core-ring { fill: none; stroke-width: 1; }
.sys__core-ring--authority { stroke: var(--brass); stroke-width: 1.5; }
.sys__core-ring--live { stroke: var(--signal-line); stroke-dasharray: 3 4; }
.sys__core-body {
  fill: rgba(13, 19, 32, .95);
  stroke: var(--brass-bright);
  stroke-width: 1.5;
}
.sys__core-tick { stroke: var(--brass-muted); stroke-width: 1.5; }
.sys__core-title {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
}
.sys__core-sub {
  fill: var(--brass-bright);
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: .12em;
}

/* ======================================================== LAYER D — OUTPUTS
   Two authorizations on the same knowledge. The left panel shows three subset
   lines and the right shows two — the visual argument that an orbit receives
   only what it is permitted. */
.sys__out-panel {
  fill: rgba(13, 19, 32, .7);
  stroke: var(--line-ink);
}
.sys__out-subset { stroke: var(--signal-line); stroke-width: 1.5; fill: none; }
.sys__out-name {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
}
.sys__out-orbit {
  fill: var(--ink-2);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .02em;
}

/* -- Flow edges: hairlines, not glow ------------------------------------ */
.sys__flow-edge {
  stroke: var(--brass-line);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 3 4;
}

/* ============================================================ THE SIGNAL
   One document's journey through the system, ~4.5s, then rest. It travels:
   source -> scan -> node -> core -> output. Shown once; it is an explanation,
   not a loop of blinking. */
.sys__sig-head { fill: var(--signal-bright, var(--signal)); }
.sys__sig-scan { stroke: var(--signal); stroke-width: 1.5; opacity: 0; }

@keyframes sigTravel {
  0%   { transform: translate(125px, 70px); opacity: 0; }
  6%   { opacity: 1; }
  /* scan across the source card */
  16%  { transform: translate(125px, 70px); opacity: 1; }
  /* become a decision node */
  30%  { transform: translate(101px, 189px); opacity: 1; }
  /* join the core */
  52%  { transform: translate(360px, 350px); opacity: 1; }
  62%  { transform: translate(360px, 350px); opacity: 1; }
  /* route to the support output */
  80%  { transform: translate(200px, 505px); opacity: 1; }
  92%  { transform: translate(200px, 505px); opacity: 0; }
  100% { transform: translate(200px, 505px); opacity: 0; }
}

.js .diagram.is-visible .sys__sig-head {
  animation: sigTravel 4.5s var(--ease-weight) .6s infinite;
}

@keyframes sigScan {
  0%, 8%   { opacity: 0; }
  12%      { opacity: .9; }
  22%      { opacity: 0; }
  100%     { opacity: 0; }
}
.js .diagram.is-visible .sys__sig-scan { animation: sigScan 4.5s linear .6s infinite; }

/* ==========================================================================
   HERO BACKGROUND INSTRUMENTATION
   Faint structure rather than a flat field: a technical grid, coordinate ticks
   and instrument lines at very low opacity. Background instrumentation, not
   decoration — no starfield, no nebula, no glow.
   ========================================================================== */
.hero__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    /* fine grid */
    linear-gradient(to right, var(--line-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-ink) 1px, transparent 1px),
    /* long instrument lines, sparser */
    linear-gradient(to bottom, var(--line-ink) 1px, transparent 1px);
  background-size: 44px 44px, 44px 44px, 220px 220px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, #000 20%, transparent 78%);
}

@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .diagram { max-width: 34rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .diagram.is-visible .sys__sig-head,
  .js .diagram.is-visible .sys__sig-scan { animation: none; opacity: 0; }
  /* Without the travel, the diagram still reads: the four layers and the
     subset lines carry the explanation on their own. */
}

/* -- Grouping wrappers and structural modifiers -------------------------
   These carry no styling of their own: they exist so the SVG reads as a
   layered diagram (each layer, each flow group, each document/node group) and
   so a future change can target one layer without touching the others.
   Declared explicitly rather than left undeclared, so the class-coverage
   check treats them as intentional structure. */
.sys-layer, .sys--source, .sys--nodes, .sys--polaris, .sys--outputs,
.sys-flow, .sys-doc, .sys--d1, .sys--d2, .sys--d3,
.sys-node, .sys--canonical, .sys--candidate, .sys--collision, .sys--unknown,
.sys-core, .sys-out, .sys--support, .sys--sales, .sys-sig { /* structural only */ }

/* -- Real Light Mode: Scientific Observatory Archive -------------------- */
[data-theme="light"] .diagram {
  background: var(--paper-bright);
  border-color: var(--line-strong);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}
[data-theme="light"] .sys__layer-label {
  fill: var(--brass-muted);
}
[data-theme="light"] .sys__layer-rule {
  stroke: var(--line);
}
[data-theme="light"] .sys__doc-paper {
  fill: #ffffff;
  stroke: var(--line);
  stroke-width: 1;
}
[data-theme="light"] .sys__doc-name {
  fill: var(--ink);
}
[data-theme="light"] .sys__doc-meta {
  fill: var(--ink-3);
}
[data-theme="light"] .sys__node-card {
  fill: #ffffff;
  stroke: var(--line);
}
[data-theme="light"] .sys__node-note {
  fill: var(--ink-3);
}
[data-theme="light"] .sys--canonical .sys__node-state { fill: #8a671e; }
[data-theme="light"] .sys--candidate .sys__node-state { fill: #2d5ec7; }
[data-theme="light"] .sys--collision .sys__node-state { fill: #b83232; }
[data-theme="light"] .sys--unknown   .sys__node-state { fill: #61468e; }
[data-theme="light"] .sys__core-body {
  fill: #ffffff;
  stroke: var(--brass);
}
[data-theme="light"] .sys__core-title {
  fill: var(--ink);
}
[data-theme="light"] .sys__core-sub {
  fill: #8a671e;
}
[data-theme="light"] .sys__out-panel {
  fill: #ffffff;
  stroke: var(--line-strong);
}
[data-theme="light"] .sys__out-name {
  fill: var(--ink);
}
[data-theme="light"] .sys__out-orbit {
  fill: var(--ink-3);
}
[data-theme="light"] .sys__flow-edge {
  stroke: var(--line-strong);
}