.preloader-area {
  position: fixed;
  z-index: 999999;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 18% 16%, rgba(133, 55, 20, 0.05), transparent 46%),
    radial-gradient(circle at 82% 82%, rgba(238, 146, 94, 0.1), transparent 52%),
    #ffffff;
  --preloader-ring-track: rgba(133, 55, 20, 0.2);
  --preloader-ring-progress-a: #853714;
  --preloader-ring-progress-b: #ee925e;
  --preloader-logo-shadow: rgba(133, 55, 20, 0.24);
}

.preloader-area .spinner {
  width: 280px;
  height: 280px;
  position: relative;
  display: grid;
  place-items: center;
}

.preloader-area .spinner .inner {
  display: none;
}

.preloader-area .spinner .disc {
  display: none;
}

.preloader-area .spinner::before {
  display: none;
}

.preloader-area .preloader-logo-assembly {
  width: 188px;
  height: 188px;
  position: relative;
  display: grid;
  place-items: center;
}

.preloader-area .preloader-ring-track,
.preloader-area .preloader-ring-progress {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.preloader-area .preloader-ring-track {
  border: 7px solid var(--preloader-ring-track);
}

.preloader-area .preloader-ring-progress {
  background: conic-gradient(
    from 0deg,
    var(--preloader-ring-progress-a) 0deg 88deg,
    var(--preloader-ring-progress-b) 88deg 136deg,
    rgba(0, 0, 0, 0) 136deg 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  animation: preloaderSpinRing 1.3s linear infinite;
}

.preloader-area .preloader-logo {
  width: 116px;
  height: 116px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 0 0.7px rgba(133, 55, 20, 0.62))
    drop-shadow(0 10px 20px var(--preloader-logo-shadow));
}

.preloader-area .preloader-logo-center {
  animation: none;
}

@keyframes preloaderSpinRing {
  to {
    transform: rotate(360deg);
  }
}