/* Keep the original WebP and crest still; rotate only the ball's inner face.
   Source: 1254 x 1254. Circular crop: x=470, y=756, diameter=300. */
.site-header .brand { position: relative; --dbl-logo-size: 72px; }
.site-header .brand::after {
  content: '';
  position: absolute;
  left: calc(var(--dbl-logo-size) * .374800638);
  top: calc(50% + var(--dbl-logo-size) * .102870813);
  width: calc(var(--dbl-logo-size) * .23923445);
  height: calc(var(--dbl-logo-size) * .23923445);
  border-radius: 50%;
  background-image: url('logo.webp');
  background-repeat: no-repeat;
  background-size: 418% 418%;
  background-position: 49.2662474% 79.245283%;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: dbl-logo-ball-turn 8s linear infinite;
}
@keyframes dbl-logo-ball-turn { to { transform: rotate(360deg); } }
@media (max-width: 850px) { .site-header .brand { --dbl-logo-size: 65px; } }
@media (max-width: 600px) { .site-header .brand { --dbl-logo-size: 53px; } }
@media (max-width: 360px) { .site-header .brand { --dbl-logo-size: 46px; } }