/* Cinematic Full-Screen Preloader Styles */
.preloader-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #f0f9ff 0%, #e0f2fe 55%, #bae6fd 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.preloader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Atmospheric elements */
.preloader-sky-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.preloader-cloud {
  position: absolute;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 85%);
  border-radius: 50%;
  filter: blur(25px);
  pointer-events: none;
  opacity: 0.65;
}

.preloader-cloud-1 {
  width: 650px;
  height: 380px;
  top: -60px;
  left: -220px;
  animation: preloaderDriftRight 90s ease-in-out infinite alternate;
}

.preloader-cloud-2 {
  width: 750px;
  height: 420px;
  bottom: -110px;
  right: -260px;
  animation: preloaderDriftLeft 110s ease-in-out infinite alternate;
}

.preloader-glow {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14) 0%, rgba(27, 79, 216, 0.06) 45%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
  z-index: 2;
  animation: preloaderGlowBreath 10s ease-in-out infinite alternate;
}

@keyframes preloaderDriftRight {
  0% { transform: translate(0, 0); }
  100% { transform: translate(250px, 40px); }
}

@keyframes preloaderDriftLeft {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-280px, -50px); }
}

@keyframes preloaderGlowBreath {
  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* Shipping Container dropping in */
.preloader-container-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  width: min(480px, 85vw);
  z-index: 5;
  pointer-events: none;
}

.preloader-container-wrap img {
  width: 100%;
  display: block;
  filter: drop-shadow(0 32px 48px rgba(10, 22, 40, 0.26));
}

.preloader-container-wrap.dropped {
  animation: preloaderDrop 1.1s cubic-bezier(0.3, 0.05, 0.2, 1) forwards, preloaderSwing 6s ease-in-out infinite alternate 1.1s;
}

.preloader-container-wrap.exit-right {
  transform: translate(95vw, -22%) rotate(5deg);
  opacity: 0;
  transition: transform 1.0s cubic-bezier(0.25, 1, 0.25, 1), opacity 1.0s cubic-bezier(0.25, 1, 0.25, 1);
}

@keyframes preloaderDrop {
  0% {
    transform: translate(-50%, -120%) rotate(0deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -22%) rotate(-1.5deg);
    opacity: 1;
  }
}

@keyframes preloaderSwing {
  0% {
    transform: translate(-50%, -22%) rotate(-1.5deg);
  }
  100% {
    transform: translate(-50%, -22%) rotate(1.5deg);
  }
}

/* Preloader Content (Counter + Message) */
.preloader-content {
  position: absolute;
  bottom: 12vh;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  user-select: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.preloader-content.loaded {
  opacity: 1;
  transform: translateY(0);
}

.preloader-overlay.fade-out .preloader-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.preloader-counter-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
}

.preloader-counter {
  font-family: 'Barlow Condensed', 'Cairo', sans-serif;
  font-size: clamp(85px, 14vw, 155px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 0.95;
  background: linear-gradient(135deg, #1b4fd8 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}

.preloader-percent-symbol {
  font-family: 'Barlow Condensed', 'Cairo', sans-serif;
  font-size: clamp(35px, 6vw, 65px);
  font-weight: 700;
  color: #06b6d4;
  margin-left: 2px;
  line-height: 0.95;
}

/* RTL percent adjustments */
html[dir="rtl"] .preloader-percent-symbol {
  margin-left: 0;
  margin-right: 2px;
}

.preloader-subtitle-wrap {
  margin-top: 18px;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.preloader-subtitle {
  font-family: 'Inter', 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(10, 22, 40, 0.62);
  letter-spacing: 3px;
  text-transform: uppercase;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* RTL subtitle letter spacing */
html[dir="rtl"] .preloader-subtitle {
  letter-spacing: 0px;
}

/* Prevent body scrolling while loading */
body.preloader-active {
  overflow: hidden !important;
  height: 100vh;
}