html.bf-booting {
  background: #f7f3ee;
}
html.bf-booting #root {
  visibility: hidden;
}
html.bf-booting body {
  overflow: hidden;
}

#bf-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background:
    radial-gradient(70% 50% at 12% -8%, #7a0d1218, transparent 55%),
    radial-gradient(55% 40% at 100% 0, #c45c2618, transparent 50%),
    linear-gradient(180deg, #fffaf4 0%, #f7f3ee 48%, #efe6da 100%);
  color: #140e0c;
  font-family: Fraunces, Georgia, serif;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}
#bf-splash.bf-splash-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#bf-splash[data-theme="admin"] {
  background:
    radial-gradient(70% 50% at 10% 0, #8b451324, transparent 55%),
    linear-gradient(180deg, #fbf7f2 0%, #f3ebe3 100%);
}

.bf-splash-mark {
  position: relative;
  width: 156px;
  height: 156px;
  margin-bottom: 1.15rem;
}
.bf-splash-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #7a0d1222;
  border-top-color: #7a0d12;
  border-right-color: #c45c26;
  animation: bf-spin 1.1s linear infinite;
}
.bf-splash-logo {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 28px #7a0d1229;
  animation: bf-logo-pulse 1.8s ease-in-out infinite;
}

.bf-splash-brand {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a0d12;
  margin: 0;
}
.bf-splash-sub {
  margin: 0.55rem 0 0;
  font-size: 0.92rem;
  color: #6b5e57;
  min-height: 1.3em;
  letter-spacing: 0.02em;
}
.bf-splash-bar {
  width: min(240px, 62vw);
  height: 6px;
  margin-top: 1.35rem;
  border-radius: 99px;
  background: #e5dcd1;
  overflow: hidden;
}
.bf-splash-bar > span {
  display: block;
  height: 100%;
  width: 18%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7a0d12, #c45c26, #f4a261);
  animation: bf-bar 1.35s ease-in-out infinite;
}
.bf-splash-dots {
  display: flex;
  gap: 7px;
  margin-top: 1.1rem;
}
.bf-splash-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c45c26;
  animation: bf-dot 1s ease-in-out infinite;
}
.bf-splash-dots i:nth-child(2) { animation-delay: .15s; }
.bf-splash-dots i:nth-child(3) { animation-delay: .3s; }

@keyframes bf-spin { to { transform: rotate(360deg); } }
@keyframes bf-logo-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}
@keyframes bf-bar {
  0% { transform: translateX(-40%); width: 22%; }
  50% { transform: translateX(90%); width: 42%; }
  100% { transform: translateX(280%); width: 22%; }
}
@keyframes bf-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-5px); opacity: 1; }
}

#root img.bf-img-wait {
  opacity: 0;
  background: #ebe4da;
  transition: opacity 0.45s ease;
}
#root img.bf-img-ready {
  opacity: 1;
}