/*
 * flow.css - product-flow hero: the home page (templates/marketing/home.html)
 * and the staff prototype (/design/flow/), both through
 * templates/marketing/flow/_hero.html. Render-blocking, so it holds only the
 * fold: the hero copy and the signal network. The story and the bento are in
 * flow-story.css, loaded non-blocking. Tokens only; every colour comes from
 * tokens.css, tints are color-mix() of those tokens.
 *   1 hero        .flow-hero*, .flow-eyebrow*
 *   2 network     .flow-net*, .flow-p-* (SVG poster), .flow-label*, .flow-tag
 *   3 motion      only under prefers-reduced-motion: no-preference
 * The hero's two-column layout starts at 1100px, as on ezpztrading.com.
 */
@layer page {

/* ---------- 1. hero ---------- */
.flow-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-14);
}
.flow-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 10% 6%, color-mix(in srgb, var(--brand) 24%, transparent), transparent 70%),
    radial-gradient(48% 50% at 94% 34%, color-mix(in srgb, var(--action) 20%, transparent), transparent 70%);
}
.flow-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 28%, #000, transparent 76%);
  mask-image: radial-gradient(70% 62% at 50% 28%, #000, transparent 76%);
}
.flow-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.flow-hero-copy { min-width: 0; }
.flow-eyebrow {
  gap: var(--space-2);
  color: var(--action-ink);
  letter-spacing: .04em;
}
.flow-eyebrow-dot {
  flex: none;
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.flow-hero-title { letter-spacing: var(--tracking-tight); }
.flow-hero-title .hero-accent {
  background: linear-gradient(140deg, var(--ink) 0%, color-mix(in srgb, var(--brand) 40%, var(--ink)) 45%, var(--brand) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}
.flow-hero-lead {
  max-width: 54ch;
  font-size: var(--text-lead);
  text-wrap: pretty;
}
.flow-hero-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

@media (min-width: 1100px) {
  .flow-hero {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--header-h));
    padding-block: var(--space-12);
  }
  .flow-hero-inner {
    width: 100%;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    align-items: center;
    gap: var(--space-10);
  }
}

/* ---------- 2. signal network ---------- */
.flow-net {
  min-width: 0;
  margin: 0;
}
@media (max-width: 1099.98px) {
  .flow-net {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }
}
.flow-net-stage {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(70% 70% at 40% 50%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 72%),
    color-mix(in srgb, var(--surface) 70%, transparent);
  box-shadow: var(--shadow-2), var(--shadow-inset);
}
/* §9.7 #4: the trademark line sits directly under the broker logos */
.flow-net-fine {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--ink-3);
  text-align: center;
}
.flow-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.flow-net-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: pan-y;
}
.flow-net-canvas.is-dragging { cursor: grabbing; }

/* poster shapes */
.flow-stop-brand { stop-color: var(--brand); }
.flow-stop-ok { stop-color: var(--ok); }
.flow-stop-warn { stop-color: var(--warn); }
.flow-stop-neutral { stop-color: var(--neutral); }
.flow-p-stars circle { fill: var(--ink-3); }
[data-tone] { --tone-c: var(--neutral); }
[data-tone="ok"] { --tone-c: var(--ok); }
[data-tone="warn"] { --tone-c: var(--warn); }
[data-tone="danger"] { --tone-c: var(--danger); }
[data-tone="info"] { --tone-c: var(--info); }
.flow-p-arc {
  fill: none;
  stroke: var(--tone-c);
  stroke-width: 1.25;
  stroke-opacity: .55;
}
.flow-p-wire {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-opacity: .7;
}
/* sources: four glyphs feeding one wire; the first (the sample's source) is lit */
.flow-p-feed {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.25;
  stroke-opacity: .45;
}
.flow-p-feed.is-active {
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-opacity: .8;
}
.flow-p-src rect {
  fill: var(--raised);
  stroke: var(--border-strong);
  stroke-width: 1;
}
.flow-p-src path {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.flow-p-src.is-active rect { stroke: var(--border-brand); }
.flow-p-src.is-active path { stroke: var(--action-ink); }
/* real brand marks (templates/marketing/flow/logos/): TradingView in ink, TrendSpider as its own PNG */
.flow-logo-svg--ink { fill: var(--ink); }
.flow-p-src:not(.is-active) .flow-logo-svg { opacity: .7; }
.flow-p-gate {
  fill: none;
  stroke: var(--ok);
  stroke-width: 1.5;
  stroke-opacity: .75;
}
.flow-p-orbit {
  fill: none;
  stroke: var(--brand);
  stroke-width: 1;
  stroke-opacity: .4;
}
.flow-p-ring {
  fill: color-mix(in srgb, var(--brand) 12%, var(--surface));
  stroke: var(--brand);
  stroke-width: 2;
}
.flow-p-ring--inner {
  fill: none;
  stroke-width: 1;
  stroke-opacity: .5;
}
.flow-p-core { fill: var(--brand); }
.flow-p-node {
  fill: var(--tone-c);
  stroke: var(--surface);
  stroke-width: 2;
}

/* labels: HTML over the poster, moved by flow-scene.js when the 3D layer runs */
.flow-net-labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.flow-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
}
.flow-label-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.flow-label--src .flow-label-body,
.flow-label--hub .flow-label-body {
  align-items: center;
  text-align: center;
  transform: translateX(-50%);
}
.flow-label--acct .flow-label-body {
  max-width: 31cqi;
  transform: translate(14px, -50%);
}
.flow-label-name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  line-height: var(--leading-snug);
  color: var(--ink);
}
.flow-label-sub {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--ink-3);
  white-space: nowrap;
}
/* the source's mark, centred in its glyph frame (18 viewBox units above the
   label's anchor); only the 3D layer shows it, the poster draws its own */
.flow-src-logo {
  position: absolute;
  top: -3cqi;
  left: 0;
  display: none;
  transform: translate(-50%, -50%);
}
.flow-net-stage.is-live .flow-src-logo { display: block; }
.flow-src-logo .flow-logo-svg {
  display: block;
  width: 4.33cqi;
  height: 3cqi;
}
/* account labels: the broker's uploaded logo, else a monogram, before the name */
.flow-label--acct .flow-label-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.flow-logo {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--raised);
  font: var(--weight-semi) var(--text-2xs) / 1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--action-ink);
}
.flow-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flow-tag {
  --tag-c: var(--tone-c, var(--neutral));
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-2xs);
  line-height: var(--leading-snug);
  color: var(--ink-2);
  background: color-mix(in srgb, var(--tag-c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tag-c) 38%, transparent);
  border-radius: var(--radius-md);
}
.flow-tag b {
  font-weight: var(--weight-semi);
  color: var(--tag-c);
}
.flow-net-sample {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 3;
}
.flow-net-hint {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  z-index: 3;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
}
.flow-net-pause {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  gap: var(--space-1);
}
.flow-net-pause[hidden] { display: none; }
.flow-net-pause .flow-icon-play,
.flow-net-pause[aria-pressed="true"] .flow-icon-pause { display: none; }
.flow-net-pause[aria-pressed="true"] .flow-icon-play { display: inline; }

/* live 3D layer (class set by flow-scene.js after its first frame) */
.flow-net-stage.is-live .flow-poster { opacity: 0; }
.flow-net-stage.is-live .flow-net-hint { opacity: 1; }
.flow-net-stage.is-live .flow-label {
  top: 0;
  left: 0;
  will-change: transform;
}
.flow-net-stage.is-live .flow-label--acct .flow-tag { opacity: 0; }
.flow-net-stage.is-live .flow-label--src { opacity: .6; }
.flow-net-stage.is-live .flow-label--src.is-lit { opacity: 1; }
.flow-label--src.is-lit .flow-label-name { color: var(--action-ink); }
.flow-net-stage.is-live .flow-label--acct.is-lit .flow-tag { opacity: 1; }

/* phones: the accounts become a list under the poster */
@media (max-width: 640px) {
  .flow-net-labels {
    position: static;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--border);
  }
  .flow-label { position: static; }
  .flow-label--src,
  .flow-label--hub { display: none; }
  .flow-label--acct .flow-label-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1) var(--space-3);
    max-width: none;
    transform: none;
  }
}

/* ---------- 3. motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .flow-poster { transition: opacity var(--dur-reveal) var(--ease-out); }
  .flow-net-hint { transition: opacity var(--dur-reveal) var(--ease-out) var(--dur-hero); }
  .flow-net-stage.is-live .flow-label--acct .flow-tag {
    transform: translateY(3px);
    transition: opacity var(--dur-panel) var(--ease-out), transform var(--dur-panel) var(--ease-out);
  }
  .flow-net-stage.is-live .flow-label--acct.is-lit .flow-tag { transform: none; }
  .flow-net-stage.is-live .flow-label--src { transition: opacity var(--dur-panel) var(--ease-out); }
}

@media (forced-colors: active) {
  .flow-hero-title .hero-accent {
    color: CanvasText;
    background: none;
    -webkit-text-fill-color: CanvasText;
  }
}

} /* @layer page */