/* Full-browser refresh logo; lightweight fades for ordinary page navigation. */
html.bb-page-loading { overflow: hidden; }
html.bb-page-loading > body > :not(#beatbloomLoader) { visibility: hidden !important; }
html.bb-page-loading dialog::backdrop { visibility: hidden; }
#main.bb-page-exit { animation: bb-page-out 140ms ease-in both; }
#main.bb-page-enter { animation: bb-page-in 220ms ease-out both; }
@keyframes bb-page-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bb-page-in { from { opacity: 0; } to { opacity: 1; } }
#beatbloomLoader {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #f5f0ff;
  background: #080b17;
  opacity: 1;
  transition: opacity 220ms ease;
  cursor: progress;
}
#beatbloomLoader[hidden] { display: none !important; }
#beatbloomLoader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 42%, #a174e827, transparent 52%),
    radial-gradient(ellipse at 68% 64%, #5487df12, transparent 48%);
  animation: bb-atmosphere 6s ease-in-out infinite alternate;
}
#beatbloomLoader::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(#c7b2fa06 1px, transparent 1px),
                    linear-gradient(90deg, #c7b2fa06 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, #000, transparent 65%);
  pointer-events: none;
}
#beatbloomLoader.is-leaving { opacity: 0; pointer-events: none; }
.bb-loader__identity {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 420px);
  padding: 28px 20px;
  text-align: center;
  animation: bb-arrive 500ms cubic-bezier(.2, .7, .3, 1) both;
}
.bb-loader__visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 232px;
  height: 232px;
  margin-bottom: 30px;
  isolation: isolate;
}
.bb-loader__visual::before {
  content: '';
  position: absolute;
  inset: 37px;
  border: 1px solid #deccff26;
  border-radius: 50%;
  background: linear-gradient(145deg, #dccaff0d, #926ad905 65%);
  box-shadow: inset 0 1px 20px #dbc2ff06, 0 18px 65px #02030c50;
}
.bb-loader__halo {
  position: absolute;
  inset: -24px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, #b080f526, #9664e50c 46%, transparent 70%);
  animation: bb-bloom 2800ms ease-in-out infinite;
  pointer-events: none;
}
.bb-loader__orbit {
  position: absolute;
  inset: 0;
  border: 1px solid #c8a8ff16;
  border-top-color: #e3c5ffb3;
  border-right-color: #b286f44d;
  border-radius: 50%;
  animation: bb-orbit 4800ms linear infinite;
}
.bb-loader__orbit::before {
  content: '';
  position: absolute;
  top: 31px;
  right: 31px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e3caff;
  box-shadow: 0 0 14px #c298ff99;
}
.bb-loader__orbit--inner {
  inset: 16px;
  border-color: #c8a8ff0c;
  border-bottom-color: #b9a0fb70;
  animation: bb-orbit 6500ms linear infinite reverse;
}
.bb-loader__orbit--inner::before { display: none; }
.bb-loader__mark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 112px;
  height: 100px;
  filter: drop-shadow(0 0 16px #c298ff66);
}
.bb-loader__mark i {
  display: block;
  width: 12px;
  height: 35px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(180deg, #f2d9ff 0%, #c09bff 52%, #8970ef 100%);
  transform-origin: center;
  animation: bb-beat 1250ms cubic-bezier(.45, 0, .55, 1) infinite;
}
.bb-loader__mark i:nth-child(2) { height: 64px; animation-delay: -980ms; }
.bb-loader__mark i:nth-child(3) { height: 88px; animation-delay: -740ms; }
.bb-loader__mark i:nth-child(4) { height: 56px; animation-delay: -500ms; }
.bb-loader__mark i:nth-child(5) { height: 29px; animation-delay: -260ms; }
.bb-loader__wordmark {
  font: 600 clamp(30px, 4vw, 42px)/1.3 'BeatBloom Manrope', Inter, system-ui, sans-serif;
  letter-spacing: -.02em;
}
.bb-loader__wordmark span { color: #c89bff; }
.bb-loader__label {
  margin: 14px 0 28px;
  max-width: 320px;
  color: #b8b1ca;
  font: 400 12px/1.75 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
}
.bb-loader__track { width: 144px; height: 2px; overflow: hidden; border-radius: 4px; background: #b895eb1f; }
.bb-loader__track span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #d9b7ff 45%, #eacbff 70%, transparent);
  animation: bb-flow 1600ms cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes bb-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bb-orbit { to { transform: rotate(360deg); } }
@keyframes bb-atmosphere { from { opacity: .65; transform: scale(1); } to { opacity: 1; transform: scale(1.12); } }
@keyframes bb-beat { 0%, 100% { transform: scaleY(.48); } 45% { transform: scaleY(1); } 70% { transform: scaleY(.72); } }
@keyframes bb-bloom { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes bb-flow { 0% { transform: translateX(-110%); } 100% { transform: translateX(335%); } }
@media (max-height: 480px) {
  .bb-loader__identity { padding: 16px; }
  .bb-loader__visual { width: 144px; height: 144px; margin-bottom: 12px; }
  .bb-loader__visual::before { inset: 24px; }
  .bb-loader__mark { transform: scale(.65); }
  .bb-loader__wordmark { font-size: 28px; }
  .bb-loader__label { margin: 8px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #main.bb-page-exit, #main.bb-page-enter { animation: none !important; }
  #beatbloomLoader { transition: none; }
  #beatbloomLoader::before, #beatbloomLoader *, #beatbloomLoader *::before { animation: none !important; }
  .bb-loader__track span { width: 100%; }
}
:root[data-motion="reduced"] #beatbloomLoader { transition: none; }
:root[data-motion="reduced"] #main.bb-page-exit,
:root[data-motion="reduced"] #main.bb-page-enter { animation: none !important; }
:root[data-motion="reduced"] #beatbloomLoader::before,
:root[data-motion="reduced"] #beatbloomLoader *,
:root[data-motion="reduced"] #beatbloomLoader *::before { animation: none !important; }
:root[data-motion="reduced"] .bb-loader__track span { width: 100%; }
@media (forced-colors: active) {
  #beatbloomLoader { background: Canvas; color: CanvasText; }
  #beatbloomLoader::before, #beatbloomLoader::after, .bb-loader__halo { display: none; }
  .bb-loader__orbit, .bb-loader__visual::before { border-color: CanvasText; }
  .bb-loader__mark i, .bb-loader__track span { background: Highlight; forced-color-adjust: none; }
  .bb-loader__label, .bb-loader__wordmark span { color: CanvasText; }
}
@media print {
  #beatbloomLoader { display: none !important; }
  html.bb-page-loading > body > :not(#beatbloomLoader) { visibility: visible !important; }
  #main.bb-page-exit, #main.bb-page-enter { animation: none !important; }
}
