/* Logo hover reveal: a soft spectrum halo shaped to the horizontal wordmark. */
.brand {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.brand::before {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1);
}

/* Keep the glow wider than the wordmark so it feels like light behind the logo. */
.brand::before {
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 122px;
  height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(255, 197, 71, .66), transparent 42%),
    radial-gradient(ellipse at 50% 38%, rgba(255, 104, 181, .56), transparent 43%),
    radial-gradient(ellipse at 76% 53%, rgba(80, 219, 255, .64), transparent 45%),
    radial-gradient(ellipse at 50% 72%, rgba(153, 255, 169, .40), transparent 55%);
  filter: blur(16px) saturate(1.08);
}

.brand:hover::before,
.brand:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.brand:hover .brand-wordmark,
.brand:focus-visible .brand-wordmark {
  animation: brand-wordmark-breathe 2.4s ease-in-out infinite;
}

.brand:hover::before,
.brand:focus-visible::before {
  animation: brand-glow-breathe 2.8s ease-in-out infinite;
}

.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
  border-radius: 8px;
}

@keyframes brand-glow-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: blur(16px) saturate(1.08); }
  50% { transform: translate(-50%, -50%) scale(1.06); filter: blur(18px) saturate(1.16); }
}

@keyframes brand-wordmark-breathe {
  0%, 100% { transform: translateX(1px) scale(1); }
  50% { transform: translate(1px, -2px) scale(1.05); }
}

@media (max-width: 560px) {
  .brand::before { width: 106px; height: 54px; filter: blur(14px) saturate(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .brand::before {
    transition: opacity 0.01ms;
  }

  .brand:hover::before,
  .brand:focus-visible::before {
    animation: none;
  }

  .brand:hover .brand-wordmark,
  .brand:focus-visible .brand-wordmark {
    animation: none;
    transform: translateX(1px);
  }
}