/* The page loader (#boot) and the Cyber loading screen (#loader). */

/* page loader: the Burj Al Arab line icon builds itself: the ground line spreads out from the middle, then the
   building rises out of it from the ground up behind a glowing scan line, floor by floor (about 1.7 s); then it gently
   breathes until the page is ready. It stays until both the build has finished and the 3D scene has drawn
   (bootDone()). Every animation here is a transform or opacity animation on its own element: the browser runs those
   off the main thread, so they keep moving smoothly while the 3D scene is built and its shaders compile (line-drawing
   animations of the SVG itself would freeze then). The rise is a window sliding up (.ab-bi-rise) with the drawing slid
   the other way inside it (.ab-bi-rise-in), so the drawing stays put while more of it shows. */
#boot {
  position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(120% 90% at 50% 42%, #14294b 0%, #0a1426 58%, #060b16 100%);
  transition: opacity 0.6s ease, visibility 0.6s;
}
#boot.ab-done { opacity: 0; visibility: hidden; }
.ab-burj-icon { width: min(140px, 34vw); aspect-ratio: 250 / 360; animation: bi-breathe 1.6s ease-in-out 2.1s infinite alternate; }
.ab-burj-icon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-burj-icon path { fill: none; stroke: #d9b25a; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.ab-burj-icon .ab-fl { stroke-width: 2.8; }
.ab-bi-ground, .ab-bi-rise, .ab-bi-rise-in, .ab-bi-scan { position: absolute; inset: 0; }
.ab-bi-ground { transform: scaleX(0); animation: bi-spread 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.ab-bi-rise { overflow: hidden; transform: translateY(100%); animation: bi-rise 1.3s cubic-bezier(0.45, 0, 0.3, 1) 0.3s forwards; }
.ab-bi-rise-in { transform: translateY(-100%); animation: bi-rise 1.3s cubic-bezier(0.45, 0, 0.3, 1) 0.3s forwards; }
.ab-bi-scan {
  transform: translateY(100%);
  animation: bi-rise 1.3s cubic-bezier(0.45, 0, 0.3, 1) 0.3s forwards, bi-fade 0.25s ease-out 1.6s forwards;
}
.ab-bi-scan i {
  position: absolute; top: -1px; left: 22%; width: 50%; height: 2px; border-radius: 1px;
  background: #f6dc95; box-shadow: 0 0 8px 1px rgba(246, 220, 149, 0.85);
}
#boot .ab-name { margin: 4px 0 0; padding-left: 0.42em; font: 500 13px/1 var(--sans); letter-spacing: 0.42em; text-transform: uppercase; color: #ead9ae; }
#boot .ab-msg { margin: 0; white-space: nowrap; font: 400 11px/1 var(--mono); letter-spacing: 0.06em; color: rgba(234, 217, 174, 0.62); }
#boot .ab-msg b { display: inline-block; font-weight: inherit; opacity: 0.15; animation: bi-dot 1.2s ease-in-out infinite; }
#boot .ab-msg b:nth-child(2) { animation-delay: 0.2s; }
#boot .ab-msg b:nth-child(3) { animation-delay: 0.4s; }
@keyframes bi-spread { to { transform: scaleX(1); } }
@keyframes bi-rise { to { transform: translateY(0); } }
@keyframes bi-fade { to { opacity: 0; } }
@keyframes bi-breathe { to { opacity: 0.7; } }
@keyframes bi-dot { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ab-burj-icon, .ab-bi-ground, .ab-bi-rise, .ab-bi-rise-in, #boot .ab-msg b { animation: none; transform: none; opacity: 1; }
  .ab-bi-scan { display: none; }
  #loader .ab-bar i, #loader .ab-steps span { animation: none; transform: none; opacity: 1; }
}

/* Cyber loading screen ("establishing connection"): the same Burj Al Arab build in neon cyan (copied in from #boot),
   a progress bar and its 0-100 steps (about 1.7 s). Shown when switching to Cyber mode, and as the page loader when the
   page is reloaded in Cyber mode (html.ab-cyber-boot, set in <head>); it fades once the build and bar have finished
   (loaderDrawn / hideLoader). Like #boot, only transform and opacity animations, so nothing stalls while the 3D scene
   is built. */
#loader {
  position: fixed; inset: 0; z-index: 30; display: none; place-content: center; text-align: center; gap: 22px;
  background: #02050a; color: #bff7ff; font-family: "Share Tech Mono", monospace; transition: opacity 0.6s ease, visibility 0.6s;
}
#loader.ab-on, html.ab-cyber-boot #loader { display: grid; }
html.ab-cyber-boot #boot { display: none; }
#loader.ab-done { opacity: 0; visibility: hidden; }
#loader .ab-burj-icon { width: min(120px, 30vw); margin: 0 auto 6px; filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.65)); }
#loader .ab-burj-icon path { stroke: #00e5ff; }
#loader .ab-bi-scan i { background: #b5f8ff; box-shadow: 0 0 8px 1px rgba(0, 229, 255, 0.9); }
#loader h2 { margin: 0; font: 500 clamp(16px, 2vw, 22px)/1.2 "Orbitron", sans-serif; letter-spacing: 0.35em; color: #00e5ff; text-shadow: 0 0 14px rgba(0,229,255,0.7); }
#loader .ab-bar { width: min(380px, 80vw); height: 2px; background: rgba(0,229,255,0.15); margin: 0 auto; position: relative; overflow: hidden; }
#loader .ab-bar i {
  position: absolute; inset: 0; background: #00e5ff; box-shadow: 0 0 10px #00e5ff;
  transform: scaleX(0); transform-origin: left; animation: cy-fill 1.5s cubic-bezier(0.35, 0, 0.25, 1) 0.2s forwards;
}
#loader .ab-steps { display: flex; justify-content: space-between; width: min(380px, 80vw); margin: 0 auto; font-size: 11px; color: #00e5ff; }
#loader .ab-steps span { opacity: 0.35; animation: cy-step 0.15s linear var(--d, 0s) forwards; }
@keyframes cy-fill { to { transform: scaleX(1); } }
@keyframes cy-step { to { opacity: 1; } }
@media (max-width: 760px) {
  #hudCtrl { display: none !important; }   /* phones: Telemetry is a bottom row instead (see css/modes.css) */
}