.brand-logo {
  position: relative;
  display: inline-grid;
  flex: none;
  vertical-align: middle;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-logo {
    --logo-cycle: 5.8s;
    --logo-delay: .32s;
    isolation: isolate;
    overflow: hidden;
    border-radius: 17%;
    animation: brand-logo-lift var(--logo-cycle) ease-out var(--logo-delay) infinite;
  }

  .site-footer .brand-logo {
    --logo-delay: 1.02s;
  }

  .brand-logo::before,
  .brand-logo::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
  }

  .brand-logo::before {
    inset: 5%;
    border: 1px solid transparent;
    border-top-color: #e9ffa9;
    border-right-color: #d7f95b91;
    border-radius: 15%;
    animation: brand-logo-arc var(--logo-cycle) ease-out var(--logo-delay) infinite;
  }

  .brand-logo::after {
    inset: 0 auto 0 0;
    width: 76%;
    background: linear-gradient(111deg, transparent 32%, #e5ff9810 41%, #f0ffbe77 52%, #d7f95b24 61%, transparent 71%);
    transform: translateX(-130%);
    animation: brand-logo-sheen var(--logo-cycle) linear var(--logo-delay) infinite;
  }
}

@keyframes brand-logo-lift {
  0%, 12%, 100% { transform: none; }
  4% { transform: translateY(-2px) rotate(-6deg) scale(1.04); }
  8% { transform: translateY(.4px) rotate(2deg) scale(.99); }
}

@keyframes brand-logo-arc {
  0% { opacity: 0; transform: scale(.89); }
  5% { opacity: .9; transform: scale(1); }
  12%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes brand-logo-sheen {
  0%, 3% { opacity: 0; transform: translateX(-130%); }
  5.5% { opacity: .85; }
  9.5% { opacity: .85; }
  13%, 100% { opacity: 0; transform: translateX(145%); }
}