body.pg-loading {
  overflow: hidden;
}

.pg-loading-screen {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000000;
  opacity: 1;
  overflow: hidden;
  background-color: transparent !important;
  transition: opacity 0.5s ease-in-out;
}

.pg-loading-screen .pg-loading-inner,
.pg-loading-screen .pg-loading-center-outer,
.pg-loading-screen .pg-loading-center-middle {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pg-loading-screen .pg-loading-logo-header {
  display: none !important;
}

.pg-loading-screen .pg-loading-html {
  opacity: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}

.pg-loading-screen.pg-loaded {
  opacity: 0;
  pointer-events: none;
}

.christmas-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #1a365d 0%, #2d3748 50%, #1a202c 100%);
}

.christmas-loader__snow-bg {
  position: absolute;
  width: 100%;
  height: 200%;
  background-image: url('../img/christmas/background.png');
  background-size: auto 50%;
  background-repeat: repeat;
  animation: snowFall 30s linear infinite;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}

@keyframes snowFall {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0%);
  }
}

.christmas-loader__santa {
  position: absolute;
  bottom: 35%;
  left: 0;
  width: 300px;
  height: auto;
  z-index: 10;
  animation: santaWalk 3s ease-in-out forwards;
  transform: translateX(-300px);
  will-change: transform;
}

.christmas-loader__santa img {
  width: 100%;
  height: auto;
  animation: santaBounce 0.4s ease-in-out infinite;
  will-change: transform;
}

@keyframes santaWalk {
  0% {
    transform: translateX(-300px);
  }
  100% {
    transform: translateX(calc(100vw + 300px));
  }
}

@keyframes santaBounce {
  0%,
  100% {
    transform: translateY(0) scaleX(-1);
  }
  50% {
    transform: translateY(-8px) scaleX(-1);
  }
}

.christmas-loader__logo-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  text-align: center;
}

.christmas-loader__logo-wrapper {
  position: relative;
  width: 400px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}

.christmas-loader__logo {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0;
  animation: logoFadeIn 0.1s ease-out 0.5s forwards;
}

@keyframes logoFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.christmas-loader__logo-mask {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: translateX(0);
  animation: logoMaskReveal 2s ease-out 0.5s forwards;
  will-change: transform;
  pointer-events: none;
}

.christmas-loader__logo-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #edf9fe;
  transform: scaleX(1);
  transform-origin: right;
  animation: logoMaskReveal 2s ease-out 0.5s forwards;
  will-change: transform;
  z-index: 1;
}

@keyframes logoMaskReveal {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

@media (max-width: 768px) {
  .christmas-loader__logo-wrapper {
    width: 300px;
  }

  .christmas-loader__santa {
    width: 200px;
    bottom: 40%;
    transform: translateX(-200px);
  }

  .christmas-loader__santa img {
    width: 100%;
    height: auto;
  }

  @keyframes santaWalk {
    0% {
      transform: translateX(-200px);
    }
    100% {
      transform: translateX(calc(100vw + 200px));
    }
  }
}