/*!**********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/loader/style.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************/
.wens-haelo-pro#wens-haelo-pro-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--loader-background-color, #393535);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Ensure it is above other content */
  pointer-events: none;
  /* Prevent interactions */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.wens-haelo-pro#wens-haelo-pro-loader.active {
  opacity: 1;
  visibility: visible;
}

.wens-haelo-pro .loader-animation-save {
  display: flex;
}

.wens-haelo-pro#wens-haelo-pro-loader.active::-webkit-scrollbar {
  display: none;
}

.wens-haelo-pro .inwardSpiral {
  width: calc(var(--loader-size, 90px) * 2);
  aspect-ratio: 2;
  animation: loaderInwardSpiralrev 1s linear infinite;
}
.wens-haelo-pro .inwardSpiral:before, .wens-haelo-pro .inwardSpiral:after {
  content: "";
  flex: 1;
  background: var(--loader-color, #F6CFF4);
  animation: loaderInwardSpiral 1s linear infinite;
  transform-origin: right;
  width: var(--loader-size, 40px);
  height: var(--loader-size, 40px);
}
.wens-haelo-pro .inwardSpiral:after {
  scale: -1 1;
  translate: -70% 0;
  animation-direction: reverse;
}

@keyframes loaderInwardSpiralrev {
  0% {
    translate: 0 -35.35%;
  }
  to {
    translate: 0 35.35%;
  }
}
@keyframes loaderInwardSpiral {
  0% {
    rotate: -45deg;
  }
  to {
    rotate: 45deg;
  }
}
.wens-haelo-pro .rotatingElement:before,
.wens-haelo-pro .rotatingElement:after {
  content: "";
  grid-area: 1/1;
  width: var(--loader-size, 40px);
  height: var(--loader-size, 40px);
  border-radius: var(--loader-radius);
  background: var(--loader-color, #F6CFF4);
  animation: rotatingElement 2s infinite;
}

.wens-haelo-pro .rotatingElement:after {
  animation-delay: -1s;
}

@keyframes rotatingElement {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100%, 0);
  }
  50% {
    transform: translate(100%, 100%);
  }
  75% {
    transform: translate(0, 100%);
  }
  100% {
    transform: translate(0, 0);
  }
}
.wens-haelo-pro .dots {
  width: calc(var(--loader-size, 40px) * 0.754);
  aspect-ratio: 1;
  border-radius: var(--loader-radius);
  animation: loaderDot 1s infinite linear alternate;
}

@keyframes loaderDot {
  0% {
    box-shadow: var(--loader-size, 200px) 0 var(--loader-color, #F6CFF4), calc(-1 * var(--loader-size, 200px)) 0 rgba(0, 0, 0, 0.1333333333);
    background: var(--loader-color, #F6CFF4);
  }
  33% {
    box-shadow: var(--loader-size, 200px) 0 var(--loader-color, #F6CFF4), calc(-1 * var(--loader-size, 200px)) 0 rgba(0, 0, 0, 0.1333333333);
    background: rgba(0, 0, 0, 0.1333333333);
  }
  66% {
    box-shadow: var(--loader-size, 200px) 0 rgba(0, 0, 0, 0.1333333333), calc(-1 * var(--loader-size, 200px)) 0 var(--loader-color, #F6CFF4);
    background: rgba(0, 0, 0, 0.1333333333);
  }
  100% {
    box-shadow: var(--loader-size, 200px) 0 rgba(0, 0, 0, 0.1333333333), calc(-1 * var(--loader-size, 200px)) 0 var(--loader-color, #F6CFF4);
    background: var(--loader-color, #F6CFF4);
  }
}
.wens-haelo-pro .letter {
  width: -moz-fit-content;
  width: fit-content;
  font-size: var(--loader-size, 40px);
  font-family: system-ui, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--loader-color, #F6CFF4);
  background: linear-gradient(-60deg, transparent 45%, var(--loader-color, #F6CFF4) 0 55%, transparent 0) 0/300% 100% no-repeat text;
  animation: letterLoader 2s linear infinite;
}

.wens-haelo-pro .letter:before {
  content: "Loading";
}

@keyframes letterLoader {
  0% {
    background-position: 100%;
  }
}
.wens-haelo-pro .eyes {
  height: var(--loader-size, 40px);
  aspect-ratio: 2;
  display: grid;
  background: radial-gradient(farthest-side, var(--loader-background-color, #393535) 15%, rgba(0, 0, 0, 0) 18%) 0 0/50% 100%, radial-gradient(50% 100% at 50% 160%, var(--loader-color, #ffffff) 95%, transparent) 0 0/50% 50%, radial-gradient(50% 100% at 50% -60%, var(--loader-color, #ffffff) 95%, transparent) 0 100%/50% 50%;
  background-repeat: repeat-x;
  animation: eyeAnimationLoader 1.5s infinite linear;
}

@keyframes eyeAnimationLoader {
  0%, 15% {
    background-position: 0 0, 0 0, 0 100%;
  }
  20%, 40% {
    background-position: 5px 0, 0 0, 0 100%;
  }
  45%, 55% {
    background-position: 0 0, 0 0, 0 100%;
  }
  60%, 80% {
    background-position: -5px 0, 0 0, 0 100%;
  }
  85%, 100% {
    background-position: 0 0, 0 0, 0 100%;
  }
}
.wens-haelo-pro .spinning {
  width: var(--loader-size, 40px);
  padding: var(--spinner-width, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color, #F6CFF4);
  --_m:
  	conic-gradient(#0000 10%, #000),
  	linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
  mask: var(--_m);
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation: spinner-animation 1s infinite linear;
}

@keyframes spinner-animation {
  to {
    transform: rotate(1turn);
  }
}
.wens-haelo-pro .arcade {
  width: -moz-fit-content;
  width: fit-content;
  font-size: calc(var(--loader-size, 40px) * 0.75);
  font-family: monospace;
  line-height: 1.4;
  font-weight: bold;
  color: var(--loader-color, #F6CFF4);
  background: linear-gradient(var(--loader-color, #F6CFF4) 0 0) left, linear-gradient(var(--loader-color, #F6CFF4) 0 0) right;
  background-repeat: no-repeat;
  border-right: 5px solid rgba(0, 0, 0, 0);
  border-left: 5px solid rgba(0, 0, 0, 0);
  background-origin: border-box;
  position: relative;
  animation: loader-arcade-animation-0 2s infinite;
}

.wens-haelo-pro .arcade::before {
  content: "Loading";
}

.wens-haelo-pro .arcade::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: calc(var(--loader-size, 40px) / 2);
  height: calc(var(--loader-size, 40px) * 1.5);
  background: linear-gradient(90deg, var(--loader-color, #F6CFF4) 4px, rgba(0, 0, 0, 0) 0 calc(100% - 4px), var(--loader-color, #F6CFF4) 0) bottom/calc(var(--loader-size, 80px) / 2) calc(var(--loader-size, 80px) / 2), linear-gradient(90deg, red 4px, rgba(0, 0, 0, 0) 0 calc(100% - 4px), red 0) bottom 10px left 0/calc(var(--loader-size, 80px) / 2) calc(var(--loader-size, 80px) / 6), linear-gradient(var(--loader-color, #F6CFF4) 0 0) bottom 3px left 0/calc(var(--loader-size, 80px) / 2) calc(var(--loader-size, 80px) / 5), linear-gradient(var(--loader-color, #F6CFF4) 0 0) bottom 0 left 50%/calc(var(--loader-size, 80px) / 5) calc(var(--loader-size, 80px) / 2);
  background-repeat: no-repeat;
  animation: loader-arcade-animation-1 2s infinite;
}

@keyframes loader-arcade-animation-0 {
  0%, 25% {
    background-size: 50% 100%;
  }
  25.1%, 75% {
    background-size: 0 0, 50% 100%;
  }
  75.1%, 100% {
    background-size: 0 0, 0 0;
  }
}
@keyframes loader-arcade-animation-1 {
  25% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0;
  }
  25.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: 0;
  }
  50% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75% {
    background-position: bottom, bottom 54px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
  75.1% {
    background-position: bottom, bottom 10px left 0, bottom 3px left 0, bottom 0 left 50%;
    left: calc(100% - 22px);
  }
}
.wens-haelo-pro .bar {
  width: var(--loader-size, 45px);
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(var(--loader-color, #F6CFF4) 0 0);
  background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: wens-haelo-pro-bar 1s infinite linear;
}

@keyframes wens-haelo-pro-bar {
  0% {
    background-size: 20% 100%, 20% 100%, 20% 100%;
  }
  33% {
    background-size: 20% 10%, 20% 100%, 20% 100%;
  }
  50% {
    background-size: 20% 100%, 20% 10%, 20% 100%;
  }
  66% {
    background-size: 20% 100%, 20% 100%, 20% 10%;
  }
  100% {
    background-size: 20% 100%, 20% 100%, 20% 100%;
  }
}
.wens-haelo-pro .progress {
  width: var(--loader-size, 50px);
  height: calc(var(--loader-size, 50px) * 0.5);
  color: var(--loader-color, #F6CFF4);
  border: 2px solid currentColor;
  border-right-color: transparent;
  padding: calc(var(--loader-size, 3px) * 0.05);
  background: repeating-linear-gradient(90deg, currentColor 0 10px, rgba(0, 0, 0, 0) 0 15px) 0/0% no-repeat content-box content-box;
  position: relative;
  box-sizing: border-box;
  animation: wens-haelo-pro-progress 2s infinite steps(6);
}

.progress::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 100%;
  width: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0) calc(50% - 7px), currentColor 0 calc(50% - 5px), rgba(0, 0, 0, 0) 0 calc(50% + 5px), currentColor 0 calc(50% + 7px), rgba(0, 0, 0, 0) 0) left/100% 100%, linear-gradient(currentColor calc(50% - 5px), rgba(0, 0, 0, 0) 0 calc(50% + 5px), currentColor 0) left/2px 100%, linear-gradient(rgba(0, 0, 0, 0) calc(50% - 5px), currentColor 0 calc(50% + 5px), rgba(0, 0, 0, 0) 0) right/2px 100%;
  background-repeat: no-repeat;
}

@keyframes wens-haelo-pro-progress {
  100% {
    background-size: 120%;
  }
}
.wens-haelo-pro .wobbling {
  width: var(--loader-size, 50px);
  aspect-ratio: 1;
  background: var(--loader-color, #F6CFF4);
  box-shadow: 0 0 60px 15px var(--loader-color, #F6CFF4);
  transform: translate(-80px);
  clip-path: inset(0);
  animation: wens-haelo-pro-wobbling-alternate 0.5s ease-in-out infinite alternate, wens-haelo-pro-wobbling 1s ease-in-out infinite;
}

@keyframes wens-haelo-pro-wobbling-alternate {
  100% {
    transform: translateX(calc(var(--loader-size, 50px) * 2));
  }
}
@keyframes wens-haelo-pro-wobbling {
  33% {
    clip-path: inset(0 0 0 -100px);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
  83% {
    clip-path: inset(0 -100px 0 0);
  }
}
.wens-haelo-pro .infinity {
  width: calc(var(--loader-size, 50px) * 4);
  height: var(--loader-size, 50px);
  --c: 50%, var(--loader-color, #F6CFF4) 90deg, #0000 0;
  background: conic-gradient(from 45deg at calc(100% - var(--loader-size, 50px) * 0.3) var(--c)), conic-gradient(from -135deg at calc(var(--loader-size, 50px) * 0.3) var(--c));
  background-position: 33.3333333333% 0;
  background-size: 25% 100%;
  animation: wens-haelo-pro-infinity 0.5s infinite linear;
}

@keyframes wens-haelo-pro-infinity {
  100% {
    background-position: 0 0;
  }
}
.wens-haelo-pro .zigzag {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wens-haelo-pro .zigzag:before,
.wens-haelo-pro .zigzag:after {
  content: "";
  display: block;
  height: var(--loader-size, 50px);
  aspect-ratio: 5;
  --c: var(--loader-color, #F6CFF4) 90deg, #0000 0;
  background: conic-gradient(from 135deg at top, var(--c)), conic-gradient(from -45deg at bottom, var(--c)) 12.5% 100%;
  background-size: 20% 50%;
  background-repeat: repeat-x;
  clip-path: inset(0 50%);
  animation: wens-haelo-pro-zigzag 1s infinite steps(5) alternate;
}

.wens-haelo-pro .zigzag:after {
  animation-delay: -1s;
}

@keyframes wens-haelo-pro-zigzag {
  90%, to {
    clip-path: inset(0);
  }
}
.wens-haelo-pro .mechanic {
  display: inline-grid;
  width: var(--loader-size, 50px);
  aspect-ratio: 1;
  animation: wens-haelo-pro-mechanic-rotate 6s linear infinite;
}

.wens-haelo-pro .mechanic:before,
.wens-haelo-pro .mechanic:after {
  content: "";
  grid-area: 1/1;
}

.wens-haelo-pro .mechanic:before {
  clip-path: polygon(100% 50%, 83.81% 59.06%, 93.3% 75%, 74.75% 74.75%, 75% 93.3%, 59.06% 83.81%, 50% 100%, 40.94% 83.81%, 25% 93.3%, 25.25% 74.75%, 6.7% 75%, 16.19% 59.06%, 0% 50%, 16.19% 40.94%, 6.7% 25%, 25.25% 25.25%, 25% 6.7%, 40.94% 16.19%, 50% 0%, 59.06% 16.19%, 75% 6.7%, 74.75% 25.25%, 93.3% 25%, 83.81% 40.94%);
  background: var(--loader-color, #F6CFF4);
  transform: rotate(0turn) translate(-12.5%) rotate(0turn);
  animation: wens-haelo-pro-mechanic-transform 2s linear infinite;
}

.wens-haelo-pro .mechanic:after {
  margin: 12.5%;
  clip-path: polygon(100% 50%, 78.19% 60.26%, 88.3% 82.14%, 65% 75.98%, 58.68% 99.24%, 44.79% 79.54%, 25% 93.3%, 27.02% 69.28%, 3.02% 67.1%, 20% 50%, 3.02% 32.9%, 27.02% 30.72%, 25% 6.7%, 44.79% 20.46%, 58.68% 0.76%, 65% 24.02%, 88.3% 17.86%, 78.19% 39.74%);
  background: var(--loader-background-color, #393535);
}

@keyframes wens-haelo-pro-mechanic-rotate {
  to {
    rotate: 1turn;
  }
}
@keyframes wens-haelo-pro-mechanic-transform {
  to {
    transform: rotate(-1turn) translate(-12.5%) rotate(0.75turn);
  }
}
.wens-haelo-pro .flipping {
  width: var(--loader-size, 50px);
  aspect-ratio: 1;
  display: grid;
  grid: 50%/50%;
  color: var(--loader-color, #F6CFF4);
  --_g: no-repeat linear-gradient(currentColor 0 0);
  background: var(--_g), var(--_g), var(--_g);
  background-size: 49% 49%;
  animation: wens-haelo-pro-flipping-0 1.5s infinite steps(1) alternate, wens-haelo-pro-flipping-0-0 3s infinite steps(1);
}

.wens-haelo-pro .flipping::before {
  content: "";
  background: currentColor;
  transform: perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right;
  animation: wens-haelo-pro-flipping-1 1.5s infinite linear alternate;
}

@keyframes wens-haelo-pro-flipping-0 {
  0% {
    background-position: 0 100%, 100% 100%, 100% 0;
  }
  33% {
    background-position: 100% 100%, 100% 100%, 100% 0;
  }
  66% {
    background-position: 100% 0, 100% 0, 100% 0;
  }
}
@keyframes wens-haelo-pro-flipping-0-0 {
  0% {
    transform: scaleX(1) rotate(0deg);
  }
  50% {
    transform: scaleX(-1) rotate(-90deg);
  }
}
@keyframes wens-haelo-pro-flipping-1 {
  16.5% {
    transform: perspective(150px) rotateX(-90deg) rotateY(0deg) rotateX(0deg);
    filter: grayscale(0.8);
  }
  33% {
    transform: perspective(150px) rotateX(-180deg) rotateY(0deg) rotateX(0deg);
  }
  66% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg);
  }
  100% {
    transform: perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);
    filter: grayscale(0.8);
  }
}
.wens-haelo-pro .pulsing {
  width: var(--loader-size, 50px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color, #F6CFF4);
  box-shadow: 0 0 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.25);
  animation: wens-haelo-pro-pulsing 1.5s infinite linear;
  position: relative;
}

.wens-haelo-pro .pulsing:before,
.wens-haelo-pro .pulsing:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.15);
  animation: inherit;
  animation-delay: -0.5s;
}

.wens-haelo-pro .pulsing:after {
  animation-delay: -1s;
}

@keyframes wens-haelo-pro-pulsing {
  100% {
    box-shadow: 0 0 0 40px rgba(var(--loader-rgb, 246, 207, 244), 0);
  }
}
.wens-haelo-pro .hypnotic {
  width: var(--loader-size, 50px);
  height: calc(var(--loader-size, 50px) * 2);
  display: grid;
  color: var(--loader-color, #F6CFF4);
  background: linear-gradient(currentColor 0 0) top/100% 2px, radial-gradient(farthest-side at top, rgba(0, 0, 0, 0) calc(100% - 2px), currentColor calc(100% - 1px), rgba(0, 0, 0, 0)) top, linear-gradient(currentColor 0 0) bottom/100% 2px, radial-gradient(farthest-side at bottom, rgba(0, 0, 0, 0) calc(100% - 2px), currentColor calc(100% - 1px), rgba(0, 0, 0, 0)) bottom;
  background-size: 100% 1px, 100% 50%;
  background-repeat: no-repeat;
  animation: wens-haelo-pro-hypnotic 4s infinite linear;
}

.wens-haelo-pro .hypnotic::before,
.wens-haelo-pro .hypnotic::after {
  content: "";
  grid-area: 1/1;
  background: inherit;
  border: inherit;
  animation: inherit;
}

.wens-haelo-pro .hypnotic::after {
  animation-duration: 2s;
}

@keyframes wens-haelo-pro-hypnotic {
  100% {
    transform: rotate(1turn);
  }
}
.wens-haelo-pro .factory {
  width: calc(var(--loader-size, 50px) * 1.8);
  height: calc(var(--loader-size, 50px) * 0.28);
  box-shadow: 0 calc(var(--loader-size, 50px) * 0.06) 0 var(--loader-color, #F6CFF4);
  position: relative;
  clip-path: inset(calc(var(--loader-size, 50px) * -0.8) 0 calc(var(--loader-size, 50px) * -0.1));
}

.wens-haelo-pro .factory:before {
  content: "";
  position: absolute;
  inset: auto calc(50% - var(--loader-size, 50px) * 0.34) 0;
  height: calc(var(--loader-size, 50px));
  --g: no-repeat linear-gradient(rgba(var(--loader-rgb), 0.7) 0 0);
  background: var(--g), var(--g), var(--g), var(--g);
  background-size: calc(var(--loader-size, 50px) * 0.32) calc(var(--loader-size, 50px) * 0.28);
  animation: wens-haelo-pro-factory-1 2s infinite linear, wens-haelo-pro-factory-2 2s infinite linear;
}

@keyframes wens-haelo-pro-factory-1 {
  0%, 100% {
    background-position: 0 calc(var(--loader-size, 50px) * -1), 100% calc(var(--loader-size, 50px) * -1);
  }
  17.5% {
    background-position: 0 100%, 100% calc(var(--loader-size, 50px) * -1), 0 calc(var(--loader-size, 50px) * -1), 100% calc(var(--loader-size, 50px) * -1);
  }
  35% {
    background-position: 0 100%, 100% 100%, 0 calc(var(--loader-size, 50px) * -1), 100% calc(var(--loader-size, 50px) * -1);
  }
  52.5% {
    background-position: 0 100%, 100% 100%, 0 calc(100% - var(--loader-size, 50px) * 0.32), 100% calc(var(--loader-size, 50px) * -1);
  }
  70%, 98% {
    background-position: 0 100%, 100% 100%, 0 calc(100% - var(--loader-size, 50px) * 0.32), 100% calc(100% - var(--loader-size, 50px) * 0.32);
  }
}
@keyframes wens-haelo-pro-factory-2 {
  0%, 70% {
    transform: translate(0);
  }
  100% {
    transform: translate(200%);
  }
}
.wens-haelo-pro .clones {
  width: var(--loader-size, 50px); /* Dynamically adjust the size */
  height: var(--loader-size, 50px); /* Ensure the height follows the same size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--loader-color, #F6CFF4); /* Dynamically adjust background color */
  animation: wens-haelo-pro-clones 1.5s infinite linear;
}

@keyframes wens-haelo-pro-clones {
  0% {
    box-shadow: 0 calc(-1 * var(--loader-size, 50px) / 2) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), var(--loader-size, 50px) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  12.5% {
    box-shadow: 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), var(--loader-size, 50px) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  25% {
    box-shadow: 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), var(--loader-size, 50px) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 calc(var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  37.5% {
    box-shadow: 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 calc(var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  50% {
    box-shadow: 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 calc(var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px)) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  62.5% {
    box-shadow: 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px)) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  75% {
    box-shadow: 0 calc(-1 * var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px)) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  87.5% {
    box-shadow: 0 calc(-1 * var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(-1 * var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
  100% {
    box-shadow: 0 calc(-1 * var(--loader-size, 50px)) rgba(var(--loader-rgb, 246, 207, 244), 0.7), calc(var(--loader-size, 50px) * 0.707) calc(-1 * var(--loader-size, 50px) * 0.707) rgba(var(--loader-rgb, 246, 207, 244), 0.7), var(--loader-size, 50px) 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7), 0 0 rgba(var(--loader-rgb, 246, 207, 244), 0.7);
  }
}
.wens-haelo-pro .clock {
  width: var(--loader-size, 50px); /* Dynamically set the size */
  aspect-ratio: 1;
  color: var(--loader-color, #F6CFF4); /* Use the loader color */
  border: 7px solid;
  box-sizing: border-box;
  border-radius: 50%;
  background: radial-gradient(circle 3px, #000 95%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0) 0) center/3px 70%, linear-gradient(90deg, #000 50%, rgba(0, 0, 0, 0) 0) center/50% 3px;
  background-repeat: no-repeat;
  position: relative;
  animation: wens-haelo-pro-clock 1s infinite;
}

.wens-haelo-pro .clock:before,
.wens-haelo-pro .clock:after {
  content: "";
  position: absolute;
  border-radius: 20px 20px 0 0;
  inset: -20px calc(50% - 10px);
  transform: rotate(40deg);
  background: linear-gradient(currentColor 0 0) top/100% 10px, linear-gradient(currentColor 0 0) bottom/3px 10px;
  background-repeat: no-repeat;
}

.wens-haelo-pro .clock:after {
  transform: rotate(-40deg);
}

@keyframes wens-haelo-pro-clock {
  0%, 70%, 100% {
    transform: translateY(0) rotate(0);
  }
  75%, 85%, 95% {
    transform: translateY(-3px) rotate(10deg);
  }
  80%, 90% {
    transform: translateY(-3px) rotate(-10deg);
  }
}
.wens-haelo-pro .clock {
  box-shadow: 0 0 10px rgba(var(--loader-rgb, 246, 207, 244), 0.7); /* Add color variant with transparency */
}

/*# sourceMappingURL=style-index.css.map*/