:root {
  --case-loader-bg: #0c0b0e;
  --case-loader-duration: 5s;
  --case-loader-ease: linear;
  --case-loader-logo-ratio: 135 / 50;
}

.case-loader {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.case-loader__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  will-change: opacity, transform, filter;
  animation: case-loader-logo var(--case-loader-duration) var(--case-loader-ease) infinite;
}

.case-loader__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 72%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(68, 252, 117, 0.12) 0%,
    rgba(68, 252, 117, 0.05) 38%,
    rgba(68, 252, 117, 0) 58%
  );
  will-change: opacity, transform;
  animation: case-loader-glow var(--case-loader-duration) var(--case-loader-ease) infinite;
}

@keyframes case-loader-logo {
  0% {
    opacity: 0.02;
    transform: scale(0.92);
    filter: brightness(0.68);
  }

  4% {
    opacity: 0.034;
    transform: scale(0.921);
    filter: brightness(0.687);
  }

  8% {
    opacity: 0.077;
    transform: scale(0.925);
    filter: brightness(0.707);
  }

  12% {
    opacity: 0.145;
    transform: scale(0.931);
    filter: brightness(0.74);
  }

  16% {
    opacity: 0.234;
    transform: scale(0.939);
    filter: brightness(0.782);
  }

  20% {
    opacity: 0.338;
    transform: scale(0.948);
    filter: brightness(0.832);
  }

  24% {
    opacity: 0.451;
    transform: scale(0.958);
    filter: brightness(0.886);
  }

  28% {
    opacity: 0.566;
    transform: scale(0.968);
    filter: brightness(0.941);
  }

  32% {
    opacity: 0.676;
    transform: scale(0.977);
    filter: brightness(0.994);
  }

  36% {
    opacity: 0.773;
    transform: scale(0.986);
    filter: brightness(1.04);
  }

  40% {
    opacity: 0.852;
    transform: scale(0.992);
    filter: brightness(1.078);
  }

  44% {
    opacity: 0.908;
    transform: scale(0.997);
    filter: brightness(1.105);
  }

  48% {
    opacity: 0.936;
    transform: scale(1);
    filter: brightness(1.118);
  }

  52% {
    opacity: 0.936;
    transform: scale(1);
    filter: brightness(1.118);
  }

  56% {
    opacity: 0.908;
    transform: scale(0.997);
    filter: brightness(1.105);
  }

  60% {
    opacity: 0.852;
    transform: scale(0.992);
    filter: brightness(1.078);
  }

  64% {
    opacity: 0.773;
    transform: scale(0.986);
    filter: brightness(1.04);
  }

  68% {
    opacity: 0.676;
    transform: scale(0.977);
    filter: brightness(0.994);
  }

  72% {
    opacity: 0.566;
    transform: scale(0.968);
    filter: brightness(0.941);
  }

  76% {
    opacity: 0.451;
    transform: scale(0.958);
    filter: brightness(0.886);
  }

  80% {
    opacity: 0.338;
    transform: scale(0.948);
    filter: brightness(0.832);
  }

  84% {
    opacity: 0.234;
    transform: scale(0.939);
    filter: brightness(0.782);
  }

  88% {
    opacity: 0.145;
    transform: scale(0.931);
    filter: brightness(0.74);
  }

  92% {
    opacity: 0.077;
    transform: scale(0.925);
    filter: brightness(0.707);
  }

  96% {
    opacity: 0.034;
    transform: scale(0.921);
    filter: brightness(0.687);
  }

  100% {
    opacity: 0.02;
    transform: scale(0.92);
    filter: brightness(0.68);
  }
}

@keyframes case-loader-glow {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }

  4% {
    opacity: 0.006;
    transform: translate(-50%, -50%) scale(0.882);
  }

  8% {
    opacity: 0.022;
    transform: translate(-50%, -50%) scale(0.887);
  }

  12% {
    opacity: 0.049;
    transform: translate(-50%, -50%) scale(0.896);
  }

  16% {
    opacity: 0.084;
    transform: translate(-50%, -50%) scale(0.908);
  }

  20% {
    opacity: 0.124;
    transform: translate(-50%, -50%) scale(0.922);
  }

  24% {
    opacity: 0.169;
    transform: translate(-50%, -50%) scale(0.936);
  }

  28% {
    opacity: 0.214;
    transform: translate(-50%, -50%) scale(0.951);
  }

  32% {
    opacity: 0.257;
    transform: translate(-50%, -50%) scale(0.966);
  }

  36% {
    opacity: 0.295;
    transform: translate(-50%, -50%) scale(0.978);
  }

  40% {
    opacity: 0.326;
    transform: translate(-50%, -50%) scale(0.989);
  }

  44% {
    opacity: 0.347;
    transform: translate(-50%, -50%) scale(0.996);
  }

  48% {
    opacity: 0.359;
    transform: translate(-50%, -50%) scale(1);
  }

  52% {
    opacity: 0.359;
    transform: translate(-50%, -50%) scale(1);
  }

  56% {
    opacity: 0.347;
    transform: translate(-50%, -50%) scale(0.996);
  }

  60% {
    opacity: 0.326;
    transform: translate(-50%, -50%) scale(0.989);
  }

  64% {
    opacity: 0.295;
    transform: translate(-50%, -50%) scale(0.978);
  }

  68% {
    opacity: 0.257;
    transform: translate(-50%, -50%) scale(0.966);
  }

  72% {
    opacity: 0.214;
    transform: translate(-50%, -50%) scale(0.951);
  }

  76% {
    opacity: 0.169;
    transform: translate(-50%, -50%) scale(0.936);
  }

  80% {
    opacity: 0.124;
    transform: translate(-50%, -50%) scale(0.922);
  }

  84% {
    opacity: 0.084;
    transform: translate(-50%, -50%) scale(0.908);
  }

  88% {
    opacity: 0.049;
    transform: translate(-50%, -50%) scale(0.896);
  }

  92% {
    opacity: 0.022;
    transform: translate(-50%, -50%) scale(0.887);
  }

  96% {
    opacity: 0.006;
    transform: translate(-50%, -50%) scale(0.882);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.88);
  }
}

.case-loader--icon {
  width: 8.4375rem;
  aspect-ratio: var(--case-loader-logo-ratio);
}

.case-loader--compact {
  width: 5.9375rem;
  aspect-ratio: var(--case-loader-logo-ratio);
}

.case-loader--screen {
  width: 100%;
  height: 100%;
  background: var(--case-loader-bg);
}

.case-loader--screen .case-loader__logo {
  width: 9.375rem;
  max-width: 8.4375rem;
}

.case-loader--icon .case-loader__logo,
.case-loader--compact .case-loader__logo {
  width: 100%;
}

.case-loader--screen .case-loader__glow {
  width: 9rem;
}

.main-preloader {
  background: var(--case-loader-bg);
}

.profile-loading,
.wallet__loading,
.wallet-crypto-loading {
  background: transparent;
}

.profile-loading .case-loader,
.wallet__loading .case-loader,
.wallet-crypto-loading .case-loader {
  margin: 0 auto;
}

.slots-loading {
  background: var(--case-loader-bg);
}

.slots-loading .case-loader {
  width: 8.4375rem;
}