#preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh; /* Full viewport */
  z-index: 9999; /* Ensure it's on top */
  /* Remove background, clip-path, opacity from here */
  overflow: hidden; /* Hide parts sliding outside */
}

/* Styles for the top and bottom halves */
.preloader-half {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%; /* Each takes half the height */
  background: #252525; /* Color from example, or use your image */
  transition: transform 1.0s cubic-bezier(0.86, 0, 0.07, 1); /* Adjust duration & easing */
}

.preloader-half.top {
  top: 0;
  transform: translateY(0%); /* Initial position - covering top half */
  /* If using image background: background-position: center top; */
}

.preloader-half.bottom {
  bottom: 0;
  transform: translateY(0%); /* Initial position - covering bottom half */
  /* If using image background: background-position: center bottom; */
}

/* State when preloader should animate out */
#preloader.open .preloader-half.top {
  transform: translateY(-100%); /* Slide top half up */
}

#preloader.open .preloader-half.bottom {
  transform: translateY(100%); /* Slide bottom half down */
}