/*
 * loader.css
 * ----------
 * Écran de chargement plein écran :
 *   - décor à rayures
 *   - canvas de neige
 *   - emoji animé qui grossit
 *   - blague du lutin
 *   - barre de progression rayée
 */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, .96),
      transparent 48%
    ),
    repeating-linear-gradient(
      45deg,
      #fff4b6 0 30px,
      #e51b23 30px 40px,
      #fff 40px 70px,
      #008f3b 70px 80px
    );
  transition:
    opacity .8s,
    visibility .8s;
}

.loader.gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#lSnow {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
}

.ld-inner {
  position: relative;
  z-index: 10001;
  width: 100%;
  max-width: 650px;
  padding: 2rem;
  text-align: center;
}

.ld-emoji {
  display: inline-block;
  font-size: 4rem;
  filter:
    drop-shadow(5px 7px 0 var(--shop-red-dark))
    drop-shadow(0 0 25px #fff);
  animation: loaderEmoji 6s ease-out forwards;
}

@keyframes loaderEmoji {
  0% {
    opacity: 0;
    transform: scale(.3) rotate(-10deg);
  }

  15% {
    opacity: 1;
    transform: scale(1.1) rotate(5deg);
  }

  25% {
    transform: scale(.95);
  }

  35% {
    transform: scale(1.5) rotate(8deg);
  }

  55% {
    transform: scale(1.4);
  }

  75% {
    transform: scale(2.2) rotate(3deg);
  }

  100% {
    opacity: 1;
    transform: scale(3) rotate(0);
  }
}

.ld-joke {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 110px;
  margin: 2rem 0;
  padding: 2rem 2.5rem;
  border: 7px solid var(--shop-red);
  border-radius: 15px;
  outline: 5px solid var(--shop-gold);
  background: #fff0a7;
  box-shadow:
    10px 12px 0 var(--shop-green-dark),
    0 0 30px rgba(255, 255, 255, .9);
  transform: rotate(-1deg);
}

.ld-jq {
  margin-bottom: .75rem;
  color: var(--shop-red-dark);
  font-family: 'Fredoka One', cursive;
  font-size: 1.2rem;
  line-height: 1.4;
}

.ld-ja {
  opacity: 0;
  color: var(--shop-green-dark);
  font-size: .95rem;
  font-weight: 800;
  font-style: italic;
  animation: jokeReveal .6s 2s ease forwards;
}

@keyframes jokeReveal {
  to {
    opacity: 1;
  }
}

.ld-bar-w {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

.ld-bar-o {
  width: 100%;
  height: 13px;
  overflow: hidden;
  border: 3px solid var(--shop-brown);
  border-radius: 4px;
  background: #fff;
}

.ld-bar-i {
  width: 0;
  height: 100%;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      45deg,
      var(--shop-red) 0 12px,
      var(--shop-gold) 12px 24px,
      var(--shop-green) 24px 36px,
      var(--blue) 36px 48px
    );
  background-size: 96px 100%;
  animation:
    loaderFill 6s ease-in-out forwards,
    shopLoaderStripe 1s linear infinite;
}

@keyframes loaderFill {
  to {
    width: 100%;
  }
}

@keyframes shopLoaderStripe {
  to {
    background-position: 96px 0;
  }
}

.ld-label {
  display: inline-block;
  margin-top: 1rem;
  padding: 6px 13px;
  color: #fff;
  border: 3px solid var(--shop-gold);
  border-radius: 4px;
  background: var(--shop-green-dark);
  box-shadow: 4px 4px 0 var(--shop-red-dark);
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}