#loading-screen > * {
  position: absolute;
  z-index: 1000;
}

#loading-screen {
  position: absolute;
  left: 50%;
  top: 50%;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
}

#loading-screen-black {
  position: absolute;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  background: black;
}

#loading-screen-background {
  --scaleX: calc(var(--totalWidth) / var(--width));
  --scaleY: calc(var(--totalHeight) / var(--height));
  --scale: min(var(--scaleX), var(--scaleY));
  --finalWidth: min(var(--background-size), calc(var(--totalWidth) / var(--scale)));
  --finalHeight: min(var(--background-size), calc(var(--totalHeight) / var(--scale)));
  width: calc(1px * var(--finalWidth));
  height: calc(1px * var(--finalHeight));
  transform: scale(var(--scale), var(--scale));
  transform-origin: center center;
  position: absolute;
  left: calc(1px * calc(var(--finalWidth) / -2));
  top: calc(1px * calc(var(--finalHeight) / -2));
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/preloader_background.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/preloader_background.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/preloader_background.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/preloader_background.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-size: calc(1px * var(--background-size));
  background-position: center center;
}

@media (orientation: portrait) {
  #loading-screen-background {
    --width: 1080;
    --height: 2400;
    --background-size: 2400;
  }
}

@media (orientation: landscape) {
  #loading-screen-background {
    --width: 1920;
    --height: 1080;
    --background-size: 2160;
  }
}

#loading-screen-ygg-logo {
  position: fixed;
  opacity: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/S_R_logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/S_R_logo.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/S_R_logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/S_R_logo.png") type("image/png")
  );
}

@media (orientation: portrait) {
  #loading-screen-ygg-logo {
    width: 200px;
    height: 250px;
    left: 20px;
    top: 20px;
  }
}

@media (orientation: landscape) {
  #loading-screen-ygg-logo {
    width: 200px;
    height: 250px;
    left: 20px;
    top: 20px;
  }
}

#loading-screen-giab-logo {
  position: fixed;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top right;
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/powered_by_giab_logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/powered_by_giab_logo.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/powered_by_giab_logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/powered_by_giab_logo.png") type("image/png")
  );
}

@media (orientation: portrait) {
  #loading-screen-giab-logo {
    width: 200px;
    height: 250px;
    right: 20px;
    top: 20px;
  }
}

@media (orientation: landscape) {
  #loading-screen-giab-logo {
    width: 200px;
    height: 250px;
    right: 20px;
    top: 20px;
  }
}

#loading-screen-logo {
  position: absolute;
  left: 50%;
  width: 880px;
  height: 596px;
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/logo.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/logo.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/logo.png") type("image/png")
  );
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  filter: drop-shadow(0px 20px 15px rgba(0, 0, 0, 0.4));
}

@media (orientation: portrait) {
  #loading-screen-logo {
    transform-origin: left top;
    top: calc(50% - 350px);
    scale: 1.2;
  }
}

@media (orientation: landscape) {
  #loading-screen-logo {
    scale: 1;
    transform-origin: left top;
    top: calc(50% - 170px);
  }
}

#loading-screen-loader {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (orientation: portrait) {
  #loading-screen-loader {
    bottom: 700px;
    scale: 1.5;
  }
}

@media (orientation: landscape) {
  #loading-screen-loader {
    scale: .65;
    transform-origin: left top;
    top: calc(50% + 250px);
    scale: 1.1;
  }
}

#loading-screen-loader-border {
  position: absolute;
  width: 514px;
  height: 108px;
  transform: translate(-50%, -50%);
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/bar_bg.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_bg.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/bar_bg.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_bg.png") type("image/png")
  );
}

#loading-screen-loader-fill {
  --progress: 0;
  --maskPosition: calc(var(--progress) * 463px - 463px);
  position: absolute;
  width: 463px;
  height: 55px;
  transform: translate(-50%, -50%);
  top: -4px;
  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/bar_fill.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_fill.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/bar_fill.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_fill.png") type("image/png")
  );
  mask-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/bar_fill.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_fill.png") type("image/png")
  );
  mask-image: image-set(
          url("DealersChoicePreloaderAssets/bar_fill.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_fill.png") type("image/png")
  );
  mask-repeat: no-repeat;
  mask-position: var(--maskPosition);

  -webkit-mask-image: image-set(
          url("DealersChoicePreloaderAssets/bar_fill.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_fill.png") type("image/png")
  );
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: var(--maskPosition);
}

#loading-screen-loader-burn-clip {
  position: absolute;
  width: 463px;
  height: 55px;
  transform: translate(-50%, -50%);
  top: -4px;
  overflow: hidden;
  pointer-events: none;
}

#loading-screen-loader-burn {
  --progress: 0;
  opacity: 0;
  position: absolute;
  width: 22px;
  height: 60px;
  top: 50%;
  left: calc(var(--progress) * 463px);

  transform: translate(-50%, -50%);

  background-image: -webkit-image-set(
          url("DealersChoicePreloaderAssets/bar_burn.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_burn.png") type("image/png")
  );
  background-image: image-set(
          url("DealersChoicePreloaderAssets/bar_burn.webp") type("image/webp"),
          url("DealersChoicePreloaderAssets/bar_burn.png") type("image/png")
  );

  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  pointer-events: none;
}