/* The entrance screen (owner 29.10, «Загрузка · А · Арт проявляется», screens.ts loading()): the menu's art and title (table.css .km-*),
   a tip on the left, a thin brass line with what is going on at the bottom. The art fades in once loaded; at the end only the tip and the
   line fade, so the menu appears around the same title. Only opacity/transform move. */
.loading-screen .km-art { opacity: 0; transition: opacity .6s ease; }
.loading-screen.ld-lit .km-art { opacity: 1; }
.ld-tip { position: absolute; left: 120px; top: 420px; width: 560px; display: flex; flex-direction: column; gap: 16px; animation: ld-in .25s ease backwards; }
.ld-cap, .ld-what { font: var(--fw-semi) 16px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--c-accent-2); }
.ld-tip p { margin: 0; font: italic var(--fw-med) 34px/1.3 var(--font-display); color: var(--c-ink); text-shadow: 0 3px 12px rgba(var(--c-shadow-rgb), .9); }
.ld-foot { position: absolute; left: 120px; right: 120px; bottom: 96px; display: flex; flex-direction: column; gap: 14px; }
.ld-status { display: flex; align-items: baseline; gap: 14px; }
.ld-what { color: var(--c-ink); }
.ld-net { font: var(--fw-med) 16px/1 var(--font-body); color: var(--km-sub); }
.ld-bar { position: relative; height: 2px; overflow: hidden; background: rgba(var(--c-ink-rgb), .14); }
.ld-fill { height: 100%; background: linear-gradient(90deg, var(--c-accent-lo), var(--c-gold)); transform-origin: left center; animation: ld-fill 1.2s cubic-bezier(.3, .6, .3, 1) forwards; }
.ld-sw { position: absolute; top: 0; bottom: 0; left: 0; width: 22%; background: linear-gradient(90deg, rgba(var(--t-hi-1-rgb), 0), rgba(var(--t-hi-1-rgb), .9), rgba(var(--t-hi-1-rgb), 0)); animation: ld-sweep 1.6s ease-in-out infinite; }
.ld-full .ld-fill { animation: none; }
.ld-tip, .ld-foot { transition: opacity .35s ease; }
.loading-screen.ld-out .ld-tip, .loading-screen.ld-out .ld-foot { opacity: 0; }
@keyframes ld-fill { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
@keyframes ld-sweep { from { transform: translateX(-100%); } to { transform: translateX(560%); } }
@keyframes ld-in { from { opacity: 0; transform: translateY(8px); } }
html[data-fx="off"] .ld-sw { display: none; }