/* Grid loader adapted from UI Ball Loaders (MIT): https://uiball.com/loaders/ */
.canvas-boot-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: grid;
  place-items: center;
  color: #171717;
  background: inherit;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 300ms;
}

html[data-theme='dark'] .canvas-boot-loader {
  color: #fafafa;
  background: inherit;
}

html.is-canvas-page .canvas-boot-loader:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.canvas-boot-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 300ms;
}

.canvas-boot-grid {
  --uib-size: 120px;
  --uib-color: currentColor;
  --uib-speed: 1.5s;
  --uib-dot-size: calc(var(--uib-size) * 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--uib-size) * 0.64);
  height: calc(var(--uib-size) * 0.64);
}

@keyframes canvasBootGridJump {
  0%,
  100% {
    transform: translateY(120%);
  }

  50% {
    transform: translateY(-120%);
  }
}

.canvas-boot-grid-dot {
  --uib-d1: -0.48;
  --uib-d2: -0.4;
  --uib-d3: -0.32;
  --uib-d4: -0.24;
  --uib-d5: -0.16;
  --uib-d6: -0.08;
  --uib-d7: 0;
  position: absolute;
  right: calc(var(--uib-right) + var(--uib-dot-size) / 2);
  bottom: calc(var(--uib-bottom) + var(--uib-dot-size) / 2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--uib-dot-size);
  height: var(--uib-dot-size);
  opacity: var(--uib-scale);
  animation: canvasBootGridJump var(--uib-speed) ease-in-out infinite;
  backface-visibility: hidden;
  will-change: transform;
}

.canvas-boot-grid-dot::before {
  width: 100%;
  height: 100%;
  background-color: var(--uib-color);
  border-radius: 50%;
  transform: scale(var(--uib-scale));
  content: '';
}

.canvas-boot-grid-dot:nth-child(1) { --uib-bottom: 24%; --uib-right: -35%; animation-delay: calc(var(--uib-speed) * var(--uib-d1)); }
.canvas-boot-grid-dot:nth-child(2) { --uib-bottom: 16%; --uib-right: -6%; animation-delay: calc(var(--uib-speed) * var(--uib-d2)); }
.canvas-boot-grid-dot:nth-child(3) { --uib-bottom: 8%; --uib-right: 23%; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.canvas-boot-grid-dot:nth-child(4) { --uib-bottom: -1%; --uib-right: 51%; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.canvas-boot-grid-dot:nth-child(5) { --uib-bottom: 38%; --uib-right: -17.5%; animation-delay: calc(var(--uib-speed) * var(--uib-d2)); }
.canvas-boot-grid-dot:nth-child(6) { --uib-bottom: 30%; --uib-right: 10%; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.canvas-boot-grid-dot:nth-child(7) { --uib-bottom: 22%; --uib-right: 39%; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.canvas-boot-grid-dot:nth-child(8) { --uib-bottom: 14%; --uib-right: 67%; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.canvas-boot-grid-dot:nth-child(9) { --uib-bottom: 53%; --uib-right: -0.8%; animation-delay: calc(var(--uib-speed) * var(--uib-d3)); }
.canvas-boot-grid-dot:nth-child(10) { --uib-bottom: 44.5%; --uib-right: 27%; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.canvas-boot-grid-dot:nth-child(11) { --uib-bottom: 36%; --uib-right: 55.7%; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.canvas-boot-grid-dot:nth-child(12) { --uib-bottom: 28.7%; --uib-right: 84.3%; animation-delay: calc(var(--uib-speed) * var(--uib-d6)); }
.canvas-boot-grid-dot:nth-child(13) { --uib-bottom: 66.8%; --uib-right: 15%; animation-delay: calc(var(--uib-speed) * var(--uib-d4)); }
.canvas-boot-grid-dot:nth-child(14) { --uib-bottom: 58.8%; --uib-right: 43%; animation-delay: calc(var(--uib-speed) * var(--uib-d5)); }
.canvas-boot-grid-dot:nth-child(15) { --uib-bottom: 50%; --uib-right: 72%; animation-delay: calc(var(--uib-speed) * var(--uib-d6)); }
.canvas-boot-grid-dot:nth-child(16) { --uib-bottom: 42%; --uib-right: 100%; animation-delay: calc(var(--uib-speed) * var(--uib-d7)); }

.canvas-boot-grid-dot:nth-child(3) { --uib-scale: 0.98; }
.canvas-boot-grid-dot:nth-child(2),
.canvas-boot-grid-dot:nth-child(8) { --uib-scale: 0.96; }
.canvas-boot-grid-dot:nth-child(1),
.canvas-boot-grid-dot:nth-child(7) { --uib-scale: 0.94; }
.canvas-boot-grid-dot:nth-child(6),
.canvas-boot-grid-dot:nth-child(12) { --uib-scale: 0.92; }
.canvas-boot-grid-dot:nth-child(5),
.canvas-boot-grid-dot:nth-child(11) { --uib-scale: 0.9; }
.canvas-boot-grid-dot:nth-child(10),
.canvas-boot-grid-dot:nth-child(16) { --uib-scale: 0.88; }
.canvas-boot-grid-dot:nth-child(9),
.canvas-boot-grid-dot:nth-child(15) { --uib-scale: 0.86; }
.canvas-boot-grid-dot:nth-child(14) { --uib-scale: 0.84; }
.canvas-boot-grid-dot:nth-child(13) { --uib-scale: 0.82; }

.canvas-boot-loader.is-hidden .canvas-boot-grid-dot {
  animation-play-state: paused;
}

@media (max-width: 768px) {
  .canvas-boot-loader {
    bottom: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .canvas-boot-loader {
    transition: none;
  }

  .canvas-boot-grid-dot {
    animation: none;
  }
}