.preloader {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(77% 122% at 50% -17%, var(--color-emerald-6) 8%, var(--color-emerald-3) 32%, var(--color-emerald-1) 70%, var(--color-overlay) 100%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.preloader__coin {
    position: relative;
    z-index: 2;
    max-width: 180px;
    max-height: 180px;
    width: 100%;
    height: auto;
  }
  .preloader__coin::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 230, 120, 0.8) 0%, rgba(255, 200, 0, 0.1) 70%, transparent 100%);
    filter: blur(20px);
    z-index: -1;
  }
  
  .preloader__coin-image {
    width: 100%;
    height: 100%;
    animation: coinRotate 3.2s ease-in-out infinite;
  }
  
  .preloader__logo {
    position: absolute;
    top: 50%;
    left: 51%;
    transform: translate(-50%, -50%);
    max-width: 86px;
    max-height: 82px;
    width: 60%;
    height: auto;
    z-index: 2;
  }
  
  .preloader__logo-image {
    width: 100%;
    height: 100%;
  }
  
  @keyframes coinRotate {
    0% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(90deg);
    }
    25% {
      transform: rotate(90deg); 
    }
    40% {
      transform: rotate(180deg);
    }
    50% {
      transform: rotate(180deg);
    }
    65% {
      transform: rotate(270deg);
    }
    75% {
      transform: rotate(270deg);
    }
    90% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(360deg); 
    }
  }

.preloader:before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/preloader/pattern-velvet.webp), radial-gradient(77% 122% at 50% -17%, var(--color-emerald-6) 8%, var(--color-emerald-3) 32%, var(--color-emerald-1) 70%, var(--color-overlay) 100%);
    background-blend-mode: color-dodge, normal;
}

.preloader:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/preloader/pattern-bg.svg?v=1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: repeat;
    background-position: center;
}

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



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

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

.preloader.preloader--signup-light {
    background: #1C1500;
}

.preloader.preloader--signup-light:before {
    background: #1C1500;
    background-blend-mode: normal;
}

.preloader.preloader--signup-light:after {
    background-image: url(/img/body-bg-pattern-light.svg);
    background-repeat: repeat;
    background-position: center;
}

.preloader.preloader--signup-light .preloader__coin-image {
    filter: sepia(0.7) saturate(1.45) hue-rotate(-8deg) brightness(1.05) contrast(1.05);
}

.preloader.preloader--signup-light .preloader__logo-image {
    filter: sepia(0.5) saturate(1.25) hue-rotate(-6deg) brightness(1.04);
}