/* =====================================================================
   THE HERO (js/hero.js): the scene starts on the first screen. The hero's
   picture is the scene's first moment, a supplier page next to an empty
   table. The scroll drives it from the first pixel and the hero stays
   pinned until the table is built. Layout: css/style.css, scene:
   css/scene.css.
   ===================================================================== */

/* A caret blinks in the empty field until it is focused or filled */
.check__caret { display: none; }
html.motion .check__row { position: relative; }
html.motion #checkForm .check__caret { display: block; position: absolute; left: 15px; top: 19px; width: 2px; height: 18px; border-radius: 1px; background: var(--lime); pointer-events: none; animation: h-caret 1.1s steps(1, end) infinite; }
html.motion #checkForm .check__row:focus-within .check__caret,
html.motion #checkForm .check__input:not(:placeholder-shown) + .check__caret { display: none; }
@keyframes h-caret { 50% { opacity: 0; } }

/* Pinned: the hero is taller than the screen by the scene's run (js/hero.js sets the grid height).
   The hero clips with clip-path, not overflow, so sticky children keep working. */
.hero.is-pinned { overflow: visible; clip-path: inset(0); }
.hero.is-pinned .hero__grid { grid-template-rows: auto 1fr; }
.hero.is-pinned .hscene { position: sticky; top: calc(var(--top-h) + 10px); align-self: start; }
/* The WebGL grid stays with the screen instead of stretching over the whole run */
.hero.is-pinned .hero__gl { position: fixed; }
@media (min-width: 1000px) {
  .hero.is-pinned .hero__grid { grid-template-rows: 1fr; }
  .hero.is-pinned .hero__side,
  .hero.is-pinned .hscene { position: sticky; top: calc(var(--top-h) + var(--pin-top, 40px)); align-self: start; }
}