.heroState:after{display:none}
.originScene{height:210svh;position:relative;background:var(--navy)}.originStage{background:var(--navy)}
.streetPhoto{position:absolute;inset:0;background:url('assets/street-football-v4.png') 60% center/cover no-repeat;filter:saturate(.6);transform:scale(calc(1.02 + var(--origin-progress,0)*.035));opacity:calc(1 - var(--origin-progress,0)*.6)}
.originShade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,27,40,.8),rgba(22,27,40,.12) 70%),linear-gradient(0deg,var(--navy),transparent 30%)}
.originCopy{position:absolute;z-index:3;left:max(32px,calc((100vw - 1440px)/2));top:25%;width:48%;opacity:clamp(0,calc(1.5 - var(--origin-progress,0)),1)}
.originCopy h2{font:900 clamp(4rem,8vw,8.5rem)/.9 var(--display);letter-spacing:-.055em;text-transform:uppercase;margin:28px 0}.originCopy h2 em{font-style:italic}.originCopy>p:last-child{color:#d4dce2;font-size:1.1rem;line-height:1.6;max-width:350px}
.originField{position:absolute;width:min(900px,75vw);aspect-ratio:1200/760;right:3%;top:50%;transform:translateY(-40%);opacity:calc(var(--origin-progress,0)*.55);pointer-events:none}.originField .pitch{transform:none}.originField .pitch g{stroke:rgba(243,246,247,.7)}
.perspectiveScene{height:850svh;position:relative;background:var(--navy)}.perspectiveStage{background:radial-gradient(ellipse at 70% 55%,#202c3a,var(--navy) 68%)}
.perspectiveLabel{position:absolute;top:14%;left:32px}.perspectiveCopy{position:absolute;z-index:8;left:32px;top:26%;width:36%}.perspectiveCopy h2{margin:0;font:900 clamp(3.4rem,5.8vw,6.3rem)/.94 var(--display);letter-spacing:-.045em;text-transform:uppercase}.perspectiveCopy p{max-width:340px;color:var(--muted);font-size:1.1rem;line-height:1.6;margin:25px 0}
.perspectiveBoard{position:absolute;right:2%;top:51%;width:60vw;aspect-ratio:1200/760;transform:translateY(-40%);isolation:isolate}.sharedPitch,.perspectivePlanes{position:absolute;inset:0}.sharedPitch .pitch{transform:none}.sharedPitch .pitch g{stroke:rgba(205,220,226,.45);stroke-width:1.6}.perspectiveBoard .matchCanvas{z-index:3}
.perspectivePlane{position:absolute;inset:2.4% 1.5%;border:1px solid rgba(27,196,243,.25);opacity:0;transform:translateY(0);transition:opacity .6s,transform .8s;pointer-events:none}.perspectivePlane span{position:absolute;left:12px;top:12px;background:var(--navy);padding:6px 10px;color:#c8d9e2;font:700 .78rem/1.3 var(--mono);text-transform:uppercase}
[data-lens='0'] .perspectivePlane:nth-child(1),[data-lens='1'] .perspectivePlane:nth-child(2),[data-lens='2'] .perspectivePlane:nth-child(3),[data-lens='3'] .perspectivePlane:nth-child(4){opacity:.6;transform:translateY(-18px)}
[data-lens='4'] .perspectivePlane{opacity:calc(.8 - var(--assembly)*.55);transform:translateY(calc((1 - var(--assembly))*var(--offset))) rotateX(calc((1 - var(--assembly))*20deg))}
.perspectivePlane:nth-child(1){--offset:-90px}.perspectivePlane:nth-child(2){--offset:-30px}.perspectivePlane:nth-child(3){--offset:30px}.perspectivePlane:nth-child(4){--offset:90px}
[data-lens='4'] .perspectivePlane span{opacity:calc(1 - var(--assembly))}[data-lens='4'] .perspectiveCopy p{color:var(--cyan);font:900 clamp(2rem,3.5vw,4rem)/1.1 var(--display);letter-spacing:-.035em;text-transform:uppercase;font-style:italic}
.perspectiveNav{position:absolute;bottom:8%;left:32px;right:32px;display:flex;justify-content:flex-end;gap:24px;font:700 .8rem/1.3 var(--mono);text-transform:uppercase}.perspectiveNav span{padding-top:12px;border-top:2px solid #344051;color:var(--muted)}.perspectiveNav .active{border-color:var(--cyan);color:white}.perspectiveNote{position:absolute;right:32px;bottom:2%;font-size:12px;color:var(--muted)}
@media(max-width:900px){.originCopy{left:20px;top:23%;width:85%}.originCopy h2{font-size:16vw}.streetPhoto{background-position:65% center}.originField{width:95vw;top:65%}.perspectiveScene{height:850svh}.perspectiveLabel{left:20px;top:13%}.perspectiveCopy{left:20px;top:21%;width:90%}.perspectiveCopy h2{font-size:12vw}.perspectiveCopy p{font-size:1rem;margin-top:18px;max-width:90%}.perspectiveBoard{right:3%;width:94vw;top:62%;transform:translateY(-30%)}.perspectiveNav{left:20px;right:20px;gap:12px;justify-content:space-between;bottom:7%;font-size:12px;flex-wrap:wrap}.perspectiveNote{right:20px;font-size:12px}.perspectivePlane span{font-size:12px}.perspectivePlane:nth-child(1){--offset:-54px}.perspectivePlane:nth-child(2){--offset:-18px}.perspectivePlane:nth-child(3){--offset:18px}.perspectivePlane:nth-child(4){--offset:54px}}
@media(prefers-reduced-motion:reduce){.streetPhoto{transform:none}.perspectivePlane{transition:none}}