/* ===============================
   LOADER WRAPPER
   =============================== */
#loader {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: #000; /* dark cinematic background */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
}

/* ===============================
   LOGO CINEMATIC ANIMATION
   =============================== */
.loader-logo {
  width: 3800px; /* adjust to real logo size */
  opacity: 0;
  transform: scale(0.9);
  animation: loaderCinematic 6s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

/* ===============================
   HIDE LOADER AFTER ANIMATION
   =============================== */
#loader.hidden {
  display: none;
}

/* ===============================
   CINEMATIC KEYFRAMES
   =============================== */
@keyframes loaderCinematic {
  /* Fade in & gentle zoom */
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  /* Smooth reveal */
  20% {
    opacity: 1;
    transform: scale(1);
  }

  /* Slight slow-motion pulse (cinematic) */
  50% {
    opacity: 1;
    transform: scale(1.03);
  }

  /* Subtle zoom + fade out */
  80% {
    opacity: 1;
    transform: scale(1.05);
  }

  /* Final fade out */
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}