/* ==========================================================
   Balo Seasonal Zen — AURORA LOGO (scoped)
   Safe glow for logo images only; no global backgrounds.
   ========================================================== */

.aurora-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 100%;
}

.aurora-logo img,
.balo-zen-logo {
  width: var(--bzs-logo-size, 160px);
  height: var(--bzs-logo-size, 160px);
  border-radius: 50%;
  object-fit: cover;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.25), rgba(0,0,0,.06));
  border: 3px solid rgba(255,255,255,.6);
  box-shadow:
    0 0 30px rgba(99,102,241,.30),
    0 0 60px rgba(56,189,248,.25),
    inset 0 0 14px rgba(255,255,255,.35);
  transition: box-shadow .6s ease, transform .6s ease, filter .6s ease;
}

.aurora-logo img:hover,
.balo-zen-logo:hover {
  filter: brightness(1.05) saturate(110%);
  box-shadow:
    0 0 40px rgba(99,102,241,.45),
    0 0 80px rgba(56,189,248,.35),
    inset 0 0 18px rgba(255,255,255,.45);
}

/* Gentle float when allowed */
@media (prefers-reduced-motion: no-preference) {
  .balo-zen-logo { animation: aurLogoFloat 6.5s ease-in-out infinite; }
  @keyframes aurLogoFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-8px); }
  }
}

/* Day/Night: adjust only the logo glow */
html.balo-day .aurora-logo img {
  box-shadow:
    0 0 40px rgba(255, 215, 128, .45),
    0 0 80px rgba(255, 215, 128, .30),
    inset 0 0 14px rgba(255,255,255,.40);
}
html.balo-night .aurora-logo img,
html.balo-dark  .aurora-logo img {
  box-shadow:
    0 0 40px rgba(96, 165, 250, .45),
    0 0 80px rgba(59, 130, 246, .30),
    inset 0 0 14px rgba(241,245,249,.35);
}