/* Home live layer (index.html only): animated hero, cursor light, wire rail, header mark handoff.
   Pinning rules sit under .hl, which a head script adds and home-live.js removes if anything fails. */
:root {
  --hl-glow-lt-0: color-mix(in srgb, var(--blue) 12%, var(--white));
  --hl-glow-dk-0: color-mix(in srgb, var(--blue) 30%, transparent);
  --hl-glow-bl-0: color-mix(in srgb, var(--white) 22%, transparent);
  --hl-rail-line: color-mix(in srgb, var(--muted) 35%, transparent);
  --hl-rail-ring: color-mix(in srgb, var(--ink) 35%, transparent);
  --hl-mark-x: 18.444%; /* NQ mark right edge in the lockup (gap middle, measured) */
  --hdr: 77px; /* set from the real header by home-live.js */
}
#field, .mark-ov { display: none; }

/* hero */
.hl #hero { height: 400vh; padding: 0; overflow: visible; }
.hl #hero::before { display: none; }
.hl .stage { position: sticky; top: calc(var(--hdr) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--hdr)); height: calc(100svh - var(--hdr)); min-height: 560px; overflow: hidden; display: flex; align-items: center; touch-action: pan-y; }
.hl #field { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.hl .heroCopy { position: relative; z-index: 2; pointer-events: none; width: 100%; }
.hl .heroCopy a { pointer-events: auto; }
.hl .heroCopy .in { max-width: min(640px, 50vw); }
.hl #hero h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1.05; max-width: none; }
@media (max-width: 899px) {
  .hl #hero { height: 300vh; }
  .hl .stage { align-items: flex-end; }
  .hl .heroCopy { padding-bottom: 20px; }
  .hl .heroCopy .in { max-width: none; }
  .hl #hero h1 { font-size: clamp(29px, 7.6vw, 40px); margin-bottom: 14px; }
  .hl #hero .eyebrow { margin-bottom: 12px; }
  .hl #hero p.lede { font-size: 16px; margin-bottom: 18px; }
  .hl #hero .hero-actions { flex-direction: row; margin-bottom: 18px; gap: 10px; }
  .hl #hero .hero-actions .btn { width: auto; flex: 1 1 auto; min-height: 44px; padding-inline: 16px; }
  .hl #hero .hero-proof { gap: 8px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hl #hero { height: auto; }
  .hl .stage { position: relative; height: auto; min-height: calc(100svh - var(--hdr)); padding-block: 48px; }
}

/* cursor light, below the header (50) and cookie banner (60) */
.glow { position: fixed; left: 0; top: 0; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: 40; opacity: 0; will-change: transform; transition: opacity 0.3s; mix-blend-mode: multiply; background: radial-gradient(circle, var(--hl-glow-lt-0), var(--white) 68%); }
.glow.on { opacity: var(--gi, 1); }
.glow.dk { mix-blend-mode: normal; background: radial-gradient(circle, var(--hl-glow-dk-0), transparent 68%); }
.glow.lt { mix-blend-mode: normal; background: radial-gradient(circle, var(--hl-glow-bl-0), transparent 68%); }

/* wire rail */
.rail { position: fixed; left: 22px; top: 50%; transform: translateY(-50%); height: min(56vh, 420px); width: 14px; z-index: 40; display: none; }
@media (min-width: 1260px) { .rail { display: block; } }
.rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--hl-rail-line); }
.rail .fill { position: absolute; left: 6px; top: 0; width: 2px; height: 0; background: var(--blue); }
.rail a { position: absolute; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 2px solid var(--muted); box-shadow: 0 0 0 1px var(--hl-rail-ring); transform: translateY(-50%); transition: background 0.2s, border-color 0.2s, transform 0.2s; }
.rail a:hover { border-color: var(--blue); }
.rail a.on { background: var(--blue); border-color: var(--white); transform: translateY(-50%) scale(1.15); }
.rail a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--hl-rail-ring); }
.rail a span { position: absolute; left: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--white); border: 1px solid var(--line-light); padding: 2px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.rail a:hover span, .rail a:focus-visible span { opacity: 1; }

/* header mark handoff: a header-coloured box over the mark, with the mark redrawn in blue on it; the wordmark is not touched */
.hl header .logo { position: relative; }
.hl header .brand-icon { transition: color 0.2s; }
.hl .mark-ov { position: absolute; left: 0; top: -2px; width: 100%; height: calc(100% + 4px); color: var(--accent); background: var(--bg); visibility: hidden; clip-path: inset(0 calc(100% - var(--hl-mark-x)) 0 0); }
@media (min-width: 640px) { .hl .mark-ov { display: block; } }
.hl.mark-lit .mark-ov { visibility: visible; }
.hl.mark-lit header .brand-icon { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .glow { display: none; }
  .rail .fill, .rail a, .rail a span, .hl .brand-icon { transition: none; }
}