@property --cloud-cover { syntax: '<number>'; inherits: true; initial-value: 0; }
.arrival-curtain { position: fixed; inset: 0; z-index: 100; overflow: hidden; isolation: isolate; --cloud-cover: 0; }
.arrival-curtain[hidden] { display: none; }
.arrival-curtain::before { content: ''; position: absolute; inset: 0; background: #f4f2e9; opacity: var(--cloud-cover); }
.arrival-cloud { position: absolute; inset: -30%; pointer-events: none; opacity: min(1, calc(var(--cloud-cover) * 1.8)); will-change: transform; }
.arrival-cloud-near { background: radial-gradient(ellipse at 14% 56%, #fffef8 0 13%, #f6f5eed9 26%, transparent 48%), radial-gradient(ellipse at 78% 68%, #fffef8 0 16%, #f6f5eec9 29%, transparent 51%), radial-gradient(ellipse at 46% 12%, #fcfbf5 0 13%, #f1f1e5c9 27%, transparent 49%); transform: translate3d(calc((1 - var(--cloud-cover)) * -17%), calc((1 - var(--cloud-cover)) * 13%), 0) scale(calc(1.12 - var(--cloud-cover) * .12)); }
.arrival-cloud-far { background: radial-gradient(ellipse at 82% 27%, #fdfcf7 0 19%, #e4e9e2d9 31%, transparent 53%), radial-gradient(ellipse at 20% 84%, #fcfbf6 0 15%, #e2e9e4c9 30%, transparent 52%); transform: translate3d(calc((1 - var(--cloud-cover)) * 19%), calc((1 - var(--cloud-cover)) * -12%), 0); }
.arrival-caption { position: absolute; inset: auto 24px 15vh; text-align: center; color: #52685e; opacity: var(--cloud-cover); font: 16px 'Noto Serif SC', serif; letter-spacing: .2em; }
.arrival-caption::before { content: '云 上 驿 站'; display: block; font-size: 11px; letter-spacing: .45em; margin-bottom: 18px; opacity: .65; }
#arrival-skip { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); padding: 11px 18px; border: 1px solid #82908688; background: #faf8efed; color: #42594e; font: 13px 'Noto Serif SC', serif; cursor: pointer; }
#arrival-skip:disabled { opacity: 0; pointer-events: none; }
#arrival-skip:focus-visible { outline: 2px solid #42594e; outline-offset: 4px; }
.landing-copy { transition: opacity .35s ease, transform .8s ease; }
.arrival-active .landing-copy { opacity: 0; transform: translateY(-10px); pointer-events: none; }
.arrival-active #world .topbar, .arrival-active #stage > :not(#three-layer), .arrival-active .world-sidebar { opacity: 0 !important; pointer-events: none !important; }
#world .topbar { transition: opacity .4s ease; }
@media (prefers-reduced-motion: reduce) { .arrival-cloud { transform: none; } .arrival-active .landing-copy { transform: none; } }