@charset "utf-8";

.preloader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  overflow: hidden;
  /* no backdrop — the strips themselves cover the page, so as each one
     slides up the site is revealed behind it */
}

/* strips already cover the screen — nothing animates in */
.preloader_strip{
  flex: 1 1 auto;
  height: 100%;
}

/* pastel palette */
.preloader_strip:nth-child(1){ background: #FFF9D2; }
.preloader_strip:nth-child(2){ background: #FFEBCC; }
.preloader_strip:nth-child(3){ background: #E6F2DD; }
.preloader_strip:nth-child(4){ background: #D3E1D3; }
.preloader_strip:nth-child(5){ background: #C9D4F5; }
.preloader_strip:nth-child(6){ background: #E8EAFD; }
.preloader_strip:nth-child(7){ background: #F0DDD6; }

/* logo sits above the strips */
.preloader_logo{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 400px;
  max-width: 78%;
  padding: 10px 30px;
  background: #5996FF;
  border-radius: 18px;
  box-sizing: content-box;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------
   loaded — strips leave upward, starting from the right
   ------------------------------------------------------------------ */

.preloader.is_done .preloader_logo{
  animation: logo_out 0.3s ease forwards;
}

.preloader.is_done .preloader_strip{
  animation: strip_out 0.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.preloader.is_done .preloader_strip:nth-child(7){ animation-delay: 0.10s; }
.preloader.is_done .preloader_strip:nth-child(6){ animation-delay: 0.18s; }
.preloader.is_done .preloader_strip:nth-child(5){ animation-delay: 0.26s; }
.preloader.is_done .preloader_strip:nth-child(4){ animation-delay: 0.34s; }
.preloader.is_done .preloader_strip:nth-child(3){ animation-delay: 0.42s; }
.preloader.is_done .preloader_strip:nth-child(2){ animation-delay: 0.50s; }
.preloader.is_done .preloader_strip:nth-child(1){ animation-delay: 0.58s; }

@keyframes strip_out{
  from{ transform: translateY(0); }
  to{ transform: translateY(-100%); }
}

@keyframes logo_out{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

/* out of the way once it has finished */
.preloader.is_hidden{
  display: none;
}

/* no scrolling behind the preloader */
body.is_locked{
  overflow: hidden;
}

/* ------------------------------------------------------------------
   small screens — strips lie horizontally and slide off to the left
   ------------------------------------------------------------------ */

@media only screen and (max-width: 767px){
  .preloader{
    flex-direction: column;
  }

  .preloader_strip{
    width: 100%;
    height: auto;
  }

  .preloader.is_done .preloader_strip{
    animation-name: strip_out_side;
  }

  .preloader_logo{
    width: 300px;
    padding: 20px 26px;
  }
}

@keyframes strip_out_side{
  from{ transform: translateX(0); }
  to{ transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce){
  .preloader.is_done .preloader_strip,
  .preloader.is_done .preloader_logo{
    animation: none;
  }
}