/* Branded loader overlay shown during initial page load + fetch transitions.
   Hidden by default; JS adds .visible to show. */
.bl-overlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: radial-gradient(circle at 50% 50%, rgba(15, 15, 28, 0.96), rgba(5, 5, 15, 1));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.bl-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.bl-overlay::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 30%, rgba(233, 69, 96, 0.18), transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(245, 197, 24, 0.14), transparent 40%);
  filter: blur(60px);
  animation: blMeshSpin 14s ease-in-out infinite;
}

@keyframes blMeshSpin {
  0%, 100% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(20deg) scale(1.1);
  }
}

.bl-logo {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(135deg, var(--accent, #e94560), var(--gold, #f5c518));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: blLogoPulse 1.6s ease-in-out infinite;
}

@keyframes blLogoPulse {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.4));
  }
  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 24px rgba(245, 197, 24, 0.55));
  }
}

.bl-tagline {
  position: relative;
  z-index: 1;
  font-size: 11.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  margin-top: 18px;
}

/* Tiny logo hover animation — applied site-wide via the .brand selector */
.brand,
header .brand,
.admin-side .brand,
.player-toolbar a.player-fab[href*="dashboard"] {
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brand:hover {
  transform: translateY(-1px) scale(1.02);
}

.brand img,
.brand .logo {
  transition: filter 240ms ease;
}

.brand:hover img,
.brand:hover .logo {
  filter: drop-shadow(0 0 12px rgba(233, 69, 96, 0.4));
}