.vk-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0d0d0f;
  color: #fff;
  font-family: "Geist", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  opacity: 1;
  visibility: visible;
  isolation: isolate;
  transition: opacity 360ms cubic-bezier(.25, 0, 0, 1), visibility 0s linear 360ms;
  animation: vk-loader-failsafe 1ms linear 5s forwards;
}

.vk-loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(167,139,250, .055), transparent 22%),
    linear-gradient(90deg, transparent 0 49.94%, rgba(255, 255, 255, .06) 50%, transparent 50.06% 100%);
  opacity: .72;
}

.vk-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes vk-loader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.vk-loader-speed {
  position: absolute;
  inset: -12%;
  perspective: 520px;
  transform: rotate(-2deg);
}

.vk-loader-speed::before,
.vk-loader-speed::after {
  content: "";
  position: absolute;
  inset: 8% 2%;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 52px,
    rgba(255, 255, 255, .055) 53px,
    transparent 54px 72px
  );
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 12%, transparent 68%);
  mask-image: radial-gradient(ellipse at center, #000 0 12%, transparent 68%);
  transform: scale(1.2);
  animation: vk-corridor 900ms linear infinite;
}

.vk-loader-speed::after {
  opacity: .44;
  transform: scaleX(-1.2);
  animation-direction: reverse;
}

.vk-loader-speed span {
  --lane: 0;
  --delay: 0s;
  position: absolute;
  top: calc(9% + var(--lane) * 7.4%);
  left: 50%;
  width: clamp(180px, 32vw, 560px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58) 48%, transparent);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .2));
  opacity: 0;
  transform-origin: 0 50%;
  animation: vk-hyper-line 900ms var(--delay) cubic-bezier(.2, .65, .35, 1) infinite;
}

.vk-loader-speed span:nth-child(1) { --lane: 0; --delay: -.84s; }
.vk-loader-speed span:nth-child(2) { --lane: 1; --delay: -.36s; }
.vk-loader-speed span:nth-child(3) { --lane: 2; --delay: -.68s; }
.vk-loader-speed span:nth-child(4) { --lane: 3; --delay: -.18s; }
.vk-loader-speed span:nth-child(5) { --lane: 4; --delay: -.51s; }
.vk-loader-speed span:nth-child(6) { --lane: 5; --delay: -.02s; }
.vk-loader-speed span:nth-child(7) { --lane: 6; --delay: -.73s; }
.vk-loader-speed span:nth-child(8) { --lane: 7; --delay: -.29s; }
.vk-loader-speed span:nth-child(9) { --lane: 8; --delay: -.59s; }
.vk-loader-speed span:nth-child(10) { --lane: 9; --delay: -.11s; }
.vk-loader-speed span:nth-child(11) { --lane: 10; --delay: -.46s; }
.vk-loader-speed span:nth-child(12) { --lane: 11; --delay: -.79s; }

.vk-loader-stage {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(84vw, 420px);
  transform: translateY(-2px);
}

.vk-loader-figure {
  position: relative;
  width: 74px;
  height: 90px;
  margin-bottom: 26px;
  filter: drop-shadow(0 0 18px rgba(167,139,250, .12));
  animation: vk-runner-body 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.vk-loader-figure i {
  position: absolute;
  display: block;
  background: #f4f4f2;
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}

.vk-loader-head {
  top: 0;
  left: 29px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  animation: vk-head 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

.vk-loader-torso {
  top: 20px;
  left: 27px;
  width: 21px;
  height: 37px;
  border-radius: 5px 5px 10px 10px;
  transform: skewX(-7deg);
  background: linear-gradient(150deg, #fff 0 48%, #a78bfa 49% 100%) !important;
}

.vk-loader-arm,
.vk-loader-leg {
  width: 9px;
  border-radius: 8px;
  transform-origin: 50% 4px;
}

.vk-loader-arm { top: 24px; height: 34px; }
.vk-loader-arm--left { left: 22px; animation: vk-limb-a 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.vk-loader-arm--right { left: 45px; animation: vk-limb-b 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.vk-loader-leg { top: 52px; height: 38px; }
.vk-loader-leg--left { left: 29px; animation: vk-limb-b 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.vk-loader-leg--right { left: 40px; animation: vk-limb-a 700ms cubic-bezier(.45, 0, .55, 1) infinite alternate; }

.vk-loader-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .32em;
  text-indent: .32em;
}

.vk-loader-mark::before {
  content: "";
  width: 7px;
  height: 7px;
  background: #a78bfa;
  box-shadow: 0 0 14px rgba(167,139,250, .48);
  animation: vk-pulse 700ms ease-in-out infinite alternate;
}

.vk-loader-note {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, .43);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.vk-loader-progress {
  position: relative;
  width: 132px;
  height: 1px;
  margin-top: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, .13);
}

.vk-loader-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: #a78bfa;
  box-shadow: 0 0 10px rgba(167,139,250, .35);
  animation: vk-progress 900ms cubic-bezier(.25, 0, 0, 1) infinite;
}

@keyframes vk-hyper-line {
  0% { opacity: 0; transform: translate3d(-12%, 0, -220px) scaleX(.06); }
  18% { opacity: .72; }
  100% { opacity: 0; transform: translate3d(-50%, 0, 440px) scaleX(2.35); }
}

@keyframes vk-corridor {
  from { translate: 0 -28px; opacity: .35; }
  to { translate: 0 28px; opacity: .7; }
}

@keyframes vk-runner-body {
  from { transform: translate3d(-2px, 3px, 0) rotate(-2deg); }
  to { transform: translate3d(2px, -3px, 0) rotate(2deg); }
}

@keyframes vk-head {
  from { transform: translateY(1px); }
  to { transform: translateY(-2px); }
}

@keyframes vk-limb-a {
  from { transform: rotate(34deg); }
  to { transform: rotate(-38deg); }
}

@keyframes vk-limb-b {
  from { transform: rotate(-38deg); }
  to { transform: rotate(34deg); }
}

@keyframes vk-pulse {
  from { opacity: .48; transform: rotate(0deg) scale(.82); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}

@keyframes vk-progress {
  from { transform: translateX(-112%); }
  to { transform: translateX(340%); }
}

@media (max-width: 520px) {
  .vk-loader-speed { inset: -4% -38%; }
  .vk-loader-figure { transform: scale(.9); }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-vedika-motion="full"]) .vk-loader *,
  html:not([data-vedika-motion="full"]) .vk-loader *::before,
  html:not([data-vedika-motion="full"]) .vk-loader *::after {
    animation: none !important;
    transition-duration: 80ms !important;
  }

  html:not([data-vedika-motion="full"]) .vk-loader-speed { display: none; }
  html:not([data-vedika-motion="full"]) .vk-loader-progress::after { width: 100%; transform: none; }
}