/* ==========================================================================
   Hero — headline, layered Gojo stage, orbit ring, annotations
   ========================================================================== */

.hero{position:relative;z-index:1;min-height:100vh;min-height:100svh;padding:calc(var(--nav-h) + clamp(28px,5vh,56px)) 0 clamp(24px,4vh,40px);display:flex;flex-direction:column}
.hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,64px);align-items:center}

/* ---------- copy ---------- */
.hero-copy{position:relative;z-index:4}
.hero-eyebrow{display:flex;align-items:center;gap:12px}
.hero-eyebrow::before{content:"";width:36px;height:1px;background:var(--blue)}
.hero-title{margin-top:clamp(18px,3vh,30px);font-size:clamp(56px,7.6vw,124px);line-height:.9;letter-spacing:-.075em;font-weight:800}
.hero-title .ln{padding-bottom:.12em;margin-bottom:-.12em}
.hero-title em{display:inline-block;color:var(--blue-soft);font-size:1.08em;letter-spacing:-.025em;line-height:.8;padding-right:.04em}
.hero-desc{max-width:420px;margin-top:clamp(24px,4vh,36px);color:var(--ink-2);font-size:15px;line-height:1.78}
.hero-actions{margin-top:clamp(28px,5vh,40px);display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.hero-tag{margin-top:clamp(26px,4vh,36px);display:inline-flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(143,176,255,.24);background:rgba(16,26,52,.36);color:#b8caff;font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}

/* ---------- stage ---------- */
.hero-stage{position:relative;container-type:inline-size;height:clamp(460px,calc(100vh - 300px),680px);perspective:1400px;isolation:isolate;overflow:hidden;overflow:clip}
.corner{position:absolute;z-index:6;width:22px;height:22px;border-color:rgba(143,176,255,.5);border-style:solid;border-width:0;pointer-events:none}
.c-tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.c-tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.c-bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.c-br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* orbit ring (tilts with pointer, spins on its own) */
.stage-ring-tilt{position:absolute;inset:4% 2%;z-index:1;transform-style:preserve-3d;will-change:transform}
.stage-ring{width:100%;height:100%;overflow:visible}
.ring-track{fill:none;stroke:rgba(143,176,255,.26);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.2s var(--expo)}
.ring-track--dash{stroke:rgba(143,176,255,.2);stroke-dasharray:.012 .02}
.ring-track--thin{stroke:rgba(196,228,255,.14);stroke-width:.8}
.is-ready .ring-track{stroke-dashoffset:0}
.is-ready .ring-track--dash{stroke-dashoffset:0}
.ring-spin{transform-origin:300px 300px;animation:spin 46s linear infinite}
.ring-text{font:500 15px var(--mono);letter-spacing:.34em;text-transform:uppercase;fill:#7f93c6}
@keyframes spin{to{transform:rotate(360deg)}}

/* giant outline word behind the figure */
.stage-word{position:absolute;left:50%;top:44%;z-index:2;margin:0;font:800 15.5cqi/.8 var(--sans);letter-spacing:-.07em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(143,176,255,.3);pointer-events:none;user-select:none;will-change:transform;transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity 1.6s var(--ease) .5s}
.is-ready .stage-word{opacity:1}

/* figure + energy share the same box, so pointer parallax can offset them independently */
.stage-figure,.stage-energy{position:absolute;left:50%;top:50%;height:min(100%,109.4cqw);width:auto;aspect-ratio:1199/1312;will-change:transform}
.stage-figure{z-index:3}
.stage-figure img{width:100%;height:100%;object-fit:contain;animation:floaty 7.5s ease-in-out infinite}
.js .stage-figure img{clip-path:inset(100% 0 0 0);transition:clip-path 1.9s var(--expo) .35s}
.js.is-ready .stage-figure img{clip-path:inset(0 0 0 0)}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}

.stage-energy{z-index:4;height:min(130%,142.2cqw);mix-blend-mode:screen;opacity:0;filter:blur(14px) brightness(1.3) saturate(1.2);animation:energyPulse 5.2s ease-in-out infinite;transition:opacity 1.8s var(--ease) .9s}
.is-ready .stage-energy{opacity:.9}
/* the layer box is 30% larger than the figure so its glow is never clipped at the edge */
.stage-energy img{position:absolute;left:50%;top:50%;width:76.9%;height:76.9%;transform:translate(-50%,-50%);object-fit:contain}
@keyframes energyPulse{0%,100%{filter:blur(14px) brightness(1.2) saturate(1.2)}50%{filter:blur(18px) brightness(1.55) saturate(1.3)}}

.stage-floor{position:absolute;left:10%;right:10%;bottom:6%;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(143,176,255,.55),transparent);opacity:0;transition:opacity 1.6s var(--ease) 1.1s}
.is-ready .stage-floor{opacity:1}

/* annotations */
.annot{position:absolute;inset:0;z-index:5;pointer-events:none;transition:transform .6s var(--expo)}
.annot-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.annot-lines polyline{fill:none;stroke:rgba(196,228,255,.55);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--expo) 1.2s}
.is-ready .annot-lines polyline{stroke-dashoffset:0}
.annot-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#e4eeff;box-shadow:0 0 0 5px rgba(143,176,255,.16),0 0 16px #8fb0ff;opacity:0;transition:opacity .6s var(--ease) 1.5s}
.is-ready .annot-dot{opacity:1}
.annot-label{position:absolute;left:var(--lx);top:var(--ly);transform:translate3d(var(--tx,0),-50%,0);text-align:var(--ta,left);padding:0 6px;font:600 13px/1.3 var(--sans);letter-spacing:-.01em;color:#e6eeff;white-space:nowrap;opacity:0;transition:opacity .8s var(--ease) 1.6s}
.is-ready .annot-label{opacity:1}
.annot-label small{display:block;margin-bottom:4px;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-soft)}

/* HUD readouts */
.hud{position:absolute;z-index:6;font:500 10px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7f93c6;white-space:nowrap}
.hud b{font-weight:500;color:#dbe6ff;font-variant-numeric:tabular-nums}
.hud-tl{top:18px;left:26px}
.hud-br{bottom:18px;right:26px}

/* ---------- hero foot ---------- */
.hero-foot{position:relative;z-index:4;margin-top:clamp(28px,5vh,56px);display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px;border-top:1px solid var(--line-soft)}
.scroll-ind{display:inline-flex;align-items:center;gap:18px;text-decoration:none;color:var(--ink-2)}
.scroll-track{position:relative;width:1px;height:48px;background:var(--line);overflow:hidden}
.scroll-thumb{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--blue-soft);transform-origin:top;transform:scaleY(0)}
.scroll-track::after{content:"";position:absolute;left:-2px;top:-10px;width:5px;height:5px;border-radius:50%;background:var(--ink);animation:scrollDrop 2.2s var(--expo) infinite}
@keyframes scrollDrop{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translate3d(0,62px,0);opacity:0}}
.hero-meta{display:flex;gap:30px;flex-wrap:wrap}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 20px)}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-stage{order:-1;height:min(64vh,560px);min-height:430px;margin-inline:-6px}
  .hero-copy{margin-top:44px}
  .hud-br{display:none}
  .hero-title{font-size:clamp(52px,13vw,96px)}
  .annot{display:none}
  .hud-tl{top:6px;left:8px}
  .stage-word{-webkit-text-stroke-width:.8px}
}
@media (max-width:620px){
  .hero-stage{height:min(58vh,480px);min-height:360px}
  .hero-actions{gap:20px}
  .hero-meta span:nth-child(2){display:none}
  .hero-foot{align-items:flex-end}
}
@media (prefers-reduced-motion: reduce){
  .stage-figure img,.stage-energy{animation:none}
  .ring-spin{animation:none}
}