.loader-logo-wr {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #191819;
  transition: opacity .3s, filter .3s;
  opacity: 1;
}

.loader-logo-wr.is-loader-logo-hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-logo-wr.is-loader-logo-end .loader-logo {
  opacity: 0;
  filter: blur(4px);
}

.loader-logo.is-loader-logo-hidden {
  opacity: 0;
  filter: blur(4px);
}

.loader-logo {
  opacity: 1;
  filter: blur(0);
  transition: 0.3s ease;
  --logo-size: 52px;
}

.loader-logo .scene-wr {
  width: var(--logo-size);
  height: var(--logo-size);
  position: relative;
  perspective: 800px;
}

.loader-logo .scene {
  width: var(--logo-size);
  height: var(--logo-size);
  position: relative;
  transform-style: preserve-3d;
}

.loader-logo .cube {
  width: var(--logo-size);
  height: var(--logo-size);
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.4s;
}

.loader-logo .face {
  position: absolute;
  width: var(--logo-size);
  height: var(--logo-size);
  background: transparent !important;
  backface-visibility: hidden;
}

.loader-logo .face .loader-logo-full {
  position: absolute;
  inset: 0;
  transition: 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-logo .face .loader-logo-full img,
.loader-logo .face .loader-logo-full svg {
  width: calc(var(--logo-size) - 2px);
  height: calc(var(--logo-size) - 2px);
  object-fit: cover;
}

.loader-logo .face .loader-logo-letter {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--logo-size);
  height: var(--logo-size);
  transition: 0.4s;
  opacity: 0;
}

.loader-logo .face .loader-logo-letter img,
.loader-logo .face .loader-logo-letter svg {
  width: var(--logo-size);
  height: var(--logo-size);
  object-fit: cover;
}

.loader-logo .front {
  transform: translateZ(calc(var(--logo-size) / 2));
  background: red;
}

.loader-logo .back {
  transform: rotateY(180deg) translateZ(calc(var(--logo-size) / 2));
  background: blue;
}

.loader-logo .left {
  transform: rotateY(-90deg) translateZ(calc(var(--logo-size) / 2));
  background: green;
}

.loader-logo .left .loader-logo-letter {
  transform: rotate(-90deg);
}

.loader-logo .right {
  transform: rotateY(90deg) translateZ(calc(var(--logo-size) / 2));
  background: yellow;
}

.loader-logo .top {
  transform: rotateX(90deg) translateZ(calc(var(--logo-size) / 2));
  background: cyan;
}

.loader-logo .bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--logo-size) / 2));
  background: magenta;
}

.loader-logo .bottom .loader-logo-letter {
  transform: rotate(90deg);
}

.loader-logo .scene,
.loader-logo .cube,
.loader-logo .face {
  image-rendering: optimizeQuality;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Состояния с буквами */
.loader-logo.rotate-b .right .loader-logo-letter {
  opacity: 1;
}

.loader-logo.rotate-o .bottom .loader-logo-letter {
  opacity: 1;
}

.loader-logo.rotate-l .left .loader-logo-letter {
  opacity: 1;
}

.loader-logo.rotate-d .top .loader-logo-letter {
  opacity: 1;
}

.loader-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}