/* loading screen (2026-10-06): CityPLX wordmark over the atrium coming into focus — see vivo-app.js loading()/hideLoading() */
html body #loading,html body #loading.arrive{background:#e8ecf1!important;color:#1d2433;overflow:hidden;transition:opacity 1s cubic-bezier(.2,.8,.2,1)}
html body #loading::before{content:'';position:absolute;inset:-8%;background:url(assets/loading-atrium.webp) center/cover;z-index:0;
 filter:blur(calc(38px - var(--p,0) * 30px)) saturate(calc(.8 + var(--p,0) * .35)) brightness(1.04);transform:scale(calc(1.14 - var(--p,0) * .08));opacity:calc(.45 + var(--p,0) * .55);transition:filter .8s ease,transform .8s ease,opacity .8s ease}
html body #loading::after{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 55% 45% at 50% 50%,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
html body #loading>*{position:relative;z-index:1}
html body #loading .loading-brand,html body #loading.arrive .loading-brand{font:200 clamp(54px,8vw,92px)/1 -apple-system,"SF Pro Display","Helvetica Neue",sans-serif!important;letter-spacing:.02em!important;color:#1d2433!important;display:flex;flex-direction:column;align-items:center}
html body #loading .vl-word{display:flex;position:relative}
html body #loading .vl-word i{font-style:normal;display:inline-block;opacity:0;filter:blur(14px);transform:translateY(14px);margin:0 .09em;animation:vlLetter 1.1s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 85ms + .15s)}
html body #loading .vl-word i.b{font-weight:600}
html body #loading .vl-word::after{content:'';position:absolute;inset:-10% -6%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);mix-blend-mode:soft-light;background-size:250% 100%;background-position:120% 0;animation:vlSheen 3.2s 1.4s ease-in-out infinite;pointer-events:none}
@keyframes vlLetter{to{opacity:1;filter:blur(0);transform:none;margin:0 .005em}}
@keyframes vlSheen{0%{background-position:120% 0}55%,100%{background-position:-20% 0}}
html body #loading .loading-brand span,html body #loading.arrive .loading-brand span{font:500 11.5px -apple-system,"SF Pro Text",sans-serif!important;letter-spacing:.42em!important;color:rgba(29,36,51,.5)!important;margin-top:22px!important;opacity:0;animation:vlFade 1s 1s ease forwards}
@keyframes vlFade{to{opacity:1}}
html body #loading #load-status,html body #loading.arrive #load-status{color:rgba(29,36,51,.6)!important;margin-top:46px;font:400 13px -apple-system,"PingFang SC",sans-serif;letter-spacing:.04em;opacity:0;animation:vlFade 1s 1.2s ease forwards}
html body #loading .progress,html body #loading.arrive .progress{width:180px;height:2px;margin-top:14px;border-radius:9px;background:rgba(29,36,51,.1)!important;border:0!important;opacity:0;animation:vlFade 1s 1.2s ease forwards}
html body #loading .progress i,html body #loading.arrive .progress i{border-radius:9px;background:linear-gradient(90deg,#ffffff,#d7e7ff)!important;box-shadow:0 0 14px rgba(170,205,255,.95)}
html body #loading.vl-done{opacity:0;pointer-events:none}html body #loading.vl-done::before{filter:blur(0) saturate(1.15);transform:scale(1)}
@keyframes vlIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96);filter:blur(8px)}}
html body #loading .loading-brand{animation-name:vlText}@keyframes vlText{from{opacity:0;transform:translateY(8px)}}
/* same wordmark as the harbour (user: 商场加载的 CityPLX 文字要和外边一样) */
html body #loading .loading-brand { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html body #loading .vl-word i { letter-spacing: .02em !important; }
html body #loading .vl-word::after { display: none !important; }

/* 10-16 load (qa r3 #1): the reload button on the failure screen was a bare browser button - one glass capsule, HIG hit area + hover */
html body #loading #retry{margin-top:30px;min-width:150px;min-height:48px;padding:0 30px;border:0;border-radius:999px;font:500 16px/48px var(--glass-font,-apple-system,"PingFang SC",sans-serif);letter-spacing:.02em;color:#1d2433;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.5),0 10px 30px rgba(29,36,51,.14);cursor:pointer;transition:transform .2s ease-out,background .2s ease-out,box-shadow .2s ease-out;animation:plxRetryIn .25s ease-out both}
@keyframes plxRetryIn{from{opacity:0;transform:scale(.96)}}
html body #loading #retry:hover{background:rgba(255,255,255,.8);transform:scale(1.03);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.6),0 14px 36px rgba(29,36,51,.18)}
html body #loading #retry:active{transform:scale(.98)}
html body #loading #retry[hidden]{display:none}
/* 10-19 gvlink: back from Golden Village (html.gvback, index.html) the layer keeps the cinema's dark and its line (vivo-cinema-r22.js) instead of the atrium picture and the mall cards */
html.gvback,html.gvback body{background:#100f0e}
html.gvback body #loading,html.gvback body #loading.arrive{background:#100f0e!important;color:#e8d4ab!important}
html.gvback body #loading::before,html.gvback body #loading::after,html.gvback body #loading .loading-brand,html.gvback body #loading .ms-pick,html.gvback body #loading .ms-enter{display:none!important}
html.gvback body #loading .gv-back-title,html.gvback body #loading.arrive .gv-back-title{font:18px system-ui,sans-serif;letter-spacing:2px;color:#e8d4ab!important}
html.gvback body #loading #load-status,html.gvback body #loading.arrive #load-status{color:rgba(232,212,171,.5)!important}
html.gvback body #loading .progress,html.gvback body #loading.arrive .progress{background:rgba(232,212,171,.12)!important}
html.gvback body #loading .progress i,html.gvback body #loading.arrive .progress i{background:#e8d4ab!important;box-shadow:none}