/* v13 — architectural light, wet reflections and a single opening sequence. */
.hero{--city-power:1;--city-depth:0;--city-drift:0px}
.city-sign{right:11.6%;top:37%;width:clamp(235px,22vw,328px);transform:translate3d(calc(var(--scene-x,0px)*1.05),calc(var(--scene-y,0px) + var(--scene-scroll,0px)),0) perspective(1100px) rotateY(-17deg) rotateX(1deg) rotateZ(-1.5deg);filter:drop-shadow(-12px 17px 4px #000a)}
.city-sign-mount{padding:22px 20px 14px;background:linear-gradient(165deg,#74707923,transparent 34%),linear-gradient(95deg,#131116f5,#16131af4);border:1px solid #76656d99;border-left:3px solid #b28c92;box-shadow:-8px 4px 0 #242126,-11px 7px 0 #08070b,inset 0 0 0 4px #09080d,0 0 55px #ff183814;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px))}
.city-sign-title{font-size:clamp(29px,3vw,44px);letter-spacing:0;filter:drop-shadow(2px 4px 0 #390812) drop-shadow(0 0 8px #ff697987);text-shadow:none}
.city-sign-title:after{content:'';display:block;width:100%;aspect-ratio:512/76;background:#ffe8ec;mask:url('/assets/mgpu77-wordmark.svg') center/contain no-repeat;-webkit-mask:url('/assets/mgpu77-wordmark.svg') center/contain no-repeat;filter:drop-shadow(0 0 3px #ffb9c3) drop-shadow(0 0 15px #ff315257)}
.city-sign-title{font-size:0}
.city-sign-subline{font-size:8px;letter-spacing:2px;color:#d68b99;border-top-color:#b98a9254;margin-top:14px}
.city-sign-strut{left:7%;right:7%;bottom:-17%;border-left:6px solid #27232a;border-right:6px solid #27232a;transform:translateZ(-16px);background:linear-gradient(168deg,transparent 78%,#141216 78% 84%,transparent 84%);opacity:.9}
.city-sign-reflection{right:11.6%;bottom:10%;width:25%;height:75px;font-size:0;opacity:calc(.17 * var(--city-power));filter:blur(3px);transform:perspective(400px) rotateX(59deg) rotateZ(-2deg) scaleY(-1);background:#ff485f;mask:url('/assets/mgpu77-wordmark.svg') center/contain no-repeat;-webkit-mask:url('/assets/mgpu77-wordmark.svg') center/contain no-repeat}
.city-lighting{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:var(--city-power)}
.city-wall-light{position:absolute;right:7%;top:28%;width:35%;height:54%;background:radial-gradient(ellipse at 55% 28%,#ff183e31,transparent 45%);filter:blur(10px);clip-path:polygon(29% 0,83% 3%,100% 100%,3% 100%)}
.city-ground-light{position:absolute;right:5%;bottom:8%;width:43%;height:19%;background:repeating-linear-gradient(175deg,transparent 0 8px,#fc365308 9px 11px,transparent 12px 20px),radial-gradient(ellipse at 56% 36%,#ff294232,transparent 67%);transform:perspective(500px) rotateX(49deg);filter:blur(1px);mask-image:linear-gradient(transparent,#000 15% 80%,transparent)}
.city-fog{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.72}
.city-fog i{position:absolute;right:-15%;bottom:14%;width:76%;height:23%;background:radial-gradient(ellipse at 20% 52%,#b9a7b215,transparent 36%),radial-gradient(ellipse at 68% 44%,#a4a0b010,transparent 40%);filter:blur(18px);transform:translateX(var(--city-drift));mix-blend-mode:screen;animation:cityFogDrift 36s ease-in-out infinite alternate}
.city-fog i:nth-child(2){bottom:31%;width:60%;height:10%;opacity:.7;animation-duration:47s;animation-direction:alternate-reverse;filter:blur(22px)}
.city-opening .city-sign{animation:citySignWake 2.9s ease both}
.city-opening .city-lighting{animation:cityLightWake 3.7s ease both}
.city-opening .city-sign-reflection{animation:cityReflectionWake 3.8s ease both}
.hero.is-offscreen .city-fog i{animation-play-state:paused}
@keyframes citySignWake{0%,19%{opacity:.22;filter:drop-shadow(-12px 17px 4px #000a) brightness(.35)}36%{opacity:.78;filter:drop-shadow(-12px 17px 4px #000a) brightness(.8)}48%{opacity:.7}65%,100%{opacity:1;filter:drop-shadow(-12px 17px 4px #000a) brightness(1)}}
@keyframes cityLightWake{0%,25%{opacity:0}100%{opacity:1}}
@keyframes cityReflectionWake{0%,30%{opacity:0}100%{opacity:.17}}
@keyframes cityFogDrift{from{transform:translateX(-28px) scale(1)}to{transform:translateX(38px) scale(1.08)}}
@media(min-width:761px){.hero-art img{transform:translate3d(var(--scene-x,0px),calc(var(--scene-y,0px) + var(--scene-scroll,0px)),0) scale(calc(1.06 + var(--city-depth)*.02))}.hero-art{transition:filter 1s}}
@media(min-width:761px) and (max-width:1100px){.city-sign{top:63%;right:8%;width:245px}.city-sign-reflection{width:28%;right:9%;height:60px}.city-wall-light{top:50%;right:3%;height:42%}}
@media(max-width:760px){.city-sign{top:55%;right:7.5%;width:43%;transform:perspective(850px) rotateY(-15deg) rotateX(1deg) rotateZ(-2deg);filter:drop-shadow(-7px 11px 3px #000a)}.city-sign-mount{padding:15px 11px 10px;box-shadow:-5px 3px 0 #242126,-7px 5px 0 #08070b,inset 0 0 0 3px #09080d}.city-sign-subline{font-size:5px;letter-spacing:1.1px;margin-top:10px}.city-sign-reflection{right:5%;bottom:11%;width:47%;height:40px;filter:blur(2px)}.city-wall-light{right:0;top:44%;width:67%;height:40%}.city-ground-light{right:0;width:85%;bottom:9%;height:16%}.city-fog i{width:110%;bottom:22%;height:17%;opacity:.8}.city-fog i:nth-child(2){bottom:42%}}
@media(prefers-reduced-motion:reduce){.city-opening .city-sign,.city-opening .city-lighting,.city-opening .city-sign-reflection,.city-fog i{animation:none!important}.hero-art img{transform:none!important}}