/* Loading screen while the app opens (reload): a briefcase (jobs) with a turning ring around it */
.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--bg);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.boot.done {
  opacity: 0;
}
.boot-load {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
}
.boot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 25%, var(--accent) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: boot-turn 1s linear infinite;
}
.boot-ring::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.boot-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  animation: boot-pulse 1.6s ease-in-out infinite;
}
.boot-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}
@keyframes boot-turn {
  to {
    transform: rotate(360deg);
  }
}
@keyframes boot-pulse {
  0%,
  100% {
    transform: scale(0.92);
  }
  50% {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .boot-ring {
    animation-duration: 3s;
  }
  .boot-icon {
    animation: none;
  }
}