.drp-prezload.drp-loader {
  background:#000;
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2147483647 !important;
  pointer-events:all;
}

.drp-prezload.preload-done {
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease-out;
}

.drp-spinner {
  width:120px;
  height:120px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  --drp-c1:#fe624b;
  --drp-c2:#fd3f68;
}

.drp-spinner::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:8px;

  /* Paint ONLY a half ring; the other half is transparent. */
  background:
    conic-gradient(
      var(--drp-c1) 0 10%,
      var(--drp-c2) 30% 50%,
      transparent 50% 100%
    );

  /* Donut mask so it's a ring, not a pie */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;

  /* no clip-path needed anymore */
  animation:drp-spin 1.2s linear infinite;
  will-change: transform;
}

/* Centered logo (static) */
.drp-logo {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}

.drp-logo img {
  width:100%;
  height:auto;
  display:block;
}

/* Rotation keyframes */
@keyframes drp-spin { to { transform: rotate(360deg); } }