/* Spider hero (first screen of the home page), scoped with sh- classes */

.sh-hero{--bg:#000000;--fg:#EDEFFF;--muted:rgba(214,220,255,.72);--hud:rgba(196,206,255,.55);--line-v:rgba(160,176,255,.08);--line-h:rgba(160,176,255,.10);--sans:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--pad:clamp(16px,2.4vw,32px);--ease:cubic-bezier(.16,.84,.24,1);font-family:var(--sans);position:relative;width:100%;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--bg);color:var(--fg);isolation:isolate}

/* grid lines */
.sh-grid{position:absolute;inset:0;pointer-events:none}
.sh-grid i{position:absolute;display:block}
.sh-grid .sh-v{top:0;bottom:0;width:1px;background:var(--line-v);transform-origin:top;animation:sh-growY 1.8s var(--ease) both}
.sh-grid .sh-h{left:0;right:0;height:1px;background:var(--line-h);transform-origin:left;animation:sh-growX 1.8s var(--ease) both}

/* canvas */
#bust{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

/* header */
.sh-top{position:absolute;left:0;right:0;top:0;height:64px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;z-index:3}
.sh-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:500;letter-spacing:-.02em;min-height:44px}
.sh-nav{display:flex;gap:clamp(20px,3vw,44px);font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.sh-nav a{color:rgba(230,235,255,.78);padding:16px 0;transition:color .25s}
.sh-nav a:hover{color:#fff}
.sh-cta{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border:1px solid rgba(237,239,255,.45);font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.sh-cta:hover{background:#EDEFFF;color:#000000;border-color:#EDEFFF}

/* headlines */
.sh-headline{position:absolute;z-index:2;margin:0;font-weight:400;font-size:clamp(42px,5.6vw,92px);line-height:1;letter-spacing:-.035em;pointer-events:none}
.sh-headline.sh-left{left:var(--pad);top:clamp(88px,12vh,120px)}
.sh-headline.sh-right{right:var(--pad);bottom:84px;text-align:right}
.sh-ln{display:block;overflow:hidden;padding-bottom:.06em}
.sh-ln>span{display:block;animation:sh-up 1.2s var(--ease) both}

/* bottom-left copy */
.sh-intro-copy{position:absolute;z-index:2;left:var(--pad);bottom:84px;max-width:300px;display:flex;flex-direction:column;gap:18px}
.sh-intro-copy p{font:400 11px/1.6 var(--mono);letter-spacing:.04em;color:var(--muted);text-shadow:0 0 10px #000,0 0 3px #000}
.sh-explore{display:inline-flex;align-items:center;gap:10px;min-height:44px;align-self:flex-start;font-size:15px;border-bottom:1px solid rgba(237,239,255,.4);text-shadow:0 0 10px #000,0 0 3px #000;transition:border-color .25s,gap .25s}
.sh-explore:hover{border-color:#EDEFFF;gap:14px}

/* scroll cue */
.sh-cue{position:absolute;z-index:2;left:50%;bottom:64px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;min-width:44px;font:400 10px/1 var(--mono);letter-spacing:.2em;color:rgba(214,220,255,.6)}
.sh-cue .sh-track{display:block;width:1px;height:36px;background:rgba(214,220,255,.15);overflow:hidden}
.sh-cue .sh-track i{display:block;width:1px;height:36px;background:#EDEFFF;animation:sh-scrollcue 2.2s ease-in-out infinite}

/* footer bar */
.sh-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;height:52px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:16px;font:400 10px/1 var(--mono);letter-spacing:.12em;color:var(--hud)}

/* HUD micro-labels */
.sh-hud{position:absolute;z-index:2;pointer-events:none;font:400 10px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(196,206,255,.55)}
.sh-hud .sh-dot{color:#7C98FF;animation:sh-pulse 1.6s ease-in-out infinite}

/* fade-ins */
.sh-fd{animation:sh-fade 1.4s ease both}

@keyframes sh-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes sh-fade{from{opacity:0}to{opacity:1}}
@keyframes sh-growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sh-growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sh-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sh-scrollcue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:820px){.sh-nav,.sh-hud{display:none}}
@media (max-width:700px){.sh-cue{display:none}.sh-headline.sh-right{bottom:212px}}
@media (prefers-reduced-motion:reduce){.sh-hero *{animation:none!important;transition:none!important}}