/* Hero scene. Static by default (headline + poster of the object).
   hero.js adds .is-pinned / .is-live when the 3D scroll sequence can run:
   the section grows tall, the stage sticks, and the canvas replaces the poster.
   Tokens come from site.css. */

.hs{position:relative;background:var(--night);color:var(--night-fg)}

.hs-stage{
  --hs-light:0;
  --hs-fg:var(--night-fg);
  --hs-muted:var(--night-muted);
  --hs-pad:max(var(--gutter),calc((100vw - var(--max)) / 2 + var(--gutter)));
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:clamp(24px,4vw,72px);
  padding:calc(var(--header-h) + 28px) var(--hs-pad) clamp(40px,7vh,72px);
  color:var(--hs-fg);
  background:
    radial-gradient(52% 58% at 73% 52%,#161a27 0%,rgba(22,26,39,0) 72%),
    var(--night);
}

.hs-light{position:absolute;inset:0;background:var(--canvas);opacity:var(--hs-light);pointer-events:none}
.hs-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;pointer-events:none}

/* headline block */
.hs-copy{position:relative;z-index:2;max-width:640px}
.hs h1{
  font-size:clamp(2.6rem,6.1vw,6rem);
  font-weight:560;
  letter-spacing:-.05em;
  line-height:.98;
  text-wrap:balance;
  max-width:11ch;
}
.hs-lead{margin-top:clamp(20px,2.6vw,34px);max-width:44ch;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.55;color:var(--hs-muted)}
.hs-lead a{color:var(--hs-fg)}
.hs-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,40px)}
.hs-note{margin-top:22px;font-size:14px;color:var(--hs-muted);max-width:44ch}

/* the object: a poster of the 3D model until (or instead of) the live scene */
.hs-object{position:relative;z-index:1;align-self:stretch;min-width:0;min-height:320px}
.hs-poster{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:640px;max-height:640px;object-fit:contain;transition:opacity .5s var(--ease)}

/* end of the sequence: caption + four slots the blocks land in */
.hs-end{display:none}

/* ---------- pinned sequence ---------- */
.hs.is-pinned{height:340svh}
/* hero.js only pins when the static stage already fits one screen, so fixing the
   height here moves nothing. */
.is-pinned .hs-stage{position:sticky;top:0;height:100svh;overflow:hidden}
.is-pinned .hs-canvas{display:block;opacity:0;transition:opacity .5s var(--ease)}
.is-live .hs-canvas{opacity:1}
.is-live .hs-poster{opacity:0}
.is-pinned .hs-copy{will-change:opacity,transform}

.is-pinned .hs-end{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:clamp(40px,8vh,96px);
  padding:calc(var(--header-h) + 24px) var(--hs-pad) clamp(40px,7vh,72px);
}
.hs-caption{
  font-size:clamp(1.7rem,3.5vw,3.3rem);
  font-weight:560;
  letter-spacing:-.045em;
  line-height:1.04;
  text-align:center;
  text-wrap:balance;
  max-width:17ch;
  opacity:0;
}
.hs-labels{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,56px);width:min(100%,1080px)}
.hs-labels li{display:grid;justify-items:center;align-content:start;gap:clamp(18px,3.2vh,34px);text-align:center}
.hs-slot{position:relative;width:clamp(72px,9.4vw,144px);aspect-ratio:1}
/* soft ground shadow so the tiles sit on the light canvas */
.hs-slot::after{content:"";position:absolute;inset:95% 4% -17%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,21,26,.2),rgba(20,21,26,0));opacity:var(--hs-light)}
.hs-label{display:block;max-width:15ch;font-size:clamp(.95rem,1.25vw,1.2rem);font-weight:500;letter-spacing:-.015em;line-height:1.3;opacity:0}
/* padding gives a full-size tap target; the negative margin keeps the layout as it was */
.hs-label a{display:block;padding-block:11px;margin-block:-11px;color:inherit;text-decoration:none}
.hs-label a:hover{color:var(--accent)}

/* the stage ends light and empty below the labels, so the next section starts closer */
.hs.is-pinned + section{padding-top:clamp(40px,5vw,88px)}

/* ---------- tablet and phone ---------- */
@media (max-width:900px){
  .hs-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:start;gap:clamp(16px,3vh,32px);background:radial-gradient(70% 36% at 50% 76%,#161a27 0%,rgba(22,26,39,0) 74%),var(--night)}
  .hs h1{max-width:12ch}
  .hs-note{display:none}
  .hs-object{min-height:120px}
  .hs-poster{max-width:460px;max-height:460px}
  .hs.is-pinned{height:270svh}
}
@media (max-width:720px){
  .hs-stage{padding-top:calc(var(--header-h) + 14px);padding-bottom:28px}
  .hs h1{font-size:clamp(2.35rem,11.2vw,3.4rem)}
  .hs-lead{margin-top:16px}
  .hs-ctas{gap:10px;margin-top:22px}
  .hs-ctas .btn{flex:1 1 auto;padding-inline:16px;white-space:nowrap}
  .is-pinned .hs-end{justify-items:start;gap:clamp(24px,5vh,44px)}
  .hs-caption{text-align:left;font-size:clamp(1.7rem,7.6vw,2.4rem);max-width:13ch}
  .hs-labels{grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.8vh,26px);width:100%}
  .hs-labels li{grid-template-columns:auto minmax(0,1fr);align-items:center;justify-items:start;gap:20px;text-align:left}
  .hs-slot{width:clamp(48px,8.6vh,72px)}
  .hs-label{max-width:none;font-size:1.05rem}
}
/* short, wide screens: keep the headline, the buttons and the object all in view
   (phones keep their width-based headline size) */
@media (max-height:640px) and (min-width:721px){
  .hs h1{font-size:clamp(2.1rem,9vh,4rem)}
  .hs-lead{margin-top:14px;font-size:.98rem}
  .hs-ctas{margin-top:18px}
  .hs-note{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hs-poster,.hs-canvas{transition:none}
}