/* Native image playback uses the approved 12.1-second cycle, encoded once. */
.loading{padding:22px;min-height:260px;display:grid;place-items:center}
.loading-overlay{position:absolute;inset:0;padding:0;min-height:0;background:#fff;z-index:4;pointer-events:none}
.loading[hidden]{display:none!important}
.loading>.brand-assembly{display:block;width:min(420px,90%);pointer-events:none;animation:bl-reveal .12s ease-out .12s both}
.brand-assembly>picture{display:block}
.brand-roll-art{display:block;width:100%;height:auto;transform:translateZ(0);will-change:transform}
@keyframes bl-reveal{from{opacity:0}to{opacity:1}}
.brand-roll.is-still{animation:none!important}
.brand-roll.is-still .brand-roll-art,.loading[hidden] .brand-roll-art{will-change:auto;transform:none}
@media(prefers-reduced-motion:reduce){.brand-roll{animation:none!important}.brand-roll-art{will-change:auto;transform:none}}
.loading-startup{position:fixed;inset:0;display:grid;place-items:center;background:#fff;z-index:30}
.loading.loading-compact{min-height:72px;padding:0}
.loading.loading-compact>.brand-assembly{width:160px;max-width:100%}
.camera-live-preview>.loading-overlay{background:#172431}
.large-camera>.loading-overlay{background:#111c24;z-index:2}

/* Manual refresh uses the same loader without replacing the current view. */
.refresh-dock>span:has(>.loading){padding:0;width:168px;height:44px;overflow:hidden}
.refresh-dock .loading.loading-compact{position:relative;min-height:0;height:44px;width:100%;padding:0}
.refresh-dock .loading>.brand-assembly{position:absolute;left:50%;top:50%;width:220px;max-width:none;transform:translate(-50%,-50%)}

.startup-recovery{max-width:420px;padding:24px;color:#244469;font:14px/1.6 OpenSans,system-ui,sans-serif}.startup-recovery strong{font-size:22px}.startup-recovery form{margin-top:16px}