/* Hero: title, call to action, live stats and the descent log. Entrance is staggered with --d; scroll fade is driven by --hp (0 at top, 1 gone) set in js/hero.js. */
.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,320px);align-items:end;gap:40px;padding-block:120px 72px;
  padding-left:max(clamp(0px,6vw,96px),calc(var(--rail-clear,0px) - 16px))}   /* --rail-clear: js/gauge.js, keeps clear of the depth rail */
.hero-main,.hero-side{will-change:transform,opacity}
.hero-main{transform:translate3d(0,calc(var(--hp,0)*-48px),0);opacity:calc(1 - var(--hp,0)*1.3)}
.hero-side{display:flex;flex-direction:column;align-items:flex-end;gap:40px;transform:translate3d(0,calc(var(--hp,0)*-90px),0);opacity:calc(1 - var(--hp,0)*1.6)}

.hero .eyebrow{display:flex;align-items:center;gap:12px}
.pulse{position:relative;display:block;width:7px;height:7px;border-radius:50%;background:var(--spore);box-shadow:0 0 10px var(--spore)}
.pulse::after{content:"";position:absolute;inset:-5px;border:1px solid var(--spore);border-radius:50%;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

.hero h1{margin:0;font-family:var(--display);font-weight:200;text-transform:uppercase;
  font-size:clamp(44px,min(10.2vw,calc((100vw - var(--rail-clear,0px) - 400px) / 7)),164px);line-height:.92;letter-spacing:-.012em;
  background:linear-gradient(100deg,var(--bone) 0%,var(--bone) 38%,#fff 48%,var(--lumen) 54%,var(--bone) 64%,var(--bone) 100%);background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 38px rgba(158,240,255,.16));animation:sweep 5.5s cubic-bezier(.4,0,.2,1) 1.1s 1 forwards}
.hero h1 small{display:block;font-family:var(--mono);font-size:clamp(11px,1.3vw,15px);letter-spacing:.62em;text-transform:uppercase;margin-top:22px;font-weight:300;
  color:var(--bone);-webkit-text-fill-color:var(--bone);filter:none}
@keyframes sweep{to{background-position:0 0}}
.hero-tag{margin:26px 0 0;font-family:var(--display);font-weight:300;font-size:clamp(17px,2vw,26px);letter-spacing:.01em;color:var(--lumen)}
.hero .intro{max-width:46ch;margin:14px 0 0;font-size:13px;color:var(--bone)}
.hero .intro strong{color:var(--lumen);font-weight:400}

.cues{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin-top:34px}
.btn-go{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;background:var(--lumen);border-color:var(--lumen);color:var(--abyss);font-weight:600;box-shadow:0 0 24px rgba(158,240,255,.28)}
.btn-go:hover{background:#d3f8ff;box-shadow:0 0 34px rgba(158,240,255,.5)}
.btn-go i{display:block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:rotate(45deg) translate(-2px,-2px)}50%{transform:rotate(45deg) translate(1px,1px)}}

.hero-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:0;margin:44px 0 0;padding:0;max-width:640px;border-top:1px solid var(--line)}
.hero-stats div{padding:14px 28px 0 0;margin-right:28px;border-right:1px solid var(--line)}
.hero-stats div:last-child{border-right:0;margin-right:0}
.hero-stats dt{font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.hero-stats dd{margin:4px 0 0;font-family:var(--display);font-weight:200;font-size:clamp(22px,2.6vw,34px);line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}

.logpanel{width:100%;background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}
.logpanel::before,.logpanel::after{content:"";position:absolute;width:10px;height:10px;border:1px solid var(--lumen)}
.logpanel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.logpanel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.log-head{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.log-ver{margin-left:auto;color:var(--lumen);letter-spacing:.16em;text-transform:none;opacity:.8}
.dots{display:flex;gap:5px}
.dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--line-hi)}
.dots i:last-child{background:var(--spore)}
.bootlog{list-style:none;margin:0;padding:12px 14px 14px;font-size:9.5px;line-height:1.9;color:var(--dim);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.bootlog li{white-space:nowrap;overflow:hidden;opacity:0;animation:boot .5s steps(30,end) forwards;animation-delay:calc(.9s + var(--i,0)*.34s)}
.bootlog li span{color:var(--lumen)}
.bootlog li.ok span{color:var(--spore)}
.bootlog li.ok{color:var(--bone)}
@keyframes boot{from{opacity:1;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

.scroll-cue{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--lumen)}
.scroll-cue i{display:block;width:1px;height:54px;background:linear-gradient(var(--lumen),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}

/* staggered entrance */
.js-hero .hero .eyebrow,.js-hero .hero h1,.js-hero .hero-tag,.js-hero .hero .intro,.js-hero .cues,.js-hero .hero-stats,.js-hero .logpanel,.js-hero .scroll-cue{animation-name:rise;animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:both;animation-delay:calc(var(--d,0)*.12s)}
.js-hero .hero h1{animation:rise .9s cubic-bezier(.2,.7,.2,1) .12s both,sweep 5.5s cubic-bezier(.4,0,.2,1) 1.1s 1 forwards}
.js-hero .hero .eyebrow{--d:0}.js-hero .hero-tag{--d:2}.js-hero .hero .intro{--d:3}.js-hero .cues{--d:4}.js-hero .hero-stats{--d:5}.js-hero .logpanel{--d:3}.js-hero .scroll-cue{--d:7}
@keyframes rise{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}

@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px}
  .hero h1{font-size:clamp(44px,min(10.2vw,calc((100vw - var(--rail-clear,0px) - 40px) / 7)),164px)}
  .hero-side{align-items:stretch}
  .scroll-cue{display:none}
}
@media (max-width:760px){
  .hero{padding-left:0;padding-block:104px 56px}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .hero-stats div{padding-bottom:14px;margin-right:0;border-right:0}
  .hero h1 small{letter-spacing:.4em}
  .cues .btn{flex:1 1 100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .hero-main,.hero-side{transform:none;opacity:1}
  .hero h1{animation:none;background-position:0 0}
  .js-hero .hero *{animation:none!important}
  .bootlog li{opacity:1;animation:none}
  .pulse::after,.btn-go i,.scroll-cue i{animation:none}
}