/* Hero, Street Signal: a floodlit night court. Layers back to front: sky (flash glows, cage mesh),
   outline type rows, tilted dark pitch with chalk lines/ball/players, lime speed slashes,
   headline copy, foreground dust and cones. Default (no JS / reduced motion) = static composition. */
.hero{position:relative;height:230vh;background:#101010;color:var(--chalk)}
.hero-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));height:calc(100svh - var(--nav-h));overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 50% at 18% 0%,rgba(255,255,255,.14),transparent 70%),radial-gradient(50% 45% at 88% 8%,rgba(255,255,255,.1),transparent 70%),radial-gradient(80% 60% at 50% 100%,rgba(213,255,63,.07),transparent 70%),#101010}
.hero > .hero-pin > *{position:absolute}
.h-sky,.h-type,.h-stage,.h-copy,.h-fg,.h-slash{inset:0}
.h-sky{background:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px),repeating-linear-gradient(-45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);mask-image:linear-gradient(to bottom,#000,transparent 70%)}
.beam{position:absolute;top:-20%;width:30%;height:120%;background:linear-gradient(to bottom,rgba(255,255,255,.2),rgba(255,255,255,0) 70%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(8px);transform-origin:50% 0}
.b1{left:2%;transform:rotate(16deg)} .b2{right:2%;transform:rotate(-16deg)}
.h-type{overflow:hidden;z-index:1}
.h-type .row{position:absolute;left:0;white-space:nowrap;font:400 clamp(7rem,30vw,26rem)/.8 var(--display);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(244,244,238,.1);will-change:transform}
.h-type .r1{top:2%} .h-type .r2{top:30%;-webkit-text-stroke-color:rgba(213,255,63,.12)}
.h-stage{z-index:2;perspective:1000px;perspective-origin:50% 28%;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,transparent 4%,#000 38%);mask-image:linear-gradient(to bottom,transparent 4%,#000 38%)}
.h-plane{position:absolute;left:50%;top:52%;width:max(1100px,150vw);aspect-ratio:1050/680;transform:translate(-50%,-50%) rotateX(38deg) scale(1.1);transform-origin:50% 50%;will-change:transform}
.h-plane svg{display:block;width:100%;height:100%;overflow:visible}
.h-plane .chalk{opacity:.55}
.h-slash{z-index:2;pointer-events:none;width:100%;height:100%;overflow:visible}
.h-slash .sl{will-change:transform,opacity}
.h-copy{z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.beat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;padding:16px clamp(16px,6vw,96px);gap:.7rem}
.beat::before{content:"";position:absolute;inset:8% 0;background:radial-gradient(closest-side at 30% 50%,rgba(16,16,16,.78),transparent);z-index:-1}
.beat > *{margin:0}
.kicker{font:700 clamp(.7rem,2vw,.85rem)/1 var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.hd1,.hd2,.hd3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.88;color:var(--chalk);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hd1{font-size:clamp(4.4rem,18vw,13rem);display:flex;flex-direction:column;align-items:flex-start;letter-spacing:.005em}
.hd1 span,.hd2 span,.hd3 span{display:block;transform-origin:left bottom}
.hd2{font-size:clamp(4.4rem,17vw,12rem);display:flex;flex-wrap:wrap;align-items:baseline;gap:.05em .2em}
.hd2 .ghost{color:transparent;-webkit-text-stroke:2px var(--chalk);text-shadow:none}
.hd2 .amp{font-size:.55em;color:var(--lime)}
.hd3{font-size:clamp(3.4rem,13vw,9rem)}
.hd1 i,.hd3 i{font-style:normal}
.sub{max-width:36ch;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.4;color:#dcdcd5;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.btn-row{pointer-events:none}
.btn-row .btn{pointer-events:auto}
.scroll-hint{display:flex;flex-direction:row;align-items:center;gap:10px;margin-top:.8rem !important;font:700 .68rem var(--body);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.scroll-hint i{display:block;width:2px;height:30px;background:linear-gradient(var(--lime),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}
.h-fg{z-index:4;pointer-events:none;overflow:hidden}
.parts{position:absolute;inset:0}
.parts i{position:absolute;border-radius:0;background:#fff;will-change:transform}
.turf{position:absolute;left:-5%;right:-5%;bottom:-8%;height:18%;background:linear-gradient(to top,#101010 30%,rgba(16,16,16,0));will-change:transform}
.cone{position:absolute;width:clamp(30px,5vw,56px);bottom:6%;will-change:transform;filter:drop-shadow(0 8px 8px rgba(0,0,0,.6))}
.c1{left:5%} .c2{right:7%}
.h-bar{left:0;right:0;bottom:0;height:3px;background:#2A2A2A;z-index:5}
.h-bar i{display:block;height:100%;width:100%;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.hero:not(.hero--static) .beat{will-change:opacity,transform}
.hd3 span,.hd2 span{display:block}

/* Static composition */
.hero--static{height:auto}
.hero--static .hero-pin{position:relative;top:0;height:auto;min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;justify-content:center}
.hero--static .h-copy{position:relative;inset:auto;padding:48px 0 72px;gap:2.6rem;pointer-events:auto}
.hero--static .beat{position:relative;inset:auto}
.hero--static .beat::before{inset:-10% 0}
.hero--static .scroll-hint,.hero--static .h-bar,.hero--static #btns1{display:none}
.hero--static .hd1{font-size:clamp(3.6rem,15vw,9rem)}
.hero--static .hd2{font-size:clamp(3rem,12vw,7rem)}
.hero--static .hd3{font-size:clamp(2.6rem,10vw,5.5rem)}
.hero--static .h-plane{transform:translate(-50%,-50%) rotateX(34deg) scale(1.1)}

@media (max-width:700px){.hero{height:210vh}.h-type .row{-webkit-text-stroke-width:1px}.h-slash{opacity:.85}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none}}
.hd1,.hd2,.hd3{transform:skew(-6deg)}