:root {
  --vls-background: #ffffff;
  --vls-accent: #111111;
  --vls-text: #111111;
}
html.velora-loading-screen-active,
html.velora-loading-screen-active body {
  overflow: hidden;
}
.velora-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vls-background);
  color: var(--vls-text);
  opacity: 1;
  visibility: visible;
  transition: opacity .38s ease, visibility .38s ease;
}
.velora-loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.velora-loading-screen__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.velora-loading-screen__animation {
  width: 116px;
  height: 116px;
  position: relative;
  color: var(--vls-accent);
}
.velora-loading-screen__label {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vls-text);
  opacity: .72;
}
.style-premium .velora-loading-screen__animation { filter: drop-shadow(0 10px 24px rgba(17,17,17,.08)); }
.style-playful .velora-loading-screen__animation { transform: scale(1.04); }
.style-tech .velora-loading-screen__animation { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--vls-accent) 30%, transparent)); }
.style-warm .velora-loading-screen__label { letter-spacing: .12em; }
.style-dynamic .velora-loading-screen__animation { transform: scale(1.08); }

.vls-hanger, .vls-diamond, .vls-circuit, .vls-layers, .vls-brush, .vls-steam, .vls-wheel, .vls-route, .vls-energy, .vls-bounce, .vls-sync, .vls-dashcam {
  position: absolute;
  inset: 0;
}

.vls-hanger span {
  position: absolute;
  display: block;
  left: 50%;
  transform: translateX(-50%);
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 26px 26px;
  opacity: .28;
  animation: vlsPulse 1.6s ease-in-out infinite;
}
.vls-hanger span:nth-child(1){ top: 18px; width: 42px; height: 28px; border-bottom-width: 3px;}
.vls-hanger span:nth-child(2){ top: 54px; width: 66px; height: 18px; animation-delay: .12s;}
.vls-hanger span:nth-child(3){ top: 6px; width: 12px; height: 12px; border-radius: 50%; border-top: 2px solid currentColor; border-bottom: 0;}

.vls-diamond span {
  position: absolute;
  inset: 24px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
  animation: vlsScale 1.8s ease-in-out infinite;
}

.vls-circuit::before,
.vls-circuit::after {
  content: '';
  position: absolute;
  inset: 50% 14px auto 14px;
  height: 2px;
  background: currentColor;
  opacity: .24;
}
.vls-circuit::after {
  inset: 14px 50% 14px auto;
  width: 2px;
  height: auto;
}
.vls-circuit span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  animation: vlsBlink 1.2s linear infinite;
}
.vls-circuit span:nth-child(1){ top: 50%; left: 12px; transform: translateY(-50%); }
.vls-circuit span:nth-child(2){ top: 12px; left: 50%; transform: translateX(-50%); animation-delay: .2s; }
.vls-circuit span:nth-child(3){ top: 50%; right: 12px; transform: translateY(-50%); animation-delay: .4s; }
.vls-circuit span:nth-child(4){ bottom: 12px; left: 50%; transform: translateX(-50%); animation-delay: .6s; }

.vls-layers span {
  position: absolute;
  left: 22px;
  right: 22px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 8px;
  animation: vlsStack 1.6s ease-in-out infinite;
}
.vls-layers span:nth-child(1){ top: 30px; }
.vls-layers span:nth-child(2){ top: 48px; animation-delay: .18s; }
.vls-layers span:nth-child(3){ top: 66px; animation-delay: .36s; }

.vls-brush span {
  position: absolute;
  display: block;
  left: 18px;
  right: 18px;
  height: 8px;
  border-radius: 999px;
  background: currentColor;
  opacity: .18;
  animation: vlsSweep 1.5s ease-in-out infinite;
}
.vls-brush span:nth-child(1){ top: 38px; }
.vls-brush span:nth-child(2){ top: 54px; animation-delay: .12s; }
.vls-brush span:nth-child(3){ top: 70px; animation-delay: .24s; }

.vls-steam i {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 22px;
  height: 22px;
  border: 2px solid currentColor;
  border-radius: 0 0 16px 16px;
}
.vls-steam span {
  position: absolute;
  width: 8px;
  height: 28px;
  border: 2px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  border-radius: 999px;
  opacity: .4;
  animation: vlsSteam 1.6s ease-in-out infinite;
}
.vls-steam span:nth-child(1){ left: 38px; top: 18px; }
.vls-steam span:nth-child(2){ left: 54px; top: 8px; animation-delay: .18s; }
.vls-steam span:nth-child(3){ left: 70px; top: 18px; animation-delay: .36s; }

.vls-wheel span {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-right-color: currentColor;
  animation: vlsRotate 1.1s linear infinite;
}

.vls-route {
  overflow: visible;
}
.vls-route::before {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: 58px;
  height: 2px;
  border-top: 2px dashed currentColor;
  opacity: .22;
}
.vls-route span {
  position: absolute;
  top: 52px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
}
.vls-route span:nth-child(1){ left: 16px; }
.vls-route span:nth-child(2){ left: calc(50% - 5px); }
.vls-route span:nth-child(3){ right: 16px; }
.vls-route i {
  position: absolute;
  top: 48px;
  left: 16px;
  width: 20px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: skewX(18deg);
  animation: vlsTravel 1.8s ease-in-out infinite;
}

.vls-energy {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
}
.vls-energy span {
  width: 10px;
  border-radius: 999px;
  background: currentColor;
  animation: vlsBars 1.1s ease-in-out infinite;
}
.vls-energy span:nth-child(1){ height: 34px; animation-delay: 0s; }
.vls-energy span:nth-child(2){ height: 54px; animation-delay: .1s; }
.vls-energy span:nth-child(3){ height: 42px; animation-delay: .2s; }
.vls-energy span:nth-child(4){ height: 62px; animation-delay: .3s; }

.vls-bounce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.vls-bounce span {
  width: 18px;
  height: 18px;
  background: currentColor;
  border-radius: 6px;
  animation: vlsBounce 1s ease-in-out infinite;
}
.vls-bounce span:nth-child(2){ border-radius: 50%; animation-delay: .14s; }
.vls-bounce span:nth-child(3){ transform: rotate(45deg); border-radius: 4px; animation-delay: .28s; }

.vls-sync span, .vls-sync i, .vls-sync b {
  position: absolute;
  display: block;
}
.vls-sync span:nth-child(1), .vls-sync span:nth-child(2) {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  top: 50px;
}
.vls-sync span:nth-child(1){ left: 14px; }
.vls-sync span:nth-child(2){ right: 14px; }
.vls-sync span:nth-child(3), .vls-sync span:nth-child(4) {
  width: 12px;
  height: 12px;
  background: currentColor;
  border-radius: 4px;
  top: 52px;
  animation: vlsData 1.4s ease-in-out infinite;
}
.vls-sync span:nth-child(3){ left: 30px; }
.vls-sync span:nth-child(4){ right: 30px; animation-delay: .7s; }
.vls-sync i, .vls-sync b {
  top: 57px;
  width: 28px;
  height: 2px;
  background: currentColor;
  opacity: .2;
}
.vls-sync i { left: 30px; }
.vls-sync b { right: 30px; }

.vls-dashcam span {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor;
  animation: vlsRotate 2.2s linear infinite;
}
.vls-dashcam i {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.vls-dashcam b {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e11d48;
  box-shadow: 0 0 0 0 rgba(225, 29, 72, .55);
  animation: vlsRec 1.2s ease-in-out infinite;
}

@keyframes vlsPulse { 0%,100% { opacity:.22; transform: translateX(-50%) translateY(0);} 50% { opacity:1; transform: translateX(-50%) translateY(-3px);} }
@keyframes vlsScale { 0%,100% { transform: rotate(45deg) scale(.88); opacity:.38; } 50% { transform: rotate(45deg) scale(1); opacity:1; } }
@keyframes vlsBlink { 0%,100% { opacity:.22; } 50% { opacity:1; } }
@keyframes vlsStack { 0%,100% { transform: translateY(0); opacity:.35; } 50% { transform: translateY(-6px); opacity:1; } }
@keyframes vlsSweep { 0% { transform: translateX(-8px) scaleX(.82); opacity:.1; } 50% { transform: translateX(0) scaleX(1); opacity:1; } 100% { transform: translateX(8px) scaleX(.82); opacity:.1; } }
@keyframes vlsSteam { 0% { transform: translateY(0); opacity:.12; } 50% { transform: translateY(-8px); opacity:.9; } 100% { transform: translateY(-14px); opacity:0; } }
@keyframes vlsRotate { to { transform: rotate(360deg); } }
@keyframes vlsTravel { 0% { transform: translateX(0) skewX(18deg); opacity:.2; } 50% { transform: translateX(30px) skewX(18deg); opacity:1; } 100% { transform: translateX(60px) skewX(18deg); opacity:.2; } }
@keyframes vlsBars { 0%,100% { transform: scaleY(.5); opacity:.32; } 50% { transform: scaleY(1); opacity:1; } }
@keyframes vlsBounce { 0%,100% { transform: translateY(0) scale(.95); opacity:.4; } 50% { transform: translateY(-12px) scale(1.02); opacity:1; } }
@keyframes vlsData { 0% { transform: translateX(0); opacity:0; } 25% { opacity:1; } 50% { transform: translateX(28px); opacity:1; } 100% { transform: translateX(56px); opacity:0; } }
@keyframes vlsRec { 0%,100% { transform: scale(.9); box-shadow: 0 0 0 0 rgba(225,29,72,.45); } 50% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(225,29,72,0); } }

.style-minimal .velora-loading-screen__animation { opacity: .92; }
.style-premium .velora-loading-screen__animation { animation: vlsPremiumFloat 2.2s ease-in-out infinite; }
.style-playful .velora-loading-screen__animation { animation: vlsPlayfulFloat 1.35s ease-in-out infinite; }
.style-tech .velora-loading-screen__animation { opacity: 1; }
.style-warm .velora-loading-screen__animation { filter: saturate(.9); }
.style-dynamic .velora-loading-screen__animation { animation: vlsDynamicFloat .9s ease-in-out infinite; }
@keyframes vlsPremiumFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-4px);} }
@keyframes vlsPlayfulFloat { 0%,100% { transform: translateY(0) scale(1.02);} 50% { transform: translateY(-8px) scale(1.05);} }
@keyframes vlsDynamicFloat { 0%,100% { transform: translateY(0) scale(1.08);} 50% { transform: translateY(-10px) scale(1.1);} }