/* ============================================================================
   css/hero.css — the HERO agent's file (semantic tokens only, no hex)
   ----------------------------------------------------------------------------
   1  VexRing (.vx-ring) — the dense ring module drawn by js/hero.js; reusable
      anywhere: <div data-vex-ring="hero|small"></div>
   2  The hero stage — copy left, the ring right. Just the ring (round 2: no
      card beat). html:not(.js) = the still inside the ring box.
   3  Ask VEX (.hero-ask) — the example-question input under the CTAs
   4  The stack marquee under the hero
   ============================================================================ */


/* ============================================================================
   1  VEXRING
   ============================================================================ */

.vx-ring, [data-vex-ring] {                 /* [data-vex-ring] = the box before/without JS (the <noscript> still) */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  contain: layout paint;
  overflow: hidden;
  --ring-dot: var(--ink);                   /* ivory on the stage, ink on a light surface — the prototype's per-theme dot */
  /* the canvas ground is --ring-bg, else --bg of the context: on a band set --ring-bg: var(--bg-band) */
}
.vx-ring canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
[data-vex-ring] > noscript img, [data-vex-ring] > img, .vx-ring > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* the mark, centred in the hole; --mark-w is set by the JS (size % × the hole diameter) */
.vx-ring__mark {
  position: absolute; inset: 0; margin: auto;
  width: var(--mark-w, 37%); height: var(--mark-w, 37%);
  pointer-events: none;
}
.vx-ring__mark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vx-ring__mark.settle { animation: vx-settle 3.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vx-settle { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vx-ring__mark.settle { animation: none; } }


/* ============================================================================
   2  THE HERO STAGE — copy left, ring right; stacked (ring first) under 960
   ============================================================================ */

.hero {
  min-height: 92vh;
  display: flex; align-items: center;
  padding-block: calc(var(--nav-h) + 16px + clamp(40px, 6vw, 80px)) clamp(48px, 7vw, 88px);
  overflow: hidden;
}
.hero > .wrap { width: 100%; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(42vw, 560px);
  grid-template-areas: "copy stage";
  column-gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

/* — the copy — */
.hero__copy { grid-area: copy; max-width: 640px; --ask-focus: var(--focus); }   /* --ask-focus: the stage's focus colour, captured before .hero-ask flips to light tokens */
.hero__copy .eyebrow { margin-bottom: var(--spacing-24); }
.hero__title { font-size: clamp(40px, 4.45vw, 64px); text-wrap: wrap; }   /* two-column hero: 64, not the full-bleed 84; greedy wrap keeps the sentence on two lines */
.hero__sub {
  margin-top: var(--spacing-32);
  font-size: 18px; line-height: 1.55; letter-spacing: -0.1px;
  color: var(--ink-2);
  max-width: 54ch;
  text-wrap: pretty;
}
.hero__cta { margin-top: var(--spacing-40); }
.hero__cta .arrow { display: inline-block; }
/* the ghost CTA points down the page, so its arrow nudges down on hover, not right */
.hero__cta .btn:hover .arrow--down { transform: translateY(2px); }
.hero__trust { margin-top: var(--spacing-24); width: max-content; max-width: calc(100% + 56px); }   /* one line may spill into the column gap, never into the stage */
.hero__trust span { white-space: nowrap; }                                  /* wraps only at the separators (the spaces between the spans) */
.hero__trust span:not(:last-child)::after { content: "·"; margin-left: 0.6em; margin-right: 0.35em; }

/* — the stage: the ring fills the column — */
.hero__stage { grid-area: stage; width: 100%; }
.hero__ring { position: relative; width: 100%; aspect-ratio: 1 / 1; }

/* — stacked (mobile / small tablet): ring first, then the copy — */
@media (max-width: 1199px) and (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) min(40vw, 480px); }   /* a slimmer ring here keeps the ask placeholder and the trust line on one line */
  .hero__title { font-size: clamp(40px, 4.6vw, 56px); }
}
@media (max-width: 959px) {
  .hero { min-height: 0; padding-top: calc(var(--nav-h) + 16px + 28px); padding-bottom: clamp(40px, 8vw, 64px); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "copy"; row-gap: 0; }
  .hero__stage { width: min(80vw, 400px); justify-self: center; }
  .hero__copy { margin-top: var(--spacing-24); max-width: none; }
  .hero__title { font-size: clamp(38px, 9.4vw, 60px); text-wrap: balance; }   /* stacked: balance avoids a lone "knows." line at 768–900 */
  .hero__sub { font-size: 17px; margin-top: var(--spacing-24); }
  .hero__cta { margin-top: var(--spacing-32); }
  .hero__trust { margin-top: var(--spacing-24); max-width: 100%; }
}
@media (max-width: 600px) {
  .hero__stage { width: 82vw; }
}


/* ============================================================================
   3  ASK VEX — a white pill input on the stage (light tokens via data-theme),
      ink text, stone placeholder (5.0:1), a round ink arrow button; ≤ 560 px
   ============================================================================ */

.hero-ask {
  margin-top: var(--spacing-24);
  width: 100%; max-width: 560px;
  display: flex; align-items: center; gap: var(--spacing-8);
  padding: 6px 6px 6px 22px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hair-2);
  border-radius: var(--radius-pill);
  transition: border-color var(--ui-duration) var(--ui-ease);
}
.hero-ask:hover { border-color: var(--muted); }
.hero-ask:focus-within { outline: 2px solid var(--ask-focus); outline-offset: 3px; border-radius: var(--radius-pill); }
.hero-ask__input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 16px; line-height: 1.4;
  color: var(--ink); background: transparent;
  border: 0; padding: 8px 0;
  text-overflow: ellipsis;
}
.hero-ask__input::placeholder { color: var(--muted); opacity: 1; }
.hero-ask__input:focus { outline: none; }                        /* the ring sits on the pill (focus-within), not on the bare input */
.hero-ask__go {
  flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--ink-inverse);
  transition: background-color var(--ui-duration) var(--ui-ease), transform var(--ui-duration) var(--ui-ease);
}
.hero-ask__go svg { width: 18px; height: 18px; }
.hero-ask__go:hover { background: var(--link-hover); }
.hero-ask__go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 50%; }
.hero-ask:hover .hero-ask__go svg, .hero-ask__go:focus-visible svg { transform: translateX(2px); }
.hero-ask__go svg { transition: transform var(--ui-duration) var(--ui-ease); }
@media (max-width: 600px) {
  .hero-ask { padding-left: 18px; }
  .hero-ask__input { font-size: 16px; }                          /* 16 keeps iOS from zooming the field */
}
@media (prefers-reduced-motion: reduce) {
  .hero-ask:hover .hero-ask__go svg, .hero-ask__go:focus-visible svg { transform: none; }
}


/* ============================================================================
   4  STACK MARQUEE — hairline band under the hero: mono label centred, then
      the names in Geist 15 --muted with a mono "·" between, scrolling left
      (~40 s a loop, seamless: the list is duplicated once). Pauses on hover.
      Reduced motion: a static, centred, wrapped list.
   ============================================================================ */

.stack-marquee {
  background: var(--bg);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding-block: var(--spacing-24) var(--spacing-24);
  overflow: hidden;
}
.stack-marquee__label { display: block; text-align: center; margin: 0 0 var(--spacing-16); }
.stack-marquee__viewport {
  display: flex; width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 10%, var(--ink) 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ink) 10%, var(--ink) 90%, transparent);   /* the edge fade — a mask reads alpha only, so any opaque token does */
}
.stack-marquee__track {
  flex: none;
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: baseline;
  width: max-content;
  font-size: 15px; line-height: 1.5; color: var(--muted);
  animation: stack-scroll 40s linear infinite;
}
.stack-marquee__track li { max-width: none; white-space: nowrap; }
.stack-marquee__track li::after { content: "·"; font-family: var(--font-mono); margin: 0 18px; }   /* every item carries its own separator, so the seam between the two copies is uniform */
.stack-marquee__viewport:hover .stack-marquee__track { animation-play-state: paused; }
@keyframes stack-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .stack-marquee__viewport { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gutter); }
  .stack-marquee__track { animation: none; width: auto; flex: 1 1 auto; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .stack-marquee__track[aria-hidden="true"] { display: none; }
  .stack-marquee__track li:last-child::after { content: none; }
}
@media (max-width: 600px) {
  .stack-marquee { padding-block: var(--spacing-20); }
  .stack-marquee__track li::after { margin: 0 14px; }
}