/* Loading artwork is decorative; scene readiness alone decides when to enter. */
#loading{isolation:isolate;overflow:hidden;justify-content:flex-end;align-items:flex-end;padding:24px max(32px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom));transition:opacity .6s ease;pointer-events:auto}
#loading[hidden]{display:none}
/* The incoming airport header joins the scene reveal, never the loading screen. */
body:has(#loading:not([hidden]):not(.done)) .topbar{visibility:hidden;pointer-events:none}
.loading-background,.loading-background picture,.loading-background img{position:absolute;inset:0;width:100%;height:100%}
.loading-background{z-index:-2;background:#172333;opacity:0;transition:opacity .6s ease}
.loading-background picture{opacity:0;transition:opacity .8s ease}
.loading-background picture.is-active{opacity:1}
.loading-background img{display:block;object-fit:cover;object-position:center}
#loading::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,20,35,.08) 20%,rgba(10,20,35,.15) 45%,rgba(10,20,35,.88) 100%);opacity:0;transition:opacity .6s ease}
.loading-content{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:320px;max-width:100%;opacity:1;transition:opacity .6s ease}
#loading.art-ready:not(.is-leaving) .loading-background,#loading.art-ready:not(.is-leaving)::before,#loading.art-ready:not(.is-leaving) .loading-content{opacity:1}
#loading.is-leaving .loading-content{opacity:0}
#loading .loading-symbol{width:min(188.16px,60.48vw)}
#loading .loading-content strong{color:var(--text);font-size:16px;line-height:1.5}
#loading .loading-content #loading-message{color:var(--muted);font-size:11px;line-height:1.5}
#loading .loading-line{background:var(--border)}
#loading .loading-line i{background:var(--accent)}
#loading.art-ready .loading-content strong{color:#fff;text-shadow:0 1px 8px #102030}
#loading.art-ready .loading-content #loading-message{color:#f0f4f9;text-shadow:0 1px 6px #102030}
#loading.art-ready .loading-line{background:#ffffff50}
#loading.art-ready .loading-line i{background:#fff}
@media(max-width:720px){
 #loading,html.night #loading,body.night #loading{background:#172333;align-items:center;padding-top:calc(24px + env(safe-area-inset-top));padding-right:max(20px,env(safe-area-inset-right));padding-left:max(20px,env(safe-area-inset-left))}
 #loading .loading-content strong{color:#fff}
 #loading .loading-content #loading-message{color:#dbe4ef}
 #loading .loading-line{background:#ffffff50}
 #loading .loading-line i{background:#fff}
 /* Paint through the translucent iOS status area, with no hard image edge. */
 .loading-background::after{content:"";position:absolute;inset:0 0 auto;height:calc(160px + var(--app-safe-top,env(safe-area-inset-top)));background:linear-gradient(180deg,#172333 0px,#172333 calc(var(--app-safe-top,env(safe-area-inset-top)) + 16px),#172333dd calc(var(--app-safe-top,env(safe-area-inset-top)) + 48px),#17233366 calc(var(--app-safe-top,env(safe-area-inset-top)) + 104px),#17233300 100%);pointer-events:none}
}
@media(max-height:480px){
 #loading{padding-bottom:max(18px,env(safe-area-inset-bottom))}
 #loading .loading-symbol{width:min(134.4px,42vw)}
 .loading-content{gap:8px}
}
@media(prefers-reduced-motion:reduce){
 #loading,.loading-background,.loading-background picture,#loading::before,.loading-content{transition:none}
}
