/* ================== PREMIUM CINEMATIC PRELOADER ================== */

/* ========== BASE SETUP ========== */
#preloader {
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  overflow: hidden;
  z-index: 99999;
  background: transparent;
}

.preloader-inner {
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 5;
  font-family: "Inter", sans-serif;
}

.preloader-logo {
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: 4px;
  margin-bottom: 20px;
  color: #fff;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Text shimmer effect */
.preloader-logo::after {
  content: "";
  position: absolute;
  top: 0; 
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.6) 50%,
    transparent 100%
  );
  animation: shimmer 2.2s ease-in-out 1.4s forwards;
}

/* Letter entrance animation */
.preloader-logo span {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 1s ease forwards;
}

.preloader-logo span:nth-child(1) { animation-delay: 0.1s; }
.preloader-logo span:nth-child(2) { animation-delay: 0.2s; }
.preloader-logo span:nth-child(3) { animation-delay: 0.3s; }
.preloader-logo span:nth-child(4) { animation-delay: 0.4s; }
.preloader-logo span:nth-child(5) { animation-delay: 0.5s; }
.preloader-logo span:nth-child(6) { animation-delay: 0.6s; }
.preloader-logo span:nth-child(7) { animation-delay: 0.7s; }

.word {
  animation: fadeScale 1.4s ease forwards;
  opacity: 0;
  display: inline-block;
  margin: 0 4px;
  animation-delay: 0.9s;
}

/* Underline loading bar */
.loading-bar {
  width: 0%;
  height: 3px;
  background: linear-gradient(to right, #fff, #ff6900, #fff);
  margin: 0 auto;
  border-radius: 3px;
  animation: loadLine 2.4s ease-out forwards;
  animation-delay: 0.8s;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  transition: opacity 0.8s ease 0.3s;
}

/* ========== BACKGROUND PANELS ========== */
.preloader-bg {
  position: absolute;
  top: 0; 
  width: 50%; 
  height: 100%;
  z-index: 2;
  transform: translateX(0);
  transition: transform 1.3s cubic-bezier(0.77, 0, 0.175, 1);
}
.preloader-bg.left { 
  left: 0; 
  background: #ff6900; 
}
.preloader-bg.right { 
  right: 0; 
  background: #001659; 
}

/* ========== ANIMATIONS ========== */
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(30px); }
  60% { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeScale {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes loadLine {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 120%; }
}

/* Cinematic vanish effect */
@keyframes vanishFade {
  0% { opacity: 1; transform: scale(1); filter: blur(0px); }
  100% { opacity: 0; transform: scale(1.03); filter: blur(3px); }
}

/* ========== EXIT TRANSITION ========== */
body.loaded #preloader .preloader-logo,
body.loaded #preloader .loading-bar {
  animation: vanishFade 1s ease forwards;
}

body.loaded #preloader .preloader-bg.left {
  transform: translateX(-100%);
}

body.loaded #preloader .preloader-bg.right {
  transform: translateX(100%);
}

body.loaded #preloader {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease 1.4s, visibility 0.8s ease 1.4s;
}

/* Responsive scaling */
@media (max-width: 768px) {
  .preloader-logo {
    font-size: 2rem;
    letter-spacing: 2px;
  }
  .loading-bar {
    height: 2px;
  }
}