/* FPV loading route. The fill and flight layer share one composited transition. GPL-3.0-or-later. */
#loading { padding: 32px 16px; box-sizing: border-box; text-align: center; }
#loading .loading-stage { max-width: min(900px, 90vw); font-size: clamp(23px, 3vw, 44px); font-weight: 400; letter-spacing: .015em; line-height: 1.25; }
#loading .loading-subtitle { margin-top: 20px; color: #b1d4cd; font-size: clamp(15px, 2vw, 25px); line-height: 1.5; }
#loading .loading-route { position: relative; width: min(1040px, calc(100vw - clamp(144px, 22vw, 260px))); padding-top: clamp(126px, 14vw, 190px); margin-top: 10px; }
.loading-rail { position: relative; }
#loading .loading-track { width: 100%; height: 5px; margin: 0; border-radius: 8px; background: #344d3b80; box-shadow: inset 0 0 0 1px #73956a33; }
#loading .loading-fill { border-radius: inherit; background: linear-gradient(90deg, #bde992, #a1ef70); }
#loading .loading-sweep { opacity: .08; }
.loading-flight-path { position: absolute; top: 50%; left: 0; width: 100%; height: 0; transform: translateX(-100%); will-change: transform; pointer-events: none; }
.loading-flight-path::before { content: ''; position: absolute; right: 0; top: -4px; width: clamp(36px, 6vw, 64px); height: 8px; background: linear-gradient(90deg, transparent, #bbfa8f90); filter: blur(3px); }
.loading-flight-path::after { content: ''; position: absolute; left: 100%; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #eeffd5; box-shadow: 0 0 6px #c3ff93, 0 0 16px #a1ef7060; transform: translate(-50%, -50%); }
.loading-drone-marker { position: absolute; left: 100%; bottom: 14px; width: clamp(126px, 20vw, 270px); transform: translateX(-50%); }
.loading-drone-marker::after { content: ''; position: absolute; left: 50%; top: 100%; height: 14px; width: 1px; background: linear-gradient(transparent, #c5fca088); }
.loading-percent { display: block; height: 1.5em; overflow: hidden; color: #f3f4e9; font: 400 clamp(16px, 1.65vw, 23px)/1.5 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.loading-percent-strip { display: block; will-change: transform; }
.loading-percent-strip>span { display: block; height: 1.5em; line-height: 1.5em; }
.loading-craft { position: relative; width: 100%; animation: loading-hover 2.2s ease-in-out infinite; transform-origin: 50% 55%; }
.loading-drone { display: block; width: 100%; height: auto; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 7px #0005); }
.loading-rotors { position: absolute; left: 50%; top: 50%; height: 100%; width: auto; aspect-ratio: 3 / 2; max-width: 100%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.loading-rotor-plane { position: absolute; display: block; width: 25.2604%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(14deg) scaleY(.25); }
.loading-rotor-plane::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #b4f2d5; opacity: .035; }
.loading-rotor-spin { display: block; width: 100%; height: 100%; animation: loading-propeller .14s linear infinite; transform-origin: 50% 50%; will-change: transform; }
.loading-rotor-spin svg { display: block; width: 100%; height: 100%; overflow: visible; }
.loading-rotor-spin path { fill: #c7f4e5; opacity: .17; }
.loading-rotor-spin circle { fill: none; stroke: #c7f4e5; stroke-width: 7; stroke-dasharray: 108 445; opacity: .22; }
.loading-rotor-plane:nth-child(even) .loading-rotor-spin { animation-direction: reverse; animation-duration: .17s; }
.loading-craft::before { content: ''; position: absolute; left: -12%; top: 52%; width: 40%; height: 10%; background: linear-gradient(90deg, transparent, #9fe9cf22); filter: blur(5px); transform: rotate(10deg); opacity: .5; animation: loading-wake 1.1s ease-in-out infinite alternate; }
.loading-endpoints { display: flex; justify-content: space-between; margin-top: 12px; color: #88a595; font: 400 clamp(12px, 1.1vw, 15px)/1.5 system-ui, sans-serif; }
#loading .loading-meta { margin-top: 24px; justify-content: center; flex-wrap: wrap; max-width: 90vw; gap: 8px; color: #b1d4cd; font-size: clamp(12px, 1.65vw, 21px); letter-spacing: .025em; text-transform: none; }
.loading-status:not(:empty) + .loading-step:not(:empty)::before { content: '·'; margin-right: 8px; }
#loading .loading-elapsed { font-size: .75em; align-self: center; }
#loading .loading-message { max-width: 640px; margin-top: 16px; color: #ffaaa1; font-size: 15px; line-height: 1.5; }
#loading [hidden] { display: none; }
#loading:has(.loading-help:not([hidden])) { justify-content: safe center; overflow-y: auto; }
#loading:has(.loading-help:not([hidden])) .loading-route { padding-top: 24px; }
#loading:has(.loading-help:not([hidden])) .loading-flight-path { display: none; }
#loading.is-complete .loading-craft { animation: none; transform: none; }
#loading.is-complete .loading-craft::before { animation: none; opacity: 0; }
#loading.is-complete .loading-flight-path::after { box-shadow: 0 0 9px #c3ff93, 0 0 22px #a1ef7080; }
@keyframes loading-hover { 0%, 100% { transform: translateY(1px) rotate(-1deg); } 50% { transform: translateY(-3px) rotate(1deg); } }
@keyframes loading-propeller { to { transform: rotate(360deg); } }
@keyframes loading-wake { to { opacity: .85; transform: translateX(-4px) rotate(10deg); } }
@media (max-width: 520px) {
  #loading .loading-subtitle { margin-top: 12px; }
  #loading .loading-meta { margin-top: 20px; }
  .loading-drone { max-height: 96px; }
}
@media (max-height: 520px) {
  #loading { padding-block: 20px; }
  #loading .loading-stage { font-size: 23px; }
  #loading .loading-subtitle { margin-top: 6px; font-size: 15px; }
  #loading .loading-route { padding-top: 114px; margin-top: 0; }
  .loading-drone { max-height: 86px; }
  #loading .loading-meta { margin-top: 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-craft, .loading-rotor-spin, .loading-craft::before { animation: none; }
  .loading-rotors, .loading-craft::before { display: none; }
  .loading-flight-path::before { display: none; }
}