/* Shared decorative wordmark interaction; size and static fallback belong to the consumer. */
.brand-logo.has-inline-svg {
  position: relative;
  aspect-ratio: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
}

.brand-logo svg { display: block; width: 100%; overflow: visible; transform-origin: center; }
.brand-logo .logo-base { transition: opacity var(--loop-duration-normal) ease; }
.brand-logo .logo-ambient {
  position: absolute;
  inset: 0;
  color: var(--loop-color-live);
  filter: drop-shadow(0 0 5px rgb(199 255 58 / 0.5));
  opacity: 0;
  -webkit-mask-image: radial-gradient(circle 38px at var(--logo-pointer-x, 50%) var(--logo-pointer-y, 50%), #000 0 44%, rgb(0 0 0 / 0.78) 68%, transparent 100%);
  mask-image: radial-gradient(circle 38px at var(--logo-pointer-x, 50%) var(--logo-pointer-y, 50%), #000 0 44%, rgb(0 0 0 / 0.78) 68%, transparent 100%);
  pointer-events: none;
  transition: opacity var(--loop-duration-normal) ease;
}

.brand-logo .logo-active {
  position: absolute;
  inset: 0;
  color: var(--loop-color-live);
  filter: drop-shadow(0 0 5px rgb(199 255 58 / 0.7));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--loop-duration-normal) ease;
}

.brand-logo .logo-active path { opacity: 0; }

.brand-logo .logo-current {
  position: absolute;
  inset: 0;
  color: var(--loop-color-live);
  filter: drop-shadow(0 0 4px rgb(199 255 58 / 1));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--loop-duration-normal) ease;
}

.brand-logo .logo-current path { opacity: 0; }
.brand-logo .logo-current .logo-spark { fill: currentColor; stroke: none; opacity: 0; transition: opacity var(--loop-duration-quick) ease; }

.brand-logo:hover .logo-base,
.brand:focus-visible .logo-base { opacity: 0.48; }
.brand-logo:hover .logo-ambient,
.brand-logo:hover .logo-active,
.brand-logo:hover .logo-current,
.brand:focus-visible .logo-ambient,
.brand:focus-visible .logo-active,
.brand:focus-visible .logo-current { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .brand-logo *, .brand-logo *::before, .brand-logo *::after { transition: none !important; animation: none !important; }
}