/* ============================================================
   DC Group - Travel Loader
   ============================================================ */
#dc-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: linear-gradient(180deg,
    #0a1628 0%,
    #1a3a6b 25%,
    #2e6db4 55%,
    #87ceeb 80%,
    #c8e8f5 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#dc-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Stars ---------- */
.loader-stars {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 45%;
  pointer-events: none;
}
.loader-star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: starTwinkle 2s infinite alternate;
}
@keyframes starTwinkle {
  from { opacity: 0.15; transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.6); }
}

/* ---------- Sun ---------- */
.loader-sun {
  position: absolute;
  top: 10%; right: 12%;
  width: 65px; height: 65px;
  background: radial-gradient(circle, #ffe566 40%, #ffb300 100%);
  border-radius: 50%;
  box-shadow: 0 0 50px 20px rgba(255,210,0,0.4);
  animation: sunPulse 4s ease-in-out infinite;
}
@keyframes sunPulse {
  0%,100% { box-shadow: 0 0 50px 20px rgba(255,210,0,0.4); }
  50%      { box-shadow: 0 0 70px 30px rgba(255,210,0,0.6); }
}

/* ---------- Clouds ---------- */
.loader-cloud {
  position: absolute;
  background: rgba(255,255,255,0.9);
  border-radius: 50px;
  animation: cloudDrift linear infinite;
}
.loader-cloud::before,
.loader-cloud::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
}

/* Cloud 1 - big, top */
.cloud-1 {
  width: 180px; height: 50px;
  top: 15%; left: -200px;
  animation-duration: 22s;
  animation-delay: 0s;
}
.cloud-1::before { width: 90px; height: 80px; top: -40px; left: 22px; }
.cloud-1::after  { width: 70px; height: 60px; top: -28px; left: 80px; }

/* Cloud 2 - small, mid */
.cloud-2 {
  width: 90px; height: 28px;
  top: 30%; left: -110px;
  animation-duration: 28s;
  animation-delay: 5s;
  opacity: 0.75;
}
.cloud-2::before { width: 45px; height: 42px; top: -22px; left: 12px; }
.cloud-2::after  { width: 35px; height: 32px; top: -16px; left: 42px; }

/* Cloud 3 - big, lower */
.cloud-3 {
  width: 220px; height: 60px;
  top: 42%; left: -240px;
  animation-duration: 35s;
  animation-delay: 10s;
  opacity: 0.65;
}
.cloud-3::before { width: 110px; height: 95px; top: -48px; left: 28px; }
.cloud-3::after  { width: 80px;  height: 70px; top: -34px; left: 100px; }

/* Cloud 4 - tiny */
.cloud-4 {
  width: 70px; height: 22px;
  top: 22%; left: -90px;
  animation-duration: 18s;
  animation-delay: 2s;
  opacity: 0.55;
}
.cloud-4::before { width: 36px; height: 34px; top: -18px; left: 10px; }
.cloud-4::after  { width: 28px; height: 26px; top: -12px; left: 34px; }

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 260px)); }
}

/* ---------- Plane Wrapper ---------- */
.loader-plane-wrap {
  position: relative;
  width: 100%;
  height: 90px;
  margin-bottom: 28px;
  overflow: hidden;
}

/* ---------- Plane SVG ---------- */
.loader-plane {
  position: absolute;
  top: 50%;
  width: 120px;
  transform: translateY(-50%);
  filter: drop-shadow(0 6px 18px rgba(0,60,180,0.3));
  animation: planeFlyAcross 4s ease-in-out forwards;
}

@keyframes planeFlyAcross {
  0%   { left: -140px; top: 75%; transform: translateY(-50%) rotate(0deg);   }
  30%  { left: 25%;    top: 55%; transform: translateY(-50%) rotate(-10deg); }
  60%  { left: 55%;    top: 35%; transform: translateY(-50%) rotate(-6deg);  }
  100% { left: 110%;   top: 15%; transform: translateY(-50%) rotate(-3deg);  }
}

/* ---------- Exhaust Trail ---------- */
.loader-trail {
  position: absolute;
  top: 60%; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  animation: trailGrow 4s ease forwards;
}
@keyframes trailGrow {
  0%   { width: 0;   opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { width: 60%; opacity: 0; }
}

/* ---------- Brand ---------- */
.loader-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: brandFadeIn 0.8s ease 0.4s both;
}
@keyframes brandFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loader-logo {
  width: 80px;
  filter: drop-shadow(0 3px 12px rgba(0,0,0,0.25)) brightness(0) invert(1);
}

/* ---------- Tagline + Dots ---------- */
.loader-tagline {
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 2px;
}
.loader-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: dotBlink 1.2s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dot:nth-child(3) { animation-delay: 0.4s; }
.loader-dot:nth-child(4) { animation-delay: 0.6s; }

@keyframes dotBlink {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40%            { opacity: 1;   transform: scale(1.3); }
}

/* ---------- Progress Bar ---------- */
.loader-progress-wrap {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.2);
  border-radius: 3px;
  overflow: hidden;
}
.loader-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.5), #fff);
  border-radius: 3px;
  animation: progressFill 3.5s ease forwards 0.2s;
}
@keyframes progressFill {
  from { width: 0; }
  to   { width: 100%; }
}