/* Reusable, CSS-only brand glow. Load this stylesheet and use:
   <div class="brand-glow-host">
     <div class="brand-glow" aria-hidden="true"></div>
     <div>Your logo or content</div>
   </div>
   Defaults reproduce the 90px / 70px logo effect. Override --brand-glow-scale
   on the effect layer to scale sizes, blur and drift together for larger cards.
   Position overrides do not change the colors or the 7s / 8.5s timing.
*/
.brand-glow-host {
  position: relative;
  isolation: isolate;
}

.brand-glow {
  --brand-glow-scale: 1;
  --brand-glow-top: -30px;
  --brand-glow-left-1: 56%;
  --brand-glow-left-2: 82%;
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.brand-glow-host > :not(.brand-glow) {
  position: relative;
  z-index: 1;
}

.brand-glow::before,
.brand-glow::after {
  content: "";
  position: absolute;
  top: calc(var(--brand-glow-top) * var(--brand-glow-scale));
  border-radius: 50%;
  filter: blur(calc(20px * var(--brand-glow-scale)));
  opacity: .5;
  will-change: transform;
}

.brand-glow::before {
  left: var(--brand-glow-left-1);
  width: calc(90px * var(--brand-glow-scale));
  height: calc(90px * var(--brand-glow-scale));
  background-color: #ffe680;
  transform: translate(0, calc(4px * var(--brand-glow-scale))) scale(1);
  animation: brandGlow1 7s ease-in-out infinite, brandColor1 7s ease-in-out infinite;
  animation-play-state: var(--brand-glow-play-state, running);
}

.brand-glow::after {
  left: var(--brand-glow-left-2);
  width: calc(70px * var(--brand-glow-scale));
  height: calc(70px * var(--brand-glow-scale));
  background-color: #fff3a0;
  transform: translate(0, calc(10px * var(--brand-glow-scale))) scale(1.05);
  animation: brandGlow2 8.5s ease-in-out infinite, brandColor2 8.5s ease-in-out infinite;
  animation-play-state: var(--brand-glow-play-state, running);
}

@keyframes brandGlow1 {
  0%, 100% { transform: translate(0, calc(4px * var(--brand-glow-scale))) scale(1); }
  50% { transform: translate(calc(-18px * var(--brand-glow-scale)), calc(20px * var(--brand-glow-scale))) scale(1.25); }
}

@keyframes brandGlow2 {
  0%, 100% { transform: translate(0, calc(10px * var(--brand-glow-scale))) scale(1.05); }
  50% { transform: translate(calc(14px * var(--brand-glow-scale)), calc(-6px * var(--brand-glow-scale))) scale(.85); }
}

@keyframes brandColor1 {
  0%, 100% { background-color: #ffe680; }
  33% { background-color: #8ee6b8; }
  66% { background-color: #c9a8f2; }
}

@keyframes brandColor2 {
  0%, 100% { background-color: #fff3a0; }
  40% { background-color: #c9a8f2; }
  75% { background-color: #8ee6b8; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-glow::before,
  .brand-glow::after {
    animation: none;
    will-change: auto;
  }
}