/* ==========================================================================
   QZL CINEMATIC TACTICAL PRELOADER / LOADING SCREEN
   High-Tech Aerospace Telemetry Boot Sequence
   ========================================================================== */

html.qzl-skip-preloader #qzl-preloader {
  display: none !important;
}

html, body {
  background-color: #020306 !important;
}

#qzl-preloader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: #020306;
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #ffffff;
  font-family: 'Space Grotesk', -apple-system, sans-serif;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), 
              visibility 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  will-change: opacity, transform;
}

#qzl-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  pointer-events: none;
}

/* Background Cybernetic Grid & Glow */
.preloader-bg-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center center;
  opacity: 0.6;
  pointer-events: none;
}

.preloader-ambient-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  animation: qzlPulseGlow 3s ease-in-out infinite alternate;
}

@keyframes qzlPulseGlow {
  0% { transform: scale(0.92); opacity: 0.4; }
  100% { transform: scale(1.1); opacity: 0.85; }
}

/* Scanline Effect */
.preloader-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  animation: qzlScanline 2.8s linear infinite;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes qzlScanline {
  0% { top: -2%; }
  100% { top: 102%; }
}

/* Main Preloader Hub Container */
.preloader-hub {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
  max-width: 460px;
  padding: 32px 28px;
  background: rgba(8, 10, 15, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.2);
}

/* Corner Reticle Accents */
.preloader-corner {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(255, 255, 255, 0.5);
  border-style: solid;
  pointer-events: none;
}
.preloader-corner-tl { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.preloader-corner-tr { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.preloader-corner-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.preloader-corner-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Rotating Radar / Emblem Stage */
.preloader-radar-stage {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.preloader-ring-outer {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  animation: qzlRotateClockwise 12s linear infinite;
}

.preloader-ring-inner {
  position: absolute;
  inset: 10px;
  border: 1px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.85);
  border-right-color: rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  animation: qzlRotateCounter 4s cubic-bezier(0.55, 0.085, 0.68, 0.53) infinite;
}

@keyframes qzlRotateClockwise {
  100% { transform: rotate(360deg); }
}

@keyframes qzlRotateCounter {
  100% { transform: rotate(-360deg); }
}

.preloader-logo-img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
  z-index: 2;
}

/* Header & Telemetry */
.preloader-brand-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  letter-spacing: 0.18em;
  color: #ffffff;
  margin: 0 0 4px;
  text-align: center;
  line-height: 1;
}

.preloader-brand-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  margin-bottom: 24px;
  text-align: center;
}

/* Progress Section */
.preloader-progress-wrap {
  width: 100%;
  margin-bottom: 18px;
}

.preloader-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.preloader-status-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
}

.preloader-counter {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.preloader-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.preloader-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.85) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  transition: width 0.12s linear;
}

/* Dynamic Live Status Feed */
.preloader-feed-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.preloader-feed-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00ff66;
  box-shadow: 0 0 8px #00ff66;
  flex-shrink: 0;
  animation: qzlPulseDot 1.4s infinite;
}

@keyframes qzlPulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.preloader-feed-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Dismiss / Skip hint */
.preloader-skip-hint {
  margin-top: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.3);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s;
}

.preloader-skip-hint:hover {
  color: rgba(255, 255, 255, 0.7);
}

/* Fast-Page-Transition Class (applied on repeated navigations) */
#qzl-preloader.fast-transition {
  transition: opacity 0.25s ease, transform 0.3s ease;
}