/* OMS loading screen (index.html, outside #app): it shows while the app downloads and starts, and fades
   out once the first page is on screen. Generated from the OMS login proposal (source/export-app.mjs). */

.ol { position: fixed; inset: 0; z-index: 1003; display: grid; place-items: center; overflow: hidden; color: #fff; font-family: var(--len-sans, 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif); background: radial-gradient(520px 520px at 0 0, rgba(29,172,228,.18), transparent 75%), radial-gradient(560px 560px at 100% 100%, rgba(42,93,181,.26), transparent 75%), radial-gradient(1100px 680px at 50% 40%, #164384 0%, rgba(22,67,132,0) 62%), linear-gradient(180deg, #0b2347 0%, #071833 100%); transition: opacity .3s ease, visibility .3s; }
.ol *, .ol *::before, .ol *::after { box-sizing: border-box; }
.ol.is-done { opacity: 0; visibility: hidden; }
.ol [hidden] { display: none !important; }
.ol-center { position: relative; display: flex; flex-direction: column; align-items: center; padding: 24px; text-align: center; }
.ol-badge { position: relative; width: 128px; height: 128px; margin-bottom: 24px; }
.ol { --ol-loop: 3.2s; }
.ol-glow { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(closest-side, rgba(29,172,228,.42), rgba(29,172,228,0)); animation: oms-ol-glow var(--ol-loop, 2.8s) ease-in-out infinite; will-change: opacity; }
.ol-tile { position: relative; width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 26px 50px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.08); }
.ol-tile .omark { display: block; width: 128px; height: 128px; }
@keyframes oms-ol-glow { 0%, 100% { opacity: .65; } 42% { opacity: 1; } }
.ol-word { display: block; width: 138px; height: auto; margin-bottom: 16px; }
.ol-cap { min-height: 20px; margin: 0 0 14px; font-size: 13px; color: rgba(255,255,255,.74); transition: opacity .25s; }
.ol-meter { display: flex; align-items: center; gap: 10px; margin-left: 46px; }
.ol-track { position: relative; width: 168px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.14); }
.ol-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #1dace4, #7dd3fc); transform-origin: 0 50%; transform: scaleX(0); transition: transform .32s linear; will-change: transform; }
.ol-spark { position: absolute; left: -100%; top: 0; width: 100%; height: 100%; transform: translate3d(0,0,0); transition: transform .32s linear; will-change: transform; pointer-events: none; }
.ol-spark::after { content: ''; position: absolute; right: -6px; top: -4px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(125,211,252,.55) 50%, rgba(125,211,252,0)); }
.ol-pct { width: 36px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: left; color: rgba(255,255,255,.74); }
.ol-slow { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.82); animation: oms-ol-in .4s ease both; }
.ol-slow button { height: 34px; padding: 0 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; background: rgba(255,255,255,.08); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ol-slow button:hover { background: rgba(255,255,255,.16); }
.ol-slow button:focus-visible { outline: 2px solid #7dd3fc; outline-offset: 2px; }
@keyframes oms-ol-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Only HTML transforms/opacity animate in the picked loader. SVG geometry stays cached. */
.ol-mark { position: relative; overflow: hidden; border-radius: 22%; isolation: isolate; }
.ol-mark > .omark, .ol-truck-motion { position: absolute; inset: 0; width: 100%; height: 100%; }
.ol-truck-motion { transform-origin: 34% 65%; animation: oms-ol-truck-drive 3.2s infinite; will-change: transform; }
.ol-channel { position: absolute; left: 8.9%; width: 6.2%; height: 6.2%; border-radius: 50%; background: #b9ecff; opacity: 0; animation: oms-ol-channel 3.2s infinite; will-change: opacity; }
.ol-channel-1 { top: 31.7%; }
.ol-channel-2 { top: 40.3%; animation-delay: .14s; }
.ol-channel-3 { top: 48.9%; animation-delay: .28s; }
@keyframes oms-ol-truck-drive { 0% { transform: translate3d(-75%,0,0) rotate(0deg); animation-timing-function: cubic-bezier(.15,.65,.25,1); } 28% { transform: translate3d(0,0,0) rotate(0deg); } 32% { transform: translate3d(0,0,0) rotate(1.5deg); } 38%, 64% { transform: translate3d(0,0,0) rotate(0deg); animation-timing-function: cubic-bezier(.5,0,.85,.4); } 90%, 100% { transform: translate3d(110%,0,0) rotate(0deg); } }
@keyframes oms-ol-channel { 0%, 35%, 48%, 100% { opacity: 0; } 40% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ol *, .ol *::before, .ol *::after { animation: none !important; }
  .ol, .ol *, .ol *::before, .ol *::after { transition: none !important; }
  .ol-glow, .ol-truck-motion, .ol-channel, .ol-fill, .ol-spark { will-change: auto; }
}
.ol.is-paused *, .ol.is-paused *::before, .ol.is-paused *::after { animation-play-state: paused !important; }