/* One transition surface, with smaller indicators for network and artwork waits. */
#uiLoading { isolation: isolate; overflow: hidden; outline: none; }
#uiLoading::backdrop { background: transparent; }
#uiLoading .loading-curtain { position: absolute; inset: -20% -35%; background: #941b2d; transform: skewX(-25deg); }
#uiLoading[data-mode="boot"] .loading-curtain { display: none; }
#uiLoading[data-mode="navigation"] { background: transparent; }
#uiLoading[data-mode="navigation"] .loading-content { background: transparent; }
#uiLoading[data-mode="navigation"] img { width: 240px; height: 90px; }
#uiLoading .loading-content { padding: 20px; transition: opacity 100ms; }
#uiLoading[data-state="entering"] .loading-content,
#uiLoading[data-state="leaving"] .loading-content { opacity: 0; pointer-events: none; }
#uiLoading #loadingLabel { font-size: 18px; letter-spacing: 0; }
#uiLoading #loadingDismiss { min-height: 40px; padding: 8px 24px; border: 1px solid #fff0d6; border-radius: 3px; background: #19191d; color: #fff0d6; font: 14px system-ui, sans-serif; cursor: pointer; }
#uiLoading #loadingDismiss[hidden], #uiLoading #loadingReload[hidden] { display: none; }
#uiLoading[data-state="error"] .loading-spinner { display: none; }
#uiLoading #loadingReload { font: 13px system-ui, sans-serif; padding: 8px; }
.loading-spinner { display: inline-block; flex: none; width: 22px; height: 22px; border: 2px solid #fff0d640; border-top-color: #fff0d6; border-radius: 50%; animation: crown-loading-spin 800ms linear infinite; }
#networkLoading { position: fixed; z-index: 100001; bottom: max(18px, env(safe-area-inset-bottom)); right: max(18px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 12px; max-width: min(340px, 85vw); padding: 12px 18px; border-left: 4px solid #cf1735; background: #18181ef5; color: #fff0d6; font: 14px/1.5 system-ui, sans-serif; pointer-events: none; }
#networkLoading[hidden] { display: none; }
#networkLoading[aria-busy="false"] .loading-spinner { display: none; }
.crown-image-host { position: relative; }
.crown-image-status { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 8px; background: #22161fed; color: #fff0d6; font: 12px/1.4 system-ui, sans-serif; pointer-events: none; text-align: center; }
.crown-image-status[hidden] { display: none; }
.crown-image-status.is-error .loading-spinner { display: none; }
.crown-image-host > img.crown-image-pending { opacity: 0; }
html.crown-transitions #onlineOverlay.palace-online .palace-transition { display: none !important; }
@keyframes crown-loading-spin { to { transform: rotate(360deg); } }
@media (max-height: 480px) {
  #uiLoading .loading-content { gap: 10px; }
  #uiLoading img { height: 90px; width: 280px; }
  #networkLoading { padding: 8px 12px; bottom: 8px; right: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .loading-spinner { animation: none; border-top-color: #e94560; } }
.salon-reduced-motion .loading-spinner { animation: none; border-top-color: #e94560; }

/* The invitation layers leave together before the lining exposes the destination. */
#uiLoading { --invitation-progress: 0%; }
#uiLoading .invitation-scene, #loadingProgress { display: none; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) { background: transparent; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) .invitation-scene { display: block; position: absolute; inset: 0; perspective: 1400px; overflow: hidden; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) .loading-curtain { display: none; }
#uiLoading .invitation-lining { position: absolute; inset: 0; background: #941b2d; }
#uiLoading .invitation-paper { position: absolute; inset: 0; background: #19191b url('./assets/ui/invitation/envelope.webp') center / 100% 100% no-repeat; }
#uiLoading .invitation-top { clip-path: polygon(0 0,100% 0,100% 1%,50% 67%,0 1%); transform-origin: center top; backface-visibility: hidden; }
#uiLoading .invitation-bottom { clip-path: polygon(0 0,50% 66.8%,100% 0,100% 100%,0 100%); }
#uiLoading .invitation-identity { position: absolute; top: 14%; left: 50%; width: min(590px,48%); transform: translateX(-50%); }
#uiLoading .invitation-identity img { display: block; width: 100%; height: auto; }
#uiLoading .invitation-base { filter: grayscale(1) brightness(.17); }
#uiLoading .invitation-lit { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--invitation-progress)) 0 0); }
#uiLoading .invitation-seal { position: absolute; top: 66%; left: 50%; width: min(234px,25vh); aspect-ratio: 1; transform: translate(-50%,-50%); }
#uiLoading .invitation-seal > div { position: absolute; inset: 0; }
#uiLoading .invitation-seal img { display: block; position: absolute; width: 100%; height: 100%; object-fit: contain; }
#uiLoading .invitation-seal .invitation-base { filter: saturate(.65) brightness(.45); }
#uiLoading .invitation-left { clip-path: polygon(0 0,52% 0,46% 24%,56% 43%,45% 61%,52% 78%,47% 100%,0 100%); }
#uiLoading .invitation-right { clip-path: polygon(52% 0,100% 0,100% 100%,47% 100%,52% 78%,45% 61%,56% 43%,46% 24%); }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) #loadingProgress { display: block; position: absolute; top: 83%; left: 50%; transform: translateX(-50%); font: 36px/1 Georgia,serif; font-variant-numeric: tabular-nums; }
#loadingProgress small { font-size: 13px; margin-left: 5px; color: #b7a17a; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) .loading-content { inset: 89% 0 auto; padding: 0 16px; gap: 8px; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) .loading-content > img,
#uiLoading:is([data-mode="boot"], [data-mode="long"]) .loading-content > .loading-spinner { display: none; }
#uiLoading:is([data-mode="boot"], [data-mode="long"]) #loadingLabel { font: 12px/1.4 system-ui,sans-serif; color: #b8aa95; font-weight: 400; }
#uiLoading #loadingReload { position: fixed; top: 16px; right: 20px; }
#uiLoading[data-state="lining"] .invitation-scene > :not(.invitation-lining),
#uiLoading[data-state="lining"] #loadingProgress,
#uiLoading[data-state="lining"] .loading-content { visibility: hidden; }
#uiLoading[data-state="error"] #loadingProgress { display: none; }
@media (max-height: 550px) {
  #uiLoading .invitation-identity { top: 11%; width: min(360px,42%); }
  #uiLoading:is([data-mode="boot"], [data-mode="long"]) #loadingProgress { font-size: 24px; }
  #uiLoading:is([data-mode="boot"], [data-mode="long"]) .loading-content { top: 91%; }
}