/* ==========================================================================
   flowio — HOMEPAGE HERO  ·  animated workflow schematic
   File: css/hero-flow.css      Loaded by: index.html
   --------------------------------------------------------------------------
   Scoped under .hero-flow / .hf-*. Additive only — no existing selector is
   overridden outside the hero. Pairs with scripts/hero-flow.js.

   Layout notes:
   · Both SVGs are inline in the markup with a viewBox, so they reserve their
     own height at parse time — the hero contributes no CLS.
   · The wide schematic swaps for a stacked one at 640px. Neither scrolls.
   ========================================================================== */

.hero-flow {
  --hf-coral: #f95730;
  --hf-ink: hsl(220 25% 18%);
  --hf-muted: hsl(220 10% 42%);
  --hf-faint: hsl(220 10% 55%);
  --hf-line: hsl(220 12% 84%);
  --hf-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* .hero is a centred flex box; this hero is a normal document flow block.
     margin-top (navbar offset) is inherited from .hero and left alone. */
  display: block;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: hsl(30 20% 98%); /* flows into .trust-bar below */
  padding-block: clamp(2.25rem, 5vw, 4rem);
}

.hero-flow > .container { position: relative; z-index: 1; }

/* --- blueprint grid ------------------------------------------------------ */
.hf-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(hsla(220, 14%, 45%, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, hsla(220, 14%, 45%, 0.08) 1px, transparent 1px);
  background-size: 132px 132px;
  -webkit-mask-image: radial-gradient(ellipse 95% 80% at 45% 40%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 80% at 45% 40%, #000 45%, transparent 100%);
}

/* ==========================================================================
   HEADLINE
   ========================================================================== */

.hf-title {
  font-size: clamp(2.75rem, 7.2vw, 5.25rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--hf-ink);
  max-width: 20ch;
  margin-bottom: 2rem;
}

/* keyword line — kept inside the h1 so the H1 still carries it */
.hero-flow .h1-small {
  display: block;
  font-family: var(--hf-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hf-muted);
  margin-bottom: 1.5rem;
}

.hf-title em {
  font-style: italic;
  background: linear-gradient(135deg, hsl(16 100% 58%) 0%, hsl(30 100% 55%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================================================
   COPY + SCHEMATIC
   ========================================================================== */

/* Three children: the h2 lead-in, the lede, and the diagram. Row gap is 0 so
   the h2 and lede can sit tight together — spacing is set by their own margins
   instead, which is what keeps the two reading as one block. */
.hf-split {
  display: grid;
  row-gap: 0;
  align-items: center;
  margin-bottom: 2.5rem;
}
@media (min-width: 940px) {
  .hf-split {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: 3.5rem;
  }
  /* Copy stacks down column 1; the diagram spans both of its rows in column 2.
     Those rows stretch to match the taller diagram, so the h2 is pinned to the
     bottom of its row and the lede to the top of its — otherwise align-items:
     center would centre each in its own enlarged row and prise them apart.
     The pair still sits centred as a block against the diagram. */
  .hf-split > h2 { grid-column: 1; align-self: end; }
  .hf-split > .hf-lede { grid-column: 1; align-self: start; }
  .hf-split > .hf-visual {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin-top: 0;
  }
}

/* SEO sub-heading — reads as the bold first line of the paragraph below it */
.hf-split > h2 {
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--hf-ink);
  max-width: 34rem;
  margin: 0 0 0.7rem;
}

.hf-lede {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--hf-muted);
  max-width: 34rem;
  margin: 0;
}

.hf-visual {
  min-width: 0;
  margin-top: 2.5rem; /* stacked layouts only; cleared in the 940px rule */
}

.hf-svg {
  display: block;
  width: 100%;
  height: auto; /* viewBox reserves the box — no layout shift */
  margin-inline: auto;
}

.hf-svg--wide { max-width: 720px; }
.hf-svg--stack { max-width: 340px; display: none; }

@media (max-width: 639px) {
  .hf-svg--wide { display: none; }
  .hf-svg--stack { display: block; }
}

/* --- connectors ---------------------------------------------------------- */
.hf-edge {
  fill: none;
  stroke: var(--hf-line);
  stroke-width: 1;
  stroke-linecap: round;
}
.hf-edge-live {
  fill: none;
  stroke: var(--hf-coral);
  stroke-width: 1.25;
  stroke-linecap: round;
  opacity: 0;
}

/* --- packets ------------------------------------------------------------- */
.hf-packet { opacity: 0; }
.hf-packet-halo { fill: var(--hf-coral); opacity: 0.18; }
.hf-packet-core { fill: var(--hf-coral); }

/* --- node glyphs + labels ------------------------------------------------ */
.hf-glyph {
  fill: none;
  stroke: hsl(220 12% 68%);
  stroke-width: 1.25;
  transition: stroke 0.3s ease, fill 0.3s ease;
}
.hf-node.is-live .hf-glyph,
.hf-node.is-done .hf-glyph { stroke: var(--hf-coral); }
.hf-node.is-done .hf-glyph { fill: var(--hf-coral); }

.hf-label {
  font-family: var(--hf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  fill: var(--hf-faint);
  transition: fill 0.3s ease;
}
.hf-node.is-live .hf-label { fill: var(--hf-ink); }

/* --- the engine ---------------------------------------------------------- */
.hf-core { transition: filter 0.4s ease; }
.hf-core.is-processing { filter: drop-shadow(0 3px 14px hsla(16, 94%, 55%, 0.3)); }

.hf-core-card {
  fill: #fff;
  stroke: hsl(220 12% 74%);
  stroke-width: 1.25;
  transition: stroke 0.3s ease;
}
.hf-core.is-processing .hf-core-card { stroke: var(--hf-coral); }

.hf-core-bar {
  fill: hsl(220 12% 88%);
  transition: fill 0.25s ease;
}
.hf-core-bar.is-on { fill: var(--hf-coral); }

.hf-core-ring {
  fill: none;
  stroke: var(--hf-coral);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.hf-core.is-processing .hf-core-ring { animation: hf-ring 1.4s ease-out infinite; }
@keyframes hf-ring {
  0%   { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0;    transform: scale(1.3); }
}

.hf-core-label {
  font-family: var(--hf-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  fill: var(--hf-faint);
  text-anchor: middle;
}

/* ==========================================================================
   ACTIONS
   ========================================================================== */

.hf-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* squared editorial buttons — site's own font, not the schematic mono */
.hf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 6px;
  background: var(--hf-ink);
  color: #fff;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease,
              color 0.25s ease, border-color 0.25s ease;
}
.hf-btn:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px hsla(220, 30%, 20%, 0.22);
}
.hf-btn svg { flex-shrink: 0; }

.hf-btn-marker {
  width: 9px;
  height: 9px;
  background: var(--hf-coral);
  flex-shrink: 0;
}

.hf-btn--ghost {
  background: transparent;
  color: var(--hf-ink);
  border: 1.5px solid var(--hf-line);
  padding: calc(1rem - 1.5px) calc(1.5rem - 1.5px);
}
.hf-btn--ghost:hover {
  background: transparent;
  border-color: var(--hf-coral);
  color: var(--hf-coral);
  box-shadow: none;
}

.hf-note {
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--hf-faint);
}

/* ==========================================================================
   OPENAI PARTNER BANNER — sits on the paper background
   ========================================================================== */

.hero-flow .oai-partner-banner {
  margin-top: 2.75rem;
  margin-bottom: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 939px) {
  .hf-title { max-width: 100%; }
  .hf-split > h2 { max-width: 100%; }
  .hf-lede { max-width: 100%; }
}

@media (max-width: 639px) {
  .hero-flow { padding-block: 1.5rem 2.25rem; }
  .hf-title { margin-bottom: 1.5rem; }
  .hero-flow .h1-small { margin-bottom: 1rem; letter-spacing: 0.16em; }
  .hf-split { margin-bottom: 2rem; }
  .hf-split > h2 { font-size: 1.0625rem; line-height: 1.5; margin-bottom: 0.6rem; }
  .hf-lede { font-size: 1rem; line-height: 1.7; }
  .hf-visual { margin-top: 2rem; }

  /* Stack the CTAs full-bleed and centred. The container's own side padding
     provides the margin either side. max-width only binds above ~490px so it
     never shortens the buttons on a real phone — it just stops them running
     silly-wide on the largest "mobile" viewports. */
  .hf-actions {
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
  }
  .hf-btn {
    width: 100%;
    max-width: 460px;
    justify-content: center;
  }
  .hf-note {
    width: 100%;
    max-width: 460px;
    text-align: center;
  }
}

/* ==========================================================================
   REDUCED MOTION — hold a completed run, no packets or pulses
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hf-packet { display: none; }
  .hf-edge-live { opacity: 0.45; }
  .hf-core-ring { animation: none; }
  .hf-glyph,
  .hf-label,
  .hf-core,
  .hf-core-card,
  .hf-core-bar { transition: none; }
}