:root {
  --vexeo-loader-brown: #5a301b;
  --vexeo-loader-ivory: #fffaf5;
}

#vexeo-first-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  background: var(--vexeo-loader-brown);
  color: var(--vexeo-loader-ivory);
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
}

#vexeo-first-loader[hidden] { display: none; }
#vexeo-first-loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }

.vexeo-loader-content {
  width: min(124px, 34vw);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vexeo-loader-mark {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.vexeo-loader-dots {
  width: 18px;
  height: 18px;
  margin-top: 7px;
  position: relative;
  animation: vexeo-loader-spin 1.05s linear infinite;
}

.vexeo-loader-dots i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vexeo-loader-ivory);
}

.vexeo-loader-dots i:nth-child(1) { top: 1px; left: 7px; }
.vexeo-loader-dots i:nth-child(2) { top: 7px; right: 1px; }
.vexeo-loader-dots i:nth-child(3) { bottom: 1px; left: 7px; }
.vexeo-loader-dots i:nth-child(4) { top: 7px; left: 1px; }

.vexeo-loader-track {
  width: 124px;
  height: 4px;
  overflow: hidden;
  margin-top: 20px;
  border-radius: 999px;
  background: rgba(255, 250, 245, .19);
}

.vexeo-loader-progress {
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--vexeo-loader-ivory);
  transform-origin: left;
  animation: vexeo-loader-progress 1.15s cubic-bezier(.4, 0, .2, 1) infinite;
}

.vexeo-loader-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes vexeo-loader-spin { to { transform: rotate(360deg); } }
@keyframes vexeo-loader-progress {
  0% { transform: translateX(-110%) scaleX(.72); }
  58% { transform: translateX(110%) scaleX(1.7); }
  100% { transform: translateX(315%) scaleX(.75); }
}

@media (prefers-reduced-motion: reduce) {
  .vexeo-loader-dots, .vexeo-loader-progress { animation: none; }
  .vexeo-loader-progress { width: 55%; }
  #vexeo-first-loader { transition-duration: 120ms; }
}