html[data-runtime="no-js"] #bf-boot,
html[data-boot="done"] #bf-boot {
  display: none;
}

#bf-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bfb-bg);
}

[data-theme="light"] #bf-boot {
  --bfb-bg: #f5f4ef;
  --bfb-ink: #2e8b57;
  --bfb-bk: #fff;
  --bfb-farm: #1b2a20;
}

[data-theme="dark"] #bf-boot {
  --bfb-bg: radial-gradient(120% 90% at 50% -10%, #10201a 0%, #0f131b 40%, #0a0d12 100%);
  --bfb-ink: #3cb371;
  --bfb-bk: #fff;
  --bfb-farm: #f3f5f2;
}

.bfb-stage {
  transform-origin: center;
  animation: bfb-exit 1007ms cubic-bezier(.4, 0, .2, 1) 1 forwards;
}

.bfb-mark {
  display: block;
  width: min(268px, 72vw);
  height: auto;
  overflow: visible;
}

.bfb-tile-stroke {
  fill: none;
  stroke: var(--bfb-ink);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: bfb-draw 1007ms cubic-bezier(.66, 0, .2, 1) 1 forwards;
}

.bfb-tile-fill {
  fill: var(--bfb-ink);
  opacity: 0;
  animation: bfb-tile 1007ms linear 1 forwards;
}

.bfb-b {
  fill: var(--bfb-bk);
  opacity: 0;
  animation: bfb-b 1007ms linear 1 forwards;
}

.bfb-farm {
  fill: var(--bfb-farm);
  opacity: 0;
  animation: bfb-farm 1007ms cubic-bezier(.22, 1, .36, 1) 1 forwards;
}

@keyframes bfb-draw {
  0% { stroke-dashoffset: 1; }
  45.3%, 100% { stroke-dashoffset: 0; }
}

@keyframes bfb-tile {
  0%, 43.4% { opacity: 0; }
  56.6%, 100% { opacity: 1; }
}

@keyframes bfb-b {
  0%, 47.2% { opacity: 0; }
  58.5%, 100% { opacity: 1; }
}

@keyframes bfb-farm {
  0%, 50.9% { opacity: 0; translate: 7px 0; }
  69.8%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes bfb-exit {
  0%, 75.5% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  #bf-boot { display: none; }
}