html {
  scrollbar-gutter: unset;
}

body {
  overflow: hidden;
}

.loader {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: var(--background);
}

.loader-progress-container {
  position: absolute;
  left: 4rem;
  bottom: 6rem;
  display: flex;
  gap: 1rem;
  z-index: 2;
  animation: loaderProgressOpacity 3s linear forwards,
    loaderBackgroundOpacity 0.2s linear forwards 3s;
}

@keyframes loaderProgressOpacity {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes loaderBackgroundOpacity {
  0% {
    background: #070709;
  }
  100% {
    background: #07070900;
  }
}

.loader-logo {
  height: 3rem;
  position: absolute;
  left: 4rem;
  top: 2rem;
  z-index: 2;
}

/* Parent visible à 100% */
.loader-bg-reveal {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none; /* Pour éviter de bloquer les interactions */
  z-index: 1;
  overflow: hidden;
  animation: loaderBgRevealOpacity 3s linear forwards;
}

@keyframes loaderBgRevealOpacity {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Enfants couvrent le parent, même couleur */
.loader-bg-reveal-item {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52%;
  background: var(--primary-500);
  z-index: 11;
  pointer-events: none;
}

/* Premier enfant : du centre vers le haut */
.loader-bg-reveal-item:first-child {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: loaderItemClipPathDown 1s cubic-bezier(0.77, 0, 0.18, 1) 3s
    forwards;
}

/* Deuxième enfant : du centre vers le bas */
.loader-bg-reveal-item:last-child {
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  animation: loaderItemClipPathUp 1s cubic-bezier(0.77, 0, 0.18, 1) 3s forwards;
}

@keyframes loaderItemClipPathUp {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  }
}

@keyframes loaderItemClipPathDown {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
}

.loader-progress-text {
  font: var(--f-d-h1);
  color: var(--white);
}

#loader-number-js {
  width: 190px;
}

/* === BACKGROUND SECTION === */
.loader-background-fixed {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.loader-background-line-gradient {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    hsla(0, 7%, 3%, 1) 0%,
    hsla(240, 7%, 3%, 0.3) 10%,
    hsla(240, 7%, 3%, 0) 25%,
    hsla(240, 7%, 3%, 0) 50%,
    hsla(240, 7%, 3%, 0) 75%,
    hsla(240, 7%, 3%, 0.3) 90%,
    hsla(240, 7%, 3%, 1) 100%
  );

  z-index: 3;
}

.loader-background-blur {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  width: 35vw;
  height: 8vh;
  flex-shrink: 0;
  border-radius: 70vmax;
  opacity: 0.7;
  background: linear-gradient(
    180deg,
    hsla(244, 85%, 79%, 0.808) 0%,
    hsl(244, 93%, 65%) 100%
  );
  filter: blur(200px);
  z-index: 0;
}

@keyframes loaderBlurBgToPrimary {
  0% {
    background: linear-gradient(
      180deg,
      hsla(244, 85%, 79%, 0.808) 0%,
      hsl(244, 93%, 65%) 100%
    );
  }
  40% {
    background: linear-gradient(
      180deg,
      hsl(244, 93%, 75%) 0%,
      hsl(244, 93%, 65%) 100%
    );
  }
  80% {
    background: linear-gradient(
      180deg,
      var(--primary-500) 0%,
      var(--primary-500) 100%
    );
    opacity: 1;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
  100% {
    background: linear-gradient(
      180deg,
      var(--primary-500) 0%,
      var(--primary-500) 100%
    );
    opacity: 0;
  }
}

.loader-background-blur {
  animation: loaderBlurBgToPrimary 3s linear forwards;
}

@media screen and (max-width: 768px) {
  .loader-progress-text {
    font: var(--f-d-h3);
    color: var(--white);
  }
  #loader-number-js {
    width: 130px;
  }
}