@keyframes antropeoLoaderFlarePulse {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) scale(.78); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes antropeoLoaderSweep {
  0% { background-position: 180% 0; }
  100% { background-position: -80% 0; }
}

.m5-hero-orb::before {
  background: radial-gradient(circle, rgba(252, 211, 77, .28) 0%, rgba(168, 85, 247, .24) 35%, rgba(76, 29, 149, .16) 58%, transparent 74%) !important;
}

.m5-hero-icon {
  filter: drop-shadow(0 0 18px rgba(250, 204, 21, .3)) drop-shadow(0 0 11px rgba(168, 85, 247, .48)) !important;
}

.m5-loader {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(370px, calc(100vw - 54px)) !important;
  padding-inline: 12px !important;
  isolation: isolate;
}

.m5-loader::before,
.m5-loader::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 25px;
  height: 24px;
  z-index: 7;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(251, 191, 36, .52));
  clip-path: polygon(0 50%, 35% 9%, 100% 0, 79% 50%, 100% 100%, 35% 91%);
  background: linear-gradient(90deg, #7a3f00 0%, #f59e0b 34%, #fff2a8 58%, #b76100 100%);
}

.m5-loader::before {
  left: 0;
  transform: translate(-1px, -50%);
}

.m5-loader::after {
  right: 0;
  transform: translate(1px, -50%) scaleX(-1);
}

.m5-loader-track {
  position: relative !important;
  width: 100% !important;
  height: 16px !important;
  overflow: visible !important;
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background:
    linear-gradient(#080a20, #080a20) padding-box,
    linear-gradient(180deg, #fff4a3 0%, #fbbf24 25%, #8a4300 56%, #f59e0b 78%, #fff0a0 100%) border-box !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, .92),
    inset 0 -1px 0 rgba(255, 255, 255, .11),
    0 0 5px rgba(245, 158, 11, .82),
    0 0 18px rgba(168, 85, 247, .23) !important;
}

.m5-loader-track::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #17142f 0%, #080a1e 55%, #050613 100%);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .92);
  pointer-events: none;
}

.m5-loader-track::after {
  content: "";
  position: absolute;
  z-index: 8;
  top: 50%;
  left: clamp(3%, var(--antropeo-loader-progress, 8%), 97%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fffbe8;
  box-shadow:
    0 0 3px 2px #fff7ba,
    0 0 8px 4px #fbbf24,
    0 0 16px 7px rgba(245, 158, 11, .72),
    0 0 26px 10px rgba(168, 85, 247, .38);
  animation: antropeoLoaderFlarePulse 1.15s ease-in-out infinite;
  pointer-events: none;
}

.m5-loader-fill {
  inset: 3px !important;
  right: 3px !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .12) 25%, rgba(74, 18, 133, .2) 56%, rgba(22, 5, 49, .3) 100%),
    linear-gradient(90deg, #6d28d9 0%, #9333ea 38%, #c084fc 76%, #f0abfc 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -2px 3px rgba(44, 8, 75, .65),
    0 0 7px rgba(192, 132, 252, .82),
    0 0 15px rgba(147, 51, 234, .55) !important;
}

.m5-loader-liquid {
  inset: 3px !important;
  z-index: 3 !important;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, .14) 40%, rgba(255, 245, 199, .72) 50%, rgba(255, 255, 255, .13) 60%, transparent 75%) !important;
  background-size: 230% 100% !important;
  animation: antropeoLoaderSweep 2.2s ease-in-out infinite !important;
}

.m5-loader-shine {
  left: 3px !important;
  right: 3px !important;
  top: 3px !important;
  height: 5px !important;
  z-index: 4 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .04)) !important;
}

.m5-loader-text,
.m5-loader-label {
  color: #d8cdfc !important;
  text-shadow: 0 0 14px rgba(168, 85, 247, .34) !important;
}

.m5-loader[data-state="complete"] .m5-loader-fill {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .12) 30%, rgba(74, 18, 133, .18) 60%),
    linear-gradient(90deg, #7c3aed, #c084fc 72%, #fde68a) !important;
}

.m5-loader-retry {
  background: linear-gradient(135deg, #6d28d9, #9333ea 54%, #c084fc) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    0 10px 28px rgba(126, 34, 206, .42),
    0 2px 6px rgba(0, 0, 0, .4) !important;
}

@media (max-width: 360px) {
  .m5-loader {
    width: calc(100vw - 42px) !important;
    padding-inline: 10px !important;
  }

  .m5-loader::before,
  .m5-loader::after {
    width: 22px;
    height: 22px;
    top: 7.5px;
  }

  .m5-loader-track {
    height: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m5-loader-track::after,
  .m5-loader-liquid {
    animation: none !important;
  }
}