/* ═══════════════════════════════════════════════════
   8Kings Express – Lorry Preloader Animation
   Shared across landing, auth, and dashboard layouts
   ═══════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────── */
#ae-preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #1a2530;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

#ae-preloader.ae-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Scene (road + truck) ────────────────────────────── */
.ae-scene {
  position: relative;
  width: min(90vw, 420px);
  height: 106px;
  overflow: hidden;
}

/* ── Road ────────────────────────────────────────────── */
.ae-road {
  position: absolute;
  bottom: 0;
  left: -20px; right: -20px;
  height: 22px;
  background: #252e3b;
  border-top: 2px solid #3c414c;
}

/* Scrolling road markings – creates forward-motion illusion */
.ae-road::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(
    90deg,
    #eeba00 0, #eeba00 26px,
    transparent 26px, transparent 52px
  );
  animation: ae-road-scroll 0.55s linear infinite;
}

@keyframes ae-road-scroll {
  from { background-position: 0 0; }
  to   { background-position: 52px 0; }
}

/* ── Truck container ─────────────────────────────────── */
.ae-truck {
  position: absolute;
  bottom: 20px;
  left: -300px;
  display: flex;
  align-items: flex-end;
  animation: ae-truck-arrive 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s both;
}

@keyframes ae-truck-arrive {
  to { left: 18px; }
}

/* ── Trailer ─────────────────────────────────────────── */
.ae-trailer {
  position: relative;
  width: 178px;
  height: 62px;
  background: linear-gradient(175deg, #f5c800 0%, #eeba00 45%, #d4a800 100%);
  border-radius: 3px 0 0 3px;
  border: 1.5px solid #c09000;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.18),
              inset 0 -3px 0 rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Panel ribs on trailer */
.ae-trailer::before,
.ae-trailer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1.5px;
  background: rgba(0,0,0,.12);
}
.ae-trailer::before { left: 60px; }
.ae-trailer::after  { left: 119px; }

/* Trailer brand text */
.ae-trailer-text {
  font-family: 'Arial Black', 'Impact', Arial, sans-serif;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 3px;
  color: rgba(26, 37, 48, 0.85);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
}

/* Trailer coupler */
.ae-coupler {
  width: 8px;
  height: 16px;
  background: #a07800;
  border-radius: 0 2px 2px 0;
  border-left: 1.5px solid #8a6400;
  flex-shrink: 0;
}

/* ── Cab ─────────────────────────────────────────────── */
.ae-cab {
  position: relative;
  width: 60px;
  height: 76px;
  background: linear-gradient(175deg, #505666 0%, #3c414c 100%);
  border-radius: 2px 10px 0 0;
  border: 1.5px solid #2a2e38;
  border-left: none;
  flex-shrink: 0;
}

/* Cab roof overhang */
.ae-cab::before {
  content: '';
  position: absolute;
  top: -2px; left: -8px; right: 0;
  height: 10px;
  background: #3c414c;
  border-radius: 2px 6px 0 0;
  border: 1.5px solid #2a2e38;
  border-bottom: none;
}

/* Windshield */
.ae-windshield {
  position: absolute;
  top: 10px; left: 6px; right: 6px;
  height: 26px;
  background: linear-gradient(135deg, #aae0f5 0%, #5cb9e2 60%, #4aa8d2 100%);
  border-radius: 2px 6px 2px 2px;
  border: 1px solid #3a8ab5;
}

/* Reflection on windshield */
.ae-windshield::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 8px; height: 14px;
  background: rgba(255,255,255,.3);
  border-radius: 1px;
  transform: rotate(-10deg);
}

/* Grille */
.ae-grille {
  position: absolute;
  bottom: 8px; left: 6px; right: 8px;
  height: 15px;
  background: #1a1e26;
  border-radius: 2px;
  overflow: hidden;
}

.ae-grille::before {
  content: '';
  position: absolute;
  top: 3px; left: 2px; right: 2px;
  height: 2px;
  background: #3c414c;
  box-shadow: 0 4px 0 #3c414c, 0 8px 0 #3c414c;
}

/* Headlight */
.ae-headlight {
  position: absolute;
  right: -7px; bottom: 15px;
  width: 8px; height: 11px;
  background: linear-gradient(90deg, #fff9e6, #fffde7);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 12px 5px rgba(255,252,200,.65),
              20px 2px 35px 12px rgba(255,252,200,.12);
}

/* ── Exhaust stack ───────────────────────────────────── */
.ae-exhaust {
  position: absolute;
  top: -28px;
  left: 9px;
  width: 6px;
  height: 28px;
  background: linear-gradient(90deg, #2a2e38, #333);
  border-radius: 2px 2px 0 0;
}

.ae-puff {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(180,180,180,.5);
}

.ae-puff:nth-child(1) { width: 8px;  height: 8px;  animation: ae-puff 1.5s ease-out infinite 0s; }
.ae-puff:nth-child(2) { width: 11px; height: 11px; animation: ae-puff 1.5s ease-out infinite .5s; }
.ae-puff:nth-child(3) { width: 9px;  height: 9px;  animation: ae-puff 1.5s ease-out infinite 1s; }

@keyframes ae-puff {
  0%   { top: -8px;  opacity: .75; transform: translateX(-50%) scale(.6); }
  100% { top: -40px; opacity: 0;   transform: translateX(-50%) scale(2.8); }
}

/* ── Wheels ──────────────────────────────────────────── */
.ae-trailer-wheels {
  position: absolute;
  bottom: -13px;
  left: 16px; right: 12px;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
}

.ae-cab-wheel-wrap {
  position: absolute;
  bottom: -13px;
  right: 8px;
}

.ae-wheel {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #1c1c1c;
  border: 3px solid #454545;
  position: relative;
  animation: ae-wheel-spin .55s linear infinite;
  flex-shrink: 0;
}

/* Wheel inner hub */
.ae-wheel::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #2a2a2a;
  border: 1.5px solid #555;
}

/* Wheel cross spokes */
.ae-wheel::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #555 28%, transparent 28%);
  border-top: 1.5px solid #555;
  border-bottom: 1.5px solid #555;
}

.ae-wheel.sm { width: 20px; height: 20px; }

@keyframes ae-wheel-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Brand text block (below scene) ─────────────────── */
.ae-preloader-brand {
  margin-top: 28px;
  text-align: center;
  user-select: none;
}

.ae-preloader-brand h2 {
  font-family: 'Arial Black', Impact, Arial, sans-serif;
  font-size: 20px;
  letter-spacing: 5px;
  font-weight: 900;
  color: #eeba00;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.ae-preloader-brand p {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.35);
  text-transform: uppercase;
  margin: 0;
}

/* ── Loading dots ────────────────────────────────────── */
.ae-loading-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 18px;
}

.ae-loading-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #eeba00;
  animation: ae-dot-pulse 1.3s ease-in-out infinite;
}

.ae-loading-dots span:nth-child(2) { animation-delay: .22s; }
.ae-loading-dots span:nth-child(3) { animation-delay: .44s; }

@keyframes ae-dot-pulse {
  0%, 80%, 100% { transform: scale(.45); opacity: .25; }
  40%            { transform: scale(1);   opacity: 1; }
}