/* Landing globe (globe-intro.js). Opaque from the first paint so the drawn city never shows first.
   Clouds stay over the globe and part as it zooms. The stage is removed if the globe cannot run. */
.globe-stage{position:fixed;z-index:1;inset:0;pointer-events:none;background:radial-gradient(circle at 68% 50%,#16384a 0%,#0a1c27 48%,#07131c 75%);transition:opacity .9s ease}
body:not([data-phase=intro]):not([data-phase=composer]) .globe-stage{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s .4s}
.globe-map{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.globe-stage.is-ready .globe-map{opacity:1}
body:has(.globe-stage) .city-stage{visibility:hidden}
.globe-map .maplibregl-canvas{position:absolute;left:0;top:0}
.globe-map .maplibregl-canvas-container,.globe-map .maplibregl-control-container{display:contents}
/* A light vignette keeps the headline and composer readable without dimming the centred globe. */
.globe-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#07131c99 0%,transparent 22%);opacity:calc(1 - var(--reveal,0)*1.8)}
body:has(.globe-stage) .cloud{filter:blur(14px)}
.globe-stage[data-stage=street]::after{opacity:.6;background:radial-gradient(ellipse at 50% 48%,#07131c99 0%,#07131c33 55%,#07131c99 100%)}
.globe-caption{position:absolute;z-index:2;left:50%;bottom:34px;transform:translateX(-50%);font-size:9px;font-weight:700;letter-spacing:1.6px;color:#8affd5;white-space:nowrap;text-shadow:0 1px 10px #07131c;transition:opacity .28s ease}
.globe-caption.is-swapping{opacity:0}
.globe-credit{position:absolute;z-index:2;right:12px;bottom:8px;font-size:9px;color:#cdd9db8c}
.globe-credit a{color:inherit;pointer-events:auto}
@media(max-width:760px){.globe-caption{bottom:74px;font-size:8px}}