:root {
  --total-time: 3s;
  /* initial scale-in animation duration */
  --pause-duration: 2s;
  /* pause before exit */
  --exit-duration: 1.5s;
  /* exit animation duration */
}

.tc-preloader {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
  transition: background-color 1s ease-in-out; /* smoother fade */

  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}

body.tc-preloader-animation--done .tc-preloader {
   display: none;
}

/* .tc-preloader.finished {
  background: #fff;
} */

.tc-preloader-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform-origin: center center; /* scale from the center */
  opacity: 0;
  transition: opacity .3s;
  margin-top: -30px;
}

.tc-preloader.animate .tc-preloader-wrapper {
   opacity: 1;
}

.tc-preloader-bars {
  width: 280px;
  height: 130px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 10px;
}

/* Base bar style */
.tc-preloader-bars > .preloader-level {
  position: relative;
  --final-scale: 1;
  transform: scale(calc(var(--final-scale) * 10));
  opacity: 0;
  animation-fill-mode: forwards;
  transition: background 0.8s ease;
}

.tc-preloader-bars > .preloader-level .bar {
  background: #ccc;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.tc-preloader.finished .preloader-level .bar {
  /* background: #000; */
  /* bars turn black on finish */
}

/* individual bar scales */
.preloader-level.level1 {
  --final-scale: 1;
}

.preloader-level.level2 {
  --final-scale: 0.8;
}

.preloader-level.level3 {
  --final-scale: 0.6;
}

.preloader-level.level2.side.left {
  transform-origin: right;
}

.preloader-level.level2.side.right {
  transform-origin: left;
}

/* center bar animation */
.preloader-level.center {
  animation-name: shrinkCenter;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes shrinkCenter {
  0% {
    transform: scale(calc(var(--final-scale) * 10));
    opacity: 0;
  }

  100% {
    transform: scale(var(--final-scale));
    opacity: 1;
  }
}

/* left bar animation */
.preloader-level.left {
  animation-name: shrinkLeft;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  /* animation-timing-function: cubic-bezier(0.25, 1, 0., 1); */
}

@keyframes shrinkLeft {
  0% {
    transform: scale(calc(var(--final-scale) * 10)) translateX(-200vw);
    opacity: 0;
  }
  100% {
    transform: scale(var(--final-scale)) translateX(0);
    opacity: 1;
  }
}

/* right bar animation */
.preloader-level.right {
  animation-name: shrinkRight;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes shrinkRight {
  0% {
    transform: scale(calc(var(--final-scale) * 10)) translateX(200vw);
    opacity: 0;
  }

  100% {
    transform: scale(var(--final-scale)) translateX(0);
    opacity: 1;
  }
}

/* sequence delays */
.tc-preloader.animate .preloader-level.level2.center {
  animation-delay: 0.4s;
  animation-duration: calc(var(--total-time) - 0.4s);
}

.tc-preloader.animate .preloader-level.level3 {
  animation-delay: 0.6s;
  animation-duration: calc(var(--total-time) - 0.6s);
}

.tc-preloader.animate .preloader-level.level2.side.left,
.tc-preloader.animate .preloader-level.level2.side.right {
  animation-delay: 0.8s;
  animation-duration: calc(var(--total-time) - 0.8s);
}

.tc-preloader.animate .preloader-level.level1.left,
.tc-preloader.animate .preloader-level.level1.right {
  animation-delay: 1s;
  animation-duration: calc(var(--total-time) - 1s);
}

/* preloader text */
.preloader-text span,
.preloader-text h1 {
  font-family: 'Work Sans';
  display: block;
  text-align: center;
  color: #fff;
}

.preloader-text {
  opacity: 0;
  transition: opacity 1s;
}

.tc-preloader.finished .preloader-text {
  opacity: 1;
}

.preloader-text h1 {
   margin: 0;
   font-size: 40px;
   font-weight: 600;
   letter-spacing: 5px;
}

.preloader-text span {
   font-weight: 600;
   font-size: 20px;
   letter-spacing: 1px;
   margin-bottom: -5px;
}

/* Exit animation keyframes - smooth grow + fade */
@keyframes exitAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Apply exit animation after 2s pause */
.tc-preloader.finished .tc-preloader-wrapper,
.tc-preloader.finished .preloader-text {
  /* animation: exitAnimation var(--exit-duration) forwards; */
  /* animation-delay: var(--pause-duration); */
}

@media screen and (min-width: 768px) {
  .tc-preloader-bars {
    width: 550px;
    height: 250px;
    grid-gap: 15px;
  }

   .preloader-text h1 {
      font-size: 70px;
      letter-spacing: 15px;
   }

   .preloader-text span {
      font-size: 30px;
      letter-spacing: 5px;
   }
}