/* A single reflection over the B, never a looping loading indicator. */
#bg-splash {
  position: fixed;
  inset: 0;
  background-color: #17191c;
  z-index: 2147483647;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s;
}
#bg-splash-logo {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 22px;
  box-shadow: 0 10px 32px rgb(0 0 0 / 18%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
#bg-splash-logo img {
  display: block;
  width: 100%;
  height: 100%;
}
#bg-splash-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgb(255 255 255 / 70%) 50%, transparent 58%);
  background-size: 300% 100%;
  -webkit-mask: url('/brand/mark-mask.svg') center / contain no-repeat;
  mask: url('/brand/mark-mask.svg') center / contain no-repeat;
  animation: bg-metal-reflection 700ms ease-out 60ms 1 both;
}
@keyframes bg-metal-reflection {
  from { background-position: 130% 0; opacity: 0; }
  20% { opacity: 0.7; }
  75% { opacity: 0.5; }
  to { background-position: -30% 0; opacity: 0; }
}
.bg-splash-exit {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.bg-splash-exit #bg-splash-logo { transform: scale(0.94); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #bg-splash, #bg-splash-logo { transition: none; }
  #bg-splash-logo::after { animation: none; display: none; }
  .bg-splash-exit #bg-splash-logo { transform: none; }
}