/* ==========================================================================
   VENUS — RESEARCH & TECHNOLOGY PAGE
   Visual language: laboratory · scientific systems · instrumentation ·
   material intelligence. A layered instrument hero, a connected process spine,
   a branching research map, and a collaboration model. Tokens only; structural
   labels only (R-01…), never fabricated data.
   ========================================================================== */

/* ------------------------------------------------------------- Lab hero ---- */
.lab-hero {
  position: relative; overflow: hidden; color: var(--text-on-dark);
  background:
    radial-gradient(80% 120% at 10% 0%, rgba(93,107,120,0.18), transparent 55%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
  border-bottom: 1px solid var(--color-border-dark);
}
.lab-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 25% 35%, #000 20%, transparent 80%);
          mask-image: radial-gradient(ellipse 90% 90% at 25% 35%, #000 20%, transparent 80%);
}
.lab-hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: var(--space-10, 2.5rem);
  padding-block: clamp(2.25rem, 1.8rem + 3vw, 4.5rem); align-items: center;
}
@media (min-width: 992px) { .lab-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); } }
.lab-hero__kicker {
  display: inline-flex; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-weight: var(--fw-semibold);
  font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--copper-300); margin: 0 0 var(--space-4);
}
.lab-hero__kicker .idx { color: var(--steel-300); padding-right: var(--space-3); border-right: 1px solid var(--color-border-dark); }
.lab-hero__title {
  font-weight: var(--fw-bold); letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(2.05rem, 1.4rem + 3vw, 3.5rem); color: var(--text-on-dark);
  max-width: 16ch; margin: 0 0 var(--space-6); text-wrap: balance;
}
.lab-hero__lede { font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem); line-height: 1.55; color: var(--text-on-dark-muted); max-width: 54ch; margin: 0; }

/* --- Instrument: SVG research composition + active register in one frame --- */
.instrument {
  background: rgba(10,9,8,0.55); border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg);
}
.instrument__scope { position: relative; border-bottom: 1px solid var(--color-border-dark); background:
  radial-gradient(120% 120% at 70% 30%, rgba(184,115,51,0.10), transparent 60%); }
.instrument__scope svg { display: block; width: 100%; height: auto; }
.scope-line   { stroke: var(--steel-500); stroke-width: 1; fill: none; }
.scope-accent { stroke: var(--copper-300); stroke-width: 1.5; fill: none; }
.scope-core   { fill: rgba(184,115,51,0.10); stroke: var(--copper-300); stroke-width: 1.5; }
.scope-dot    { fill: var(--copper-300); }
.scope-node   { fill: var(--ink-900); stroke: var(--steel-300); stroke-width: 1; }
.scope-tick   { stroke: var(--steel-500); stroke-width: 1; }
.scope-label  { fill: var(--steel-300); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.12em; }
/* One-time trace draw of the accent geometry (real displays; reduced-motion off) */
.js .scope-accent, .js .scope-trace {
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  animation: scopeTrace 1600ms var(--ease-out) 300ms forwards;
}
@keyframes scopeTrace { to { stroke-dashoffset: 0; } }

.instrument__register { padding: var(--space-1) 0; }
.readout__bar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-dark);
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--steel-300);
}
.readout__bar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--copper-500); box-shadow: 0 0 0 3px rgba(184,115,51,0.18); }
.readout__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-dark); }
.readout__row:last-child { border-bottom: 0; }
.readout__code { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--copper-300); }
.readout__name { font-weight: var(--fw-medium); color: var(--text-on-dark); }
.readout__state { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--steel-300); display: inline-flex; align-items: center; gap: var(--space-2); }
.readout__state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

/* ------------------------------------------ Process spine (M→…→Outcome) ----
   A single connected system. Mobile: vertical spine. Desktop: horizontal. */
.process-spine { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.process-node { position: relative; padding: 0 0 var(--space-8) calc(var(--space-12) + 0.5rem); }
.process-node:last-child { padding-bottom: 0; }
.process-node__dot {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-bold);
  color: var(--color-accent-strong); background: var(--bg-page); border: 2px solid var(--color-accent); z-index: 1;
}
.process-node:not(:last-child)::before {
  content: ""; position: absolute; left: 22px; top: 46px; bottom: 0; width: 2px;
  background: var(--color-border); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur-cinematic) var(--ease-out);
}
[data-stagger].is-visible .process-node:not(:last-child)::before { transform: scaleY(1); }
.process-node__stage { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--steel-500); margin: 0 0 2px; }
.process-node__title { font-size: var(--fs-h3); margin: 0 0 var(--space-1); }
.process-node__note { margin: 0; color: var(--color-text-muted); max-width: 60ch; }

@media (min-width: 992px) {
  .process-spine { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process-node { padding: calc(46px + var(--space-6)) var(--space-3) 0; text-align: center; }
  .process-node__dot { left: 50%; top: 0; transform: translateX(-50%); }
  .process-node:not(:last-child)::before {
    left: 50%; right: -50%; top: 22px; bottom: auto; width: auto; height: 2px;
    transform: scaleX(0); transform-origin: left;
  }
  [data-stagger].is-visible .process-node:not(:last-child)::before { transform: scaleX(1); }
  .process-node__note { max-width: none; }
}

/* --------------------------------------------- Research map (branching) -----
   Root domain node branches to gated research items — one system, not cards. */
.research-map { position: relative; }
.research-map__root {
  max-width: 30ch; margin: 0 auto var(--space-8); text-align: center;
  padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-pill); background: var(--bg-dark); color: var(--text-on-dark);
  font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase;
}
.research-branch { display: grid; grid-template-columns: 1fr; gap: var(--space-4); position: relative; }
@media (min-width: 768px) { .research-branch { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); } }
.research-branch__item { position: relative; }
/* connector from the root down into each branch item */
.research-branch__item::before {
  content: ""; position: absolute; left: 22px; top: calc(-1 * var(--space-4)); height: var(--space-4); width: 2px; background: var(--color-accent); opacity: 0.5;
}
@media (min-width: 768px) {
  .research-branch::before {
    content: ""; position: absolute; top: calc(-1 * var(--space-6)); left: 16.66%; right: 16.66%; height: 2px; background: var(--color-accent); opacity: 0.5;
  }
  .research-branch__item::before { left: 50%; transform: translateX(-50%); top: calc(-1 * var(--space-6)); }
}
.research-branch__item .focus-item { height: 100%; }

/* ------------------------------------------------ Collaboration model ------- */
.collab-model { display: grid; gap: 0; }
.collab-node {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-5) var(--space-6); border: var(--border-hairline); background: var(--bg-page);
}
.collab-node:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.collab-node:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.collab-node:not(:last-child) { border-bottom: 0; }
.collab-node__mark { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-accent); flex: 0 0 auto; }
.collab-node__label { font-weight: var(--fw-semibold); }
.collab-node:not(:last-child)::after {
  content: "\2195"; position: absolute; left: calc(var(--space-6) + 6px); bottom: -12px; transform: translateX(-50%);
  color: var(--color-accent); font-size: 0.9rem; background: var(--bg-surface); line-height: 1; z-index: 1;
}

.focus-item { position: relative; }
.focus-item__code { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; color: var(--color-accent-strong); }
.data-label { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-strong); }
@media (prefers-reduced-motion: reduce) {
  .js .scope-accent, .js .scope-trace { animation: none; stroke-dashoffset: 0; }
  .process-node::before { transform: none !important; }
}