/* [project]/components/system/boot.css [app-client] (css) */
.boot {
  z-index: 1000;
  background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--color-crimson) 14%, transparent), transparent 70%),
    var(--color-ink);
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  transition: opacity .3s ease-out, visibility 0s linear .3s;
  animation: 0s linear 9s forwards boot-failsafe;
  display: grid;
  position: fixed;
  inset: 0;
}

html.booted .boot {
  display: none;
}

.boot--out {
  opacity: 0;
  visibility: hidden;
}

.boot__mark {
  aspect-ratio: 1;
  width: min(42vw, 192px);
  animation: 1.6s ease-in-out infinite boot-bob;
}

.boot__cat {
  object-fit: contain;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 24px color-mix(in srgb, var(--color-crimson) 35%, transparent));
}

.boot__bar {
  background: color-mix(in srgb, var(--color-bone) 14%, transparent);
  border-radius: 999px;
  width: min(56vw, 220px);
  height: 4px;
  overflow: hidden;
}

.boot__bar i {
  height: 100%;
  width: calc(var(--boot-p, .08) * 100%);
  background: var(--color-crimson);
  border-radius: inherit;
  transition: width .26s ease-out;
  display: block;
}

.boot__label {
  font-family: var(--font-sans);
  letter-spacing: .04em;
  color: var(--color-bone-dim);
  font-size: .875rem;
}

@keyframes boot-bob {
  50% {
    transform: translateY(-6px) rotate(-2deg);
  }
}

@keyframes boot-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot__mark {
    animation: none;
  }

  .boot, .boot__bar i {
    transition: none;
  }
}