/* Library boot — B&W shapes shuffle (no text) */
#lib-boot {
  --lib-boot-ink: #111111;
  --lib-boot-soft: #f3f4f6;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

#lib-boot.lib-boot--out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#lib-boot.lib-boot--dark {
  --lib-boot-ink: #e8edf5;
  --lib-boot-soft: #243044;
  background: #0f1419;
}

#lib-boot.lib-boot--dark .lib-boot__shape--b {
  background: #334155;
}

.lib-boot__stage {
  position: relative;
  width: 156px;
  height: 120px;
}

.lib-boot__shape {
  position: absolute;
  border-radius: 24px;
  will-change: transform, left, top, width, height;
}

.lib-boot__shape--a {
  z-index: 1;
  background: var(--lib-boot-soft);
  animation: lib-boot-a 2.1s ease-in-out infinite;
}

.lib-boot__shape--b {
  z-index: 2;
  background: #e5e7eb;
  animation: lib-boot-b 2.1s ease-in-out infinite;
}

.lib-boot__shape--c {
  z-index: 3;
  background: var(--lib-boot-ink);
  animation: lib-boot-c 2.1s ease-in-out infinite;
}

/* slot 1: large bottom-left | slot 2: medium top-right | slot 3: small top-center */
@keyframes lib-boot-a {
  0%, 100% {
    left: 0;
    top: 32px;
    width: 104px;
    height: 84px;
    border-radius: 28px;
    z-index: 1;
  }
  33% {
    left: 84px;
    top: 0;
    width: 68px;
    height: 68px;
    border-radius: 22px;
    z-index: 3;
  }
  66% {
    left: 44px;
    top: 8px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    z-index: 2;
  }
}

@keyframes lib-boot-b {
  0%, 100% {
    left: 84px;
    top: 0;
    width: 68px;
    height: 68px;
    border-radius: 22px;
    z-index: 2;
  }
  33% {
    left: 44px;
    top: 8px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    z-index: 1;
  }
  66% {
    left: 0;
    top: 32px;
    width: 104px;
    height: 84px;
    border-radius: 28px;
    z-index: 3;
  }
}

@keyframes lib-boot-c {
  0%, 100% {
    left: 44px;
    top: 8px;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    z-index: 3;
  }
  33% {
    left: 0;
    top: 32px;
    width: 104px;
    height: 84px;
    border-radius: 28px;
    z-index: 2;
  }
  66% {
    left: 84px;
    top: 0;
    width: 68px;
    height: 68px;
    border-radius: 22px;
    z-index: 1;
  }
}

html.lib-boot-active,
html.lib-boot-active body {
  overflow: hidden;
}