/* Reserve a real transition band instead of painting fog over the device. */
.hero{--hero-transition-space:clamp(240px,25vh,320px);min-height:calc(clamp(730px,82vh,960px) + var(--hero-transition-space));padding-bottom:var(--hero-transition-space)}
.hero-art{bottom:calc(var(--hero-transition-space) - 12px)}
.hero-constellation{bottom:calc(var(--hero-transition-space) + 80px)}
@media(min-width:1900px){
 .hero{min-height:calc(850px + var(--hero-transition-space))}
 .hero-constellation{bottom:calc(var(--hero-transition-space) + 60px)}
}
@media(max-width:950px){
 .hero{--hero-transition-space:230px;min-height:0}
 .hero-art{bottom:calc(var(--hero-transition-space) + 60px)}
 .hero-constellation{bottom:calc(var(--hero-transition-space) + 55px)}
}
@media(max-width:650px){
 .hero{--hero-transition-space:190px}
 .hero-art{bottom:calc(var(--hero-transition-space) + 55px)}
 .hero-constellation{bottom:calc(var(--hero-transition-space) + 45px)}
}
.journey-traffic{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;transform:translate3d(var(--map-x,0px),var(--map-y,0px),0) scale(var(--map-scale,1));mask-image:linear-gradient(transparent,transparent calc(var(--map-quiet-top,200px) - var(--map-y,0px)),#000 calc(var(--map-quiet-top,200px) + 60px - var(--map-y,0px)),#000 87%,transparent)}
@media(prefers-reduced-motion:reduce){.journey-traffic{transform:none}}