[data-bp] {
  --bp-guide: #d3d3db;
  --bp-edge:  var(--ink-nav);
  --bp-fill:  var(--ink-nav);
  --bp-pt:    var(--ink-nav);
  --bp-delay: .8s;
  --bp-io: cubic-bezier(.65, 0, .35, 1);
}
[data-bp].is-warm { --bp-delay: .5s; }

.bp__svg {
  position: relative;
  display: block; width: 100%; height: 100%;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.bp__guides line { stroke: var(--bp-guide); stroke-width: 1; stroke-dasharray: 4 6; }
.bp__fill { fill: var(--bp-fill); }

.bp__fade-fill stop:first-child { stop-color: var(--bp-fill); }
.bp__fade-fill stop:last-child  { stop-color: var(--bp-fill-fade, var(--bp-fill)); }
.bp__fade-edge stop:first-child { stop-color: var(--bp-edge); }
.bp__fade-edge stop:last-child  { stop-color: var(--bp-edge-fade, var(--bp-edge)); }
.bp__edge {
  fill: none; stroke: var(--bp-edge); stroke-width: 1;
  stroke-dasharray: 1 1;
}

.bp__fill,
.bp__edge,
.bp__cut {
  opacity: 0; filter: blur(2px); stroke-dashoffset: 1;
  transition: opacity .3s var(--bp-io), filter .3s var(--bp-io), stroke-dashoffset .3s var(--bp-io);
}
.bp__edge { opacity: 1; }
.bp__cut { filter: none; }
[data-bp].is-drawn:not(.is-apart) :is(.bp__fill, .bp__edge, .bp__cut) {
  opacity: 1; filter: blur(0); stroke-dashoffset: 0;
  transition: opacity 1.5s var(--bp-io) var(--bp-delay),
              filter 1.5s var(--bp-io) var(--bp-delay),
              stroke-dashoffset 1.5s var(--bp-io) var(--bp-delay);
}
[data-bp].is-drawn:not(.is-apart) .bp__cut { filter: none; }

.bp__pt line {
  stroke: var(--bp-pt); stroke-width: 5; stroke-linecap: square;
}
.bp__pt { opacity: 0; transition: opacity .5s cubic-bezier(.33, 1, .68, 1) calc(var(--i, 0) * 50ms); }
[data-bp].is-lit .bp__pt { opacity: 1; }
[data-bp].is-warm:not(.is-apart) .bp__pt { opacity: 0; transition: opacity .6s var(--bp-io) 1.6s; }
[data-bp].is-apart .bp__pt { opacity: 1; transition: opacity .2s ease-out; }

[data-bp-glass].is-warm:not(.is-apart) .bp__pt { opacity: 1; }

.bp__star {
  transform: scale(calc(var(--bp-u, 2.6) * var(--mag, 1)));
  transition: transform .3s var(--bp-io);
}
[data-bp-glass].is-warm:not(.is-apart) .bp__star {
  transform: scale(calc(var(--bp-u, 2.6) * var(--mag, 1) * var(--bp-settle, .78)));
  transition: transform 1.2s var(--bp-io) 1.2s;
}
.bp__halo { opacity: .55; }
.bp__spark, .bp__core { fill: var(--bp-pt); }
.bp__spark {
  transform-box: fill-box; transform-origin: center;
  animation: bp-twinkle calc(2.6s + var(--i, 0) * 170ms) ease-in-out calc(var(--i, 0) * -370ms) infinite;
}
@keyframes bp-twinkle {
  0%, 100% { transform: scale(.55); opacity: .6; }
  50%      { transform: scale(1);   opacity: 1; }
}

.bp__sky {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 1.5s var(--bp-io);
}
[data-bp].is-lit .bp__sky { opacity: 1; }

.bp__rim path { fill: none; stroke: var(--bp-pt); stroke-width: 1.5; }
.bp__lit-fill { opacity: .45; }
.bp__lit-edge { fill: none; stroke-width: 1.5; }
.bp__rim, .bp__lit { opacity: 0; transition: opacity .3s var(--bp-io); }
[data-bp].is-drawn:not(.is-apart) .bp__rim {
  opacity: 1; transition: opacity 1s var(--bp-io) calc(var(--bp-delay) + 1.2s);
}
[data-bp].is-warm:not(.is-apart) .bp__lit {
  opacity: 1; transition: opacity 1.6s var(--bp-io) .6s;
}

[data-bp].is-still, [data-bp].is-still * { transition: none !important; animation: none !important; }