/* ixway hero: "Your organization's AI use is opaque." -> "ixway clears the fog."
   Requires tokens.css. Driven by --hero-progress (0..1), set by hero.js on .hero.
   Every ramp below is a plain function of that one number, so the page can
   reuse it (e.g. a nav that turns from night to paper). */

.hero {
  --hero-progress: 0;
  /* night -> paper crossfade, mirrored in hero.js (BG0/BG1) */
  --hero-bg: clamp(0, (var(--hero-progress) - 0.3) / 0.14, 1);
  position: relative;
  height: 200vh; /* ~100vh of pinned scroll; set by CSS, never by JS */
}

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--ink-on-night);
}

.hero__paper,
.hero__graph,
.hero__fog {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The resolved diagram sits on the app's canvas dot grid (ix-canvas). */
.hero__paper {
  background: radial-gradient(circle, var(--rule) 1px, transparent 1.4px) 0 0 / 18px 18px, var(--paper);
  opacity: var(--hero-bg);
}

/* SVG graph sits under the fog so the fog genuinely hides it. */
.hero__graph {
  display: block;
  overflow: visible;
  color: color-mix(in srgb, var(--ink) calc(var(--hero-bg) * 100%), var(--fog-2));
  font-family: var(--font-mono);
  pointer-events: none;
  user-select: none;
}

.hero__fog { pointer-events: none; }

/* The mark is the shared path inside the fog. The exact brand outline stays
   still; scroll reveals it briefly, then yields the space to the live graph. */
.hero__brand {
  --brand-in: clamp(0, var(--hero-progress) / 0.14, 1);
  --brand-out: clamp(0, (var(--hero-progress) - 0.18) / 0.18, 1);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 12vh;
  color: var(--ink-on-night);
  opacity: calc((0.34 + var(--brand-in) * 0.4) * (1 - var(--brand-out)));
  pointer-events: none;
}
.hero__mark { width: min(32vw, 460px); height: auto; }

/* ---- graph primitives (built by hero.js) */
.hg-name { fill: currentColor; }
.hg-sub { fill: currentColor; fill-opacity: 0.68; }
.hg-sub--acc { fill: var(--accent-deep); fill-opacity: 1; }
.hg-prose { font-family: var(--font-body); fill: var(--ink-2); }
.hg-g { fill: currentColor; }
.hg-g--o { fill: none; stroke: currentColor; stroke-width: 1; }
.hg-g--d { fill: var(--paper-2); fill-opacity: var(--hero-bg); stroke: currentColor; stroke-width: 1.25; }
.hg-g--a { fill: color-mix(in srgb, var(--accent) calc(var(--hero-bg) * 100%), currentColor); }
.hg-hit { fill: transparent; stroke: none; pointer-events: none; }
.hg-e { fill: none; stroke: currentColor; stroke-width: 1; stroke-linejoin: miter; }
.hg-e--d { stroke-opacity: 0.42; }
.hg-e--c { stroke-opacity: 0.55; }
.hg-e--acc { stroke: var(--accent); stroke-width: 1.75; }
.hg-head { fill: var(--ink-3); letter-spacing: 0.08em; text-transform: uppercase; }
.hg-note { fill: var(--ink-3); }
.hg-band { fill: var(--paper-2); }
.hg-rule { stroke: var(--rule-2); stroke-width: 1; fill: none; }
.hg-rule--ink { stroke: var(--ink-2); }
.hg-tick { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.hg-val { fill: var(--ink); }
.hg-strong { font-weight: 500; }
.hg-cap { fill: var(--ink-3); }
.hg-acc { fill: var(--accent-deep); font-weight: 500; }
.hg-seg { stroke: var(--ink); stroke-width: 1; }
.hg-seg--0 { fill: var(--ink); }
.hg-seg--1 { fill: var(--ink-3); }
.hg-seg--2 { fill: var(--paper-2); }
.hg-seg--3 { fill: var(--ink-2); }
.hg-seg--4 { fill: var(--rule-2); }
.hg-seg--5 { fill: var(--ink-3); }
.hg-debris text { fill: currentColor; }
.hg-debris path { stroke: currentColor; fill: none; }

/* resolved state: nodes are hover/focus/tap targets */
.hg-area { fill: transparent; pointer-events: none; }
.hero.is-live .hg-hit,
.hero.is-live .hg-area { pointer-events: all; cursor: default; }
.hg-leader { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 3; fill: none; }

/* magnifier cursor over the graph and receipt, pointer devices only.
   Data-URI SVG can't read tokens: fill is --paper (#eef1f5) at 70%, stroke is --ink (#0a0d12). */
@media (hover: hover) and (pointer: fine) {
  .hero.is-live .hg-hit,
  .hero.is-live .hg-area {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23eef1f5' fill-opacity='.7' stroke='%230a0d12' stroke-width='1.5'/%3E%3Cpath d='M17.9 17.9L25 25' stroke='%230a0d12' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, zoom-in;
  }
}

/* "under the lens": label scales from its anchor, edges go ink, a ring draws round the marker */
.hg-lbl { transform-box: fill-box; transform-origin: left center; transition: transform 0.12s ease-out; }
.hg-n.is-lens .hg-lbl { transform: scale(1.06); }
.hg-ring { fill: none; stroke: var(--ink); stroke-width: 1; stroke-dasharray: 100 100; stroke-dashoffset: 100; pointer-events: none; transition: stroke-dashoffset 0.2s ease-out; }
.is-lens .hg-ring { stroke-dashoffset: 0; }
.hg-ring.is-pulse { animation: hg-pulse 0.42s ease-out; }
@keyframes hg-pulse {
  0% { stroke-dashoffset: 100; opacity: 1; }
  65% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.hg-e { transition: stroke-width 0.12s ease-out, stroke-opacity 0.12s ease-out; }
.hg-e.is-lens { stroke: var(--ink); stroke-opacity: 1; stroke-width: 1.5; }

/* hint: fades in ~400ms after resolve, gone for the session once a card has opened */
.hg-hint { fill: var(--ink-3); opacity: 0; transition: opacity 0.3s ease-out; pointer-events: none; }
.hg-hint circle, .hg-hint path { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.hero.is-live .hg-hint { opacity: 1; transition-delay: 0.4s; }
.hero.hint-done .hg-hint { opacity: 0; transition-delay: 0s; }
.hg-n { outline: none; }
.hg-n:focus-visible .hg-hit { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; }

.hero__card {
  position: fixed;
  z-index: 20;
  width: min(340px, calc(100vw - 32px));
  padding: 12px 14px 12px;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  color: var(--ink);
  font: 12px/1.4 var(--font-mono);
  pointer-events: none;
  overflow: hidden;
}
.hero__card[hidden] { display: none; }
.hero__card .hc-k { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.hero__card .hc-t { margin-top: 2px; font-weight: 500; }
.hero__card .hc-p { margin: 8px 0 0; font: 13px/1.4 var(--font-body); color: var(--ink-2); }
.hero__card .hc-r { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); }
.hero__card dt { color: var(--ink-3); white-space: pre; }
.hero__card dd { text-align: left; }
.hero__card dd { margin: 0; }

/* ---- headline: two lines in one grid cell; line A dissolves as line B arrives */
.hero__copy {
  position: relative;
  z-index: 3;
  display: grid;
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(var(--nav-h) + clamp(20px, 5.5vh, 64px)) var(--gutter) 0;
  pointer-events: none;
}

.hero__title,
.hero__answer {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  /* line 1 stays on one line from 1280px up; wraps to two on phones */
  font-size: clamp(2rem, 0.9rem + 3.3vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.hero__title {
  --a: clamp(0, (var(--hero-progress) - 0.2) / 0.13, 1);
  color: var(--ink-on-night);
  opacity: calc(1 - var(--a));
  filter: blur(calc(var(--a) * 10px));
  transform: translateY(calc(var(--a) * -0.12em));
}

.hero__answer {
  --b: clamp(0, (var(--hero-progress) - 0.32) / 0.13, 1);
  color: color-mix(in srgb, var(--ink) calc(var(--hero-bg) * 100%), var(--ink-on-night));
  opacity: var(--b);
  filter: blur(calc((1 - var(--b)) * 8px));
  transform: translateY(calc((1 - var(--b)) * 0.15em));
}

.hero__answer em { font-style: normal; }

/* ---- reduced motion: short static hero, both lines, clear graph, paper */
@media (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__sticky {
    position: relative;
    height: auto;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
  }
  .hero__paper,
  .hero__fog,
  .hero__brand { display: none; }
  .hero__copy { display: block; order: -1; width: 100%; }
  .hero__title,
  .hero__answer {
    opacity: 1;
    filter: none;
    transform: none;
    color: var(--ink);
  }
  .hero__answer { margin-top: 0.08em; }
  .hero__graph {
    position: relative;
    height: clamp(560px, 72vh, 700px);
    color: var(--ink);
  }
}

/* ---- no JS: same static treatment, no graph (it is built by script) */
@media (scripting: none) {
  .hero { height: auto; }
  .hero__sticky {
    position: relative;
    height: auto;
    padding-bottom: 12vh;
    background: var(--paper);
    color: var(--ink);
  }
  .hero__paper,
  .hero__fog,
  .hero__brand,
  .hero__graph { display: none; }
  .hero__copy { display: block; }
  .hero__title,
  .hero__answer { opacity: 1; filter: none; transform: none; color: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  .hg-lbl, .hg-ring, .hg-e { transition: none; }
  .hg-n.is-lens .hg-lbl { transform: none; }
  .hg-ring { display: none; }
}

/* phone: the resolved figure must fit 100svh under the nav, so the headline sits tighter */
@media (max-width: 640px) {
  .hero__copy { padding-top: calc(var(--nav-h) + 14px); }
  .hero__mark { width: 54vw; }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .hero__graph { height: 860px; }
}