/* Motion-related layout. Content is ALWAYS visible by default — JS applies
   initial hidden states only when animation will run, so no-JS and crawler
   views see the complete page. */

/* ---------- hero — composed at load + ambient agentic-pipeline loop ----------
   EMU-8 round 2: no pinning, no scroll-scrub anywhere in the hero. The CSS
   defaults below ARE the composed final frame (all text visible, memo fully
   written with chips and stamp): hero.js applies hidden states only when the
   entrance/loop will actually run, so no-JS and reduced-motion render the
   finished frame. Ported from docs/design/hero-prototype.html onto site tokens. */
.hero { position: relative; overflow: hidden; }
.hero-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 78% 30%, rgba(230, 178, 76, .05), transparent 60%),
    radial-gradient(700px 420px at 15% 80%, rgba(92, 141, 240, .05), transparent 60%);
}
.hero-gridlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(rgba(26, 34, 51, .55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 34, 51, .55) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(1200px 800px at 60% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(1200px 800px at 60% 40%, #000 30%, transparent 75%);
}
.hero-grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 4vw, 72px); align-items: center;
  min-height: calc(100vh - var(--nav-h));
  padding-top: calc(var(--nav-h) + clamp(30px, 6vh, 70px));
  padding-bottom: 60px;
}
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .22em; color: var(--text-3); text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--gold); box-shadow: 0 0 10px var(--gold); flex: none; }
.hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); line-height: 1.06; letter-spacing: -.015em; margin: 22px 0 24px; }
.hero h1 .l { display: block; overflow: hidden; }
.hero h1 .l span { display: inline-block; }
.hero .sub { font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.65; color: var(--text-2); max-width: 54ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.trust { margin-top: 30px; font-family: var(--mono); font-size: var(--fs-micro); color: var(--text-3); letter-spacing: .08em; }
.trust b { color: var(--teal); font-weight: 500; }

/* pipeline — fixed 727×560 design space (from the prototype), scaled to fit
   its column. --pipe-scale: JS sets the exact fit; the media steps below are
   the no-JS fallback so the composed frame never clips. */
.pipe-wrap { position: relative; height: clamp(480px, 60vh, 600px); }
.pipe {
  position: absolute; left: 50%; top: 50%;
  width: 727px; height: 560px;
  transform: translate(-50%, -50%) scale(var(--pipe-scale, .78));
}
@media (max-width: 1367px) and (min-width: 1025px) { .pipe { --pipe-scale: .66; } }
@media (max-width: 1024px) { .pipe { --pipe-scale: .82; } }
@media (max-width: 640px) { .pipe { --pipe-scale: .58; } }
@media (max-width: 470px) { .pipe { --pipe-scale: .45; } }
.pipe .node { position: absolute; background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.pipe .node .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--text-3); }
.pipe .node .nm { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-top: 5px; }
.pipe .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.pipe .src { width: 150px; border-left: 2px solid var(--c); }
.pipe .src .nm { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.pipe .agent { width: 168px; }
.pipe .agent .st { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); margin-top: 6px; }
.pipe svg.wires { position: absolute; left: 0; top: 0; width: 680px; height: 560px; overflow: visible; }
.wire { fill: none; stroke: var(--line); stroke-width: 1.5; }
.pulse { filter: drop-shadow(0 0 6px currentColor); }

/* memo card — defaults are the fully-written state */
.memo {
  position: absolute; width: 262px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-top: 2px solid var(--gold);
  padding: 18px 18px 16px;
}
.memo .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.memo .hd .t { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; color: var(--text-2); }
.memo .hd .live { font-family: var(--mono); font-size: 9px; color: var(--gold); border: 1px solid var(--gold); padding: 2px 7px; letter-spacing: .12em; }
.mline { margin-bottom: 13px; }
.mline .bar { height: 9px; background: linear-gradient(90deg, #2A3650, #1B2436); }
.mline .bar.b2 { width: 86%; } .mline .bar.b3 { width: 92%; } .mline .bar.b4 { width: 70%; }
.mline .cite {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--teal);
  border: 1px solid rgba(54, 200, 160, .4); background: var(--teal-soft); padding: 2px 7px;
}
.stamp {
  margin-top: 4px; display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  color: var(--gold); border: 1px solid var(--gold); background: var(--gold-soft); padding: 6px 10px;
}
.flow-cap { position: absolute; left: 0; bottom: -8px; font-family: var(--mono); font-size: 10px; letter-spacing: .22em; color: var(--text-3); }
.flow-cap b { color: var(--gold); font-weight: 500; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; min-height: 0; }
  .pipe-wrap { height: 520px; max-width: 640px; }
}

/* ---------- problem visual ---------- */
.problem-visual { background: var(--panel); border: 1px solid var(--line-soft); padding: var(--space-3); }
.lane { margin-bottom: var(--space-3); }
.lane .lane-label { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--text-2); display: flex; justify-content: space-between; margin-bottom: 8px; }
.lane .track { height: 10px; background: var(--bg-elev); border: 1px solid var(--line-soft); position: relative; }
.lane .fill { position: absolute; inset: 0 auto 0 0; width: var(--w, 100%); }
.lane.global .fill { background: linear-gradient(90deg, rgba(54,200,160,.25), var(--teal)); }
.lane.sea .fill { background: linear-gradient(90deg, rgba(92,141,240,.25), var(--blue)); }
.gap-callout {
  border: 1px dashed rgba(230, 178, 76, .5); background: var(--gold-soft);
  padding: 12px 16px; font-family: var(--mono); font-size: var(--fs-micro);
  letter-spacing: .08em; color: var(--gold);
}
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ---------- platform signal line ---------- */
.signal-line { height: 2px; background: var(--line-soft); position: relative; margin: var(--space-4) 0 0; overflow: hidden; }
.signal-line .pulse { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, var(--text-3), var(--teal), var(--gold)); }

/* ---------- doctrines ---------- */
.doctrines-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: stretch; }
@media (max-width: 860px) { .doctrines-grid { grid-template-columns: 1fr; } .doctrine-seam { display: none; } }
.doctrine { background: var(--panel); border: 1px solid var(--line-soft); padding: var(--space-4) var(--space-3); }
.doctrine-seam { width: 2px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }

/* ---------- vision ---------- */
.vision { position: relative; overflow: hidden; }
.vision .drift {
  position: absolute; inset: -20% 0; z-index: 0; opacity: .35; pointer-events: none;
  background-image: radial-gradient(1px 1px at 12% 30%, var(--text-3) 1px, transparent 0),
    radial-gradient(1px 1px at 34% 70%, var(--text-3) 1px, transparent 0),
    radial-gradient(1px 1px at 58% 22%, var(--text-3) 1px, transparent 0),
    radial-gradient(1px 1px at 76% 62%, var(--text-3) 1px, transparent 0),
    radial-gradient(1px 1px at 90% 38%, var(--text-3) 1px, transparent 0);
  background-size: 640px 480px;
}
.vision .container { position: relative; z-index: 1; }
.vision h2 { max-width: 20ch; }
.vision h2 .w { display: inline-block; }

/* ---------- ambient drift (vision) — CSS-only, no ScrollTrigger ---------- */
@media (prefers-reduced-motion: no-preference) {
  .vision .drift { animation: drift-float 60s ease-in-out infinite alternate; }
}
@keyframes drift-float { from { transform: translateY(-2%); } to { transform: translateY(2%); } }

/* ---------- reduced motion: dignified static rendering ---------- */
@media (prefers-reduced-motion: reduce) {
  .cta-band::before { transform: translateX(0); }
  .signal-line .pulse { transform: none; }
}
body.reduced-motion .cta-band::before { transform: translateX(0); }

/* ---------- print: every animated element at its final visible state ---------- */
@media print {
  [data-reveal], [data-stagger] > *, [data-split-words] .w,
  .js-e, .js-s, .js-c, .js-t, .hero h1 .l span,
  .pipe .node, .memo, .wire, .mline .bar, .mline .cite, .stamp,
  .problem-visual .fill, .gap-callout, .doctrine-seam, .signal-line .pulse {
    opacity: 1 !important; transform: none !important; visibility: visible !important;
  }
  .cta-band::before { transform: none !important; }
  .nav, .nav-site, .consent-banner, .progress-bar { display: none !important; }
}