.preloader {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: radial-gradient(
    77% 122% at 50% -17%,
    var(--brand-base-6) 8%,
    var(--brand-base-3) 32%,
    var(--brand-base-1) 70%,
    var(--brand-base-overlay) 100%
  );
}

.preloader:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    url(/preloader/pattern-velvet.webp),
    radial-gradient(
      77% 122% at 50% -17%,
      var(--brand-base-6) 8%,
      var(--brand-base-3) 32%,
      var(--brand-base-1) 70%,
      var(--brand-base-overlay) 100%
    );

  background-blend-mode: color-dodge, normal;
}

@supports (font: -apple-system-body) and (-webkit-appearance: none) and (-webkit-touch-callout: none) {
  .preloader:before {
    mix-blend-mode: color-dodge;
  }
}

@keyframes bkg {
  0% {
    background-position: 0 top;
  }
  100% {
    background-position: -3000px top;
  }
}

@media (max-width: 1024px) {
  @keyframes bkg {
    0% {
      background-position: 0 top;
    }
    100% {
      background-position: -3000px top;
    }
  }
}

.preloader__chip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 150px;
  height: 150px;
  background: url(/preloader/chips_20f.webp) left top;
  background-size: auto 150px;
  transition: background 1.9s steps(20, end);
  animation: bkg 1.9s steps(20) infinite;
}

@media (max-width: 1024px) {
  .preloader__chip {
    width: 150px;
    height: 150px;
    background-size: auto 150px;
  }
}

.preloader.is-hide {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-in;
}

.preloader.is-none {
  display: none !important;
}