/* Ordis AI v2: home hero (Routing Field). Contract: build spec section 8.
   The frame shows a still poster (two SVGs drawn from the same simulation as the live field) under an
   HTML layer for the router node and lane labels; field.js adds a WebGL canvas between them when motion
   is on. Lane geometry is in fractions of the frame and must match GEO in /assets/js/hero/sim.js. */
@layer pages{
  .hero{
    --hero-x:max(var(--gutter),calc((100cqi - var(--max)) / 2));
    --hero-pb:clamp(40px,9svh,96px);
    position:relative;z-index:1;display:grid;grid-template-rows:1fr auto;
    --hero-h:clamp(560px,100svh,960px);
    min-block-size:var(--hero-h);
    container:hero / inline-size;isolation:isolate;overflow:hidden;
    background:var(--bg-0);color:var(--ink);
  }

  /* ---------- frame: poster, live canvas, dot grid, nodes ---------- */
  .hero__frame{position:absolute;inset:0;z-index:0;overflow:hidden}
  .hero__poster,.hero__poster img,.hero__canvas,.hero__dots,.hero__nodes{position:absolute;inset:0;inline-size:100%;block-size:100%}
  .hero__poster img{display:block;max-inline-size:none}
  .hero__canvas{display:block;opacity:0;transition:opacity var(--d-md) var(--ease-out)}
  .hero__frame.is-live .hero__canvas{opacity:1}
  .hero__dots{pointer-events:none;opacity:.55;background-image:radial-gradient(var(--line-2) 1px,transparent 1.5px);background-size:24px 24px}

  .hero__nodes{
    --rx:58%;--ry:50%;--top:10%;--span:80%;--span-n:.8;
    pointer-events:none;font-family:var(--font-mono);font-size:10px;font-weight:500;line-height:1;color:var(--ink-3);
  }
  .hero__router{position:absolute;inset-inline-start:var(--rx);inset-block-start:var(--ry);inline-size:16px;block-size:16px;margin:-8px 0 0 -8px;border:1px solid var(--ink-3)}
  .hero__router::after{content:"";position:absolute;inset:3px;background:var(--accent)}
  /* The poster's frozen pulse; the live field draws its own. */
  .hero__frame:not(.is-live) .hero__router::before{content:"";position:absolute;inset:-11px;border:1px solid var(--accent);opacity:.5}
  /* Each lane ends in its provider's logo. Size: 70% of the lane pitch, never past the frame's right edge. */
  .hero__lane{
    --s:min(24px,var(--hero-h) * var(--span-n) / 17 * .7,max(6cqi,24px) - 12px);
    position:absolute;inset-inline-start:min(94%,100% - 24px);
    inset-block-start:calc(var(--top) + var(--span) * var(--i) / 17);
    display:flex;align-items:center;padding-inline-start:8px;transform:translateY(-50%);
  }
  .hero__lane::before,.hero__lane::after{content:"";position:absolute;inset-inline-start:-1.5px;inset-block-start:50%;inline-size:3px;block-size:3px;margin-block-start:-1.5px;background:currentColor}
  .hero__lane::after{display:none}
  .hero__logo{display:block;flex:none;inline-size:var(--s);block-size:var(--s);color:var(--ink);--logo-size:var(--s);
    opacity:.8;transition:opacity var(--d-sm) var(--ease-ui),transform var(--d-sm) var(--ease-ui),filter var(--d-sm) var(--ease-ui)}
  .hero__lane.is-lit{color:var(--accent)}
  .hero__lane.is-lit .hero__logo{opacity:1;transform:scale(1.18);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 70%,transparent))}
  .hero__lane.is-down{color:var(--danger)}
  .hero__lane.is-down .hero__logo{opacity:.25;filter:grayscale(1)}
  .hero__lane.is-down::before,.hero__lane.is-down::after{display:block;inset-inline-start:-5px;inline-size:10px;block-size:1.5px;margin-block-start:-.75px;transform:rotate(45deg)}
  .hero__lane.is-down::after{transform:rotate(-45deg)}

  /* ---------- scrim and copy ---------- */
  .hero__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,var(--bg-0) 0%,color-mix(in srgb,var(--bg-0) 88%,transparent) 34%,transparent 60%)}

  .hero__copy{
    grid-row:1;align-self:end;position:relative;z-index:2;
    display:grid;justify-items:start;gap:clamp(18px,2.4cqi,28px);
    max-inline-size:calc(var(--hero-x) + min(60cqi,760px));
    padding:calc(var(--header-h) + 24px) var(--gutter) var(--hero-pb) var(--hero-x);
  }
  .hero__title{margin:0;font-size:clamp(2.25rem,7.4cqi,7.5rem);font-weight:300;line-height:.92;letter-spacing:-.045em;color:var(--ink)}
  .hero__line{position:relative;display:block;inline-size:max-content;max-inline-size:100%}
  /* site.css .mk is the small inline dash; in the hero it is a bar covering the line, wiped away by the intro. */
  .hero__line .mk{position:absolute;inset:-.03em -.05em;inline-size:auto;block-size:auto;margin:0;background:var(--accent);transform:scaleY(0);transform-origin:top;pointer-events:none}
  .hero__sub{margin:0;max-inline-size:40ch;font-size:clamp(1.0625rem,.99rem + .3vw,1.25rem);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
  .hero__ctas{display:flex;flex-wrap:wrap;gap:12px}

  /* ---------- narrow: field in the top half, copy at the bottom ---------- */
  @container hero (width < 720px){
    .hero__nodes{--rx:56%;--ry:30%;--top:12%;--span:38%;--span-n:.38}
    .hero__scrim{background:linear-gradient(0deg,var(--bg-0) 0%,color-mix(in srgb,var(--bg-0) 88%,transparent) 40%,transparent 56%)}
    .hero__copy{max-inline-size:none;padding-block-end:20px}
  }

  /* ---------- intro: CSS only, motion on and JS present; the h1 never fades, so it paints at once (LCP) ---------- */
  @keyframes hero-wipe{from{transform:scaleY(1)}to{transform:scaleY(0)}}
  @keyframes hero-rise{from{transform:translateY(.22em)}}
  @keyframes hero-fade{from{opacity:0;transform:translateY(12px)}}
  html.js[data-motion="on"] .hero__line{animation:hero-rise var(--d-lg) var(--ease-out) backwards}
  html.js[data-motion="on"] .hero__line .mk{animation:hero-wipe var(--d-lg) var(--ease-inout) backwards}
  html.js[data-motion="on"] :is(.hero__sub,.hero__ctas){animation:hero-fade var(--d-md) var(--ease-out) .3s backwards}
  html.js[data-motion="on"] :is(.hero__line + .hero__line,.hero__line + .hero__line .mk){animation-delay:.08s}
  html.js[data-motion="on"] .hero__ctas{animation-delay:.38s}
  @media (prefers-reduced-motion:no-preference){
    html.js:not([data-motion]) .hero__line{animation:hero-rise var(--d-lg) var(--ease-out) backwards}
    html.js:not([data-motion]) .hero__line .mk{animation:hero-wipe var(--d-lg) var(--ease-inout) backwards}
    html.js:not([data-motion]) :is(.hero__sub,.hero__ctas){animation:hero-fade var(--d-md) var(--ease-out) .3s backwards}
    html.js:not([data-motion]) :is(.hero__line + .hero__line,.hero__line + .hero__line .mk){animation-delay:.08s}
    html.js:not([data-motion]) .hero__ctas{animation-delay:.38s}
  }

  @media (forced-colors:active){
    .hero__line .mk,.hero__frame:not(.is-live) .hero__router::before{display:none}
  }
}