/* The homepage hero, from the hero test of September 11, 2026 (hero D3), approved by Liam
   October 4, 2026. A rendered plate of a particle terrain, eight glass platform tiles cut
   from the same render, a looping film of the terrain, and the headline.

   The mode is decided in the document head before first paint (see the inline script
   there) and set on <html>, because React re-renders the hero's own nodes and would wipe
   a class put on them:
     .hero-live   a mouse or trackpad, motion allowed, a landscape window over 760px.
                  Pinned for 700px of scroll: the tiles drift with the pointer, then gather
                  into a ring while the headline gives way to the copy and the buttons.
     .hero-still  everything else. One frame, no per-frame script, the copy and the
                  buttons on the first screen.
     .hero-wide   a landscape window over 760px. Tiles sit where the render put them,
                  placed by assets/hero.js. Without it (phones, portrait tablets) the
                  tiles take the fixed spots below, clear of the words. */

.hero-stage{position:relative;z-index:0}
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--bg-a);color:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-plate,.hero-terrain{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero-terrain{display:none}
.hero-tiles{position:absolute;inset:0;pointer-events:none}
.hero-tile{position:absolute;left:0;top:0;transform-origin:0 0}
.hero-tile img{display:block;width:100%;height:auto}
.hero-shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 46%,var(--bg-a-0) 0%,rgba(18,17,16,.28) 62%,rgba(18,17,16,.7) 100%)}

.hero-copy{position:absolute;left:0;right:0;top:23%;z-index:2;padding:0 var(--gutter);text-align:center}
.hero-head{margin:0;font:400 var(--t-1)/.86 var(--font-display);letter-spacing:-.012em;color:var(--ink)}
/* the bottom padding clears the g's descender (it reaches .22em under the baseline);
   the negative margin gives the extra back, so the two lines keep their spacing */
.hero-head .ln{display:block;overflow:hidden;padding:0 .04em .2em;margin-bottom:-.13em}
.hero-head .ln span{display:block}
.hero-scroll{display:none;position:absolute;left:0;right:0;top:61%;z-index:2;text-align:center;font:500 var(--t-label)/1 var(--font-mono);letter-spacing:.32em;text-transform:uppercase;color:var(--quiet)}
.hero-scroll::after{content:"";display:block;width:1px;height:27px;background:var(--quiet);margin:18px auto 0}

/* The second state: the copy and the two buttons. On a still frame they sit under the
   headline from the start; live, they take its place on scroll. */
.hero-arc{position:absolute;left:0;right:0;top:calc(23% + 1.86 * var(--t-1) + 28px);z-index:3;display:flex;flex-direction:column;align-items:center;padding:0 var(--gutter);text-align:center}
.hero-arc h2{display:none;margin:0;max-width:27ch;font:400 var(--t-2)/1.04 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
.hero-arc p{margin:0;max-width:46ch;font:400 var(--t-7)/1.7 var(--font);color:var(--ink-2);text-wrap:pretty}
.hero-cta{margin-top:28px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px}
.hero-book{flex:none;display:inline-flex;height:54px;align-items:center;gap:10px;padding:0 28px;background:var(--ink);color:var(--bg-a);font:500 var(--t-label)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;transition:background .25s var(--ease),gap .3s var(--ease)}
.hero-book:hover{background:var(--ink-hi);gap:16px}
.hero-book span{font:400 16px/1 var(--font)}
.hero-ghost{display:inline-flex;height:54px;align-items:center;gap:8px;padding:0 26px;white-space:nowrap;border:1px solid var(--edge-3);color:var(--ink);font:500 16px/1 var(--font);background:rgba(18,17,16,.4);transition:background .25s var(--ease),border-color .25s var(--ease)}
.hero-ghost:hover{background:var(--bg-d);border-color:var(--edge-4)}

/* Tiles off the wide frame: fixed spots above the headline and below the buttons. */
html:not(.hero-wide) .hero-tile{transform:none}
html:not(.hero-wide) .hero-tile[data-k="openai"]{left:5%;top:10%;width:clamp(60px,18vw,140px)}
html:not(.hero-wide) .hero-tile[data-k="gemini"]{left:auto;right:7%;top:9%;width:clamp(46px,14vw,108px)}
html:not(.hero-wide) .hero-tile[data-k="perplexity"]{left:46%;top:12.5%;width:clamp(34px,9vw,72px)}
html:not(.hero-wide) .hero-tile[data-k="google"]{top:auto;bottom:6%;left:4%;width:clamp(72px,24vw,180px)}
html:not(.hero-wide) .hero-tile[data-k="bing"]{top:auto;bottom:11%;left:auto;right:6%;width:clamp(52px,17vw,128px)}
html:not(.hero-wide) .hero-tile[data-k="claude"]{top:auto;bottom:4%;left:45%;width:clamp(36px,10vw,80px)}
html:not(.hero-wide) .hero-tile[data-k="search"],html:not(.hero-wide) .hero-tile[data-k="nodes"]{display:none}
/* On the wide frame the tiles wait for hero.js to place them. */
html.hero-wide .hero-tiles{visibility:hidden}
html.hero-placed .hero-tiles{visibility:visible}

/* A wide still frame (reduced motion, a landscape tablet): the words sit a little lower. */
html.hero-still.hero-wide .hero-copy{top:27%}
html.hero-still.hero-wide .hero-arc{top:calc(27% + 1.86 * var(--t-1) + 28px)}

/* Live */
html.hero-live .hero-stage{position:sticky;top:0;height:100svh}
html.hero-live .hero-terrain{display:block;opacity:0;transition:opacity 2.5s linear 1.4s}
html.hero-live .hero-tile{will-change:transform}
html.hero-live .hero-tile img{opacity:0;transition:opacity 1s ease}
html.hero-live .hero-scroll{display:block;opacity:0;transition:opacity .8s ease 1.1s}
html.hero-live .hero-copy{top:31.4%}
html.hero-live .hero-head .ln span{transform:translateY(130%);transition:transform 1.1s var(--ease) .2s}
html.hero-live .hero-head .ln + .ln span{transition-delay:.32s}
html.hero-live .hero-arc{top:50%;transform:translateY(-50%);opacity:0;visibility:hidden}
html.hero-live .hero-arc h2{display:block}
html.hero-live .hero-arc p{margin-top:24px}
html.hero-live .hero-arc .hero-cta{margin-top:30px}
html.hero-in .hero-head .ln span{transform:none}
html.hero-in .hero-tile img,html.hero-in .hero-terrain,html.hero-in .hero-scroll{opacity:1}
/* If the script never runs, the headline and tiles still arrive. */
html.hero-live:not(.hero-in) .hero-head .ln span{animation:hero-failsafe 0s 3.2s forwards}
@keyframes hero-failsafe{to{transform:none}}
.hero-run{display:none}
html.hero-live .hero-run{display:block;height:calc(700px + 25svh)}

@media (max-width:760px){
  .hero-book,.hero-ghost{height:50px}
  .hero-ghost{font-size:15px}
}