/* v31 hero — the 3D object stage: a calm close-up still life of big satin objects */
/* ══ HERO ══ */
.hero{position:relative;height:330vh;background:var(--bg)}
.hero__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage{position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 118%,#131a4c 0%,rgba(12,13,18,0) 60%),radial-gradient(70% 60% at 62% -12%,#1d1f2e 0%,rgba(12,13,18,0) 70%),var(--stage);clip-path:inset(8.6rem var(--pad) 3.6rem var(--pad) round var(--r-stage,28px));will-change:clip-path;cursor:grab;touch-action:pan-y;transform-origin:50% 50%}
.stage::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 95% at 50% 45%,rgba(6,7,10,0) 58%,rgba(6,7,10,.55) 100%)}
.stage:active{cursor:grabbing}
.stage.no-gl{background:url(../video/hf-objects.jpg) center/cover}
.stage__gl,.stage__gl canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.stage__gl canvas{display:block;outline:0}

/* headline — the page's h1, sits in the stage, objects part around it */
/* intro block: h1 + two quiet next steps; the whole block fades/lifts on scroll (v31-hero.js) */
.stage__intro{position:absolute;z-index:2;left:calc(var(--pad) * 1.6);bottom:calc(58px + 2rem);pointer-events:none;will-change:opacity,transform}
.stage__h{position:relative;margin:0;color:#fff;font-weight:400;font-size:clamp(2.2rem,4.3vw,4.9rem);line-height:.95;letter-spacing:-.05em;pointer-events:none;text-shadow:0 2px 30px rgba(6,7,10,.35)}
.stage__h::before{content:'';position:absolute;inset:-2rem -3rem;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(12,13,18,.5),rgba(12,13,18,0))}
.stage__k{display:block;margin:0 0 1.2rem .1em;color:rgba(255,255,255,.62);letter-spacing:.08em;text-shadow:none}
.stage__t{display:block}
.stage__h.pre .stage__t,.stage__h.pre .stage__k,.stage__h.pre + .stage__go{opacity:0}
.stage__go{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;margin:1.5rem 0 0 .12em;font-size:.78rem;pointer-events:auto}
.stage__go a{position:relative;display:inline-flex;gap:.45em;align-items:center;padding:.35rem 0;color:rgba(255,255,255,.82);transition:color .4s}
.stage__go a::after{content:'';position:absolute;left:0;right:0;bottom:.1rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .6s var(--ease)}
.stage__go a:hover,.stage__go a:focus-visible{color:#fff}
.stage__go a:hover::after,.stage__go a:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* captions around the assembled mark */
.stage__cap{position:absolute;z-index:2;top:50%;display:flex;flex-direction:column;gap:.7rem;color:#fff;opacity:0;visibility:hidden;pointer-events:none;will-change:opacity,transform}
.stage__cap b{font-weight:400;font-size:clamp(1.8rem,3vw,3.2rem);letter-spacing:-.045em;line-height:.95}
.stage__cap .mono{opacity:.55}
.stage__cap--l{left:calc(var(--pad) * 1.6)}.stage__cap--r{right:calc(var(--pad) * 1.6);text-align:right;align-items:flex-end}

.stage__hint{position:absolute;z-index:2;right:calc(var(--pad) * 1.6);bottom:calc(58px + 2.1rem);margin:0;padding:.45rem .8rem;border-radius:999px;background:rgba(12,13,18,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:rgba(255,255,255,.72);display:flex;gap:.6rem;align-items:center;transition:opacity .8s;white-space:nowrap;pointer-events:none}
.stage__hint::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acid2);animation:pulse 1.6s infinite}
.stage__hint.off{opacity:0}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(125,139,255,.7)}80%,100%{box-shadow:0 0 0 9px rgba(125,139,255,0)}}

.hero__bar{position:absolute;left:var(--pad);right:var(--pad);bottom:1.15rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink2)}
.hero__bar b{color:var(--ink);font-weight:500}
.hero__avail{display:inline-flex;align-items:center;gap:.6rem}
.hero__avail::before{content:'';flex:none;width:7px;height:7px;border-radius:50%;background:#4f66ff;animation:avail 2.4s infinite}
@keyframes avail{0%{box-shadow:0 0 0 0 rgba(79,102,255,.55)}70%,100%{box-shadow:0 0 0 8px rgba(79,102,255,0)}}
.hero__scroll{display:inline-flex;align-items:center;gap:.6rem}
.hero__scroll i{width:1px;height:14px;background:currentColor;position:relative;overflow:hidden}
.hero__scroll i::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--acid);animation:drip 1.6s var(--ease) infinite}
@keyframes drip{to{top:100%}}

@media(max-width:1100px) and (min-width:901px){.stage__hint{display:none}}
@media(max-width:900px){
  .stage{clip-path:inset(4.6rem .75rem 3.4rem .75rem round 18px)}
  .hero__bar #clock{display:none}
  .stage__intro{top:calc(74px + 1.5rem);bottom:auto;left:calc(12px + 1.15rem);right:calc(12px + 1.15rem)}
  .stage__h{font-size:clamp(2.1rem,9vw,2.9rem)}
  .stage__go{margin-top:1.1rem;gap:.3rem 1.5rem}
  .stage__k{margin-bottom:.9rem}
  .stage__t br{display:none}
  .stage__cap{--cy:0%}
  .stage__cap--l{top:calc(74px + 1.5rem)}
  .stage__cap--r{top:auto;bottom:calc(54px + 3.6rem)}
  .stage__hint{right:auto;left:50%;transform:translateX(-50%);bottom:calc(54px + 1.1rem)}
}
@media(max-width:520px){.hero__scroll{display:none}.hero__avail{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.stage__hint::before,.hero__scroll i::after,.hero__avail::before{animation:none}}