/* Opt-in preview: ?logo-motion=test. Keep the approved raster artwork. */
.brand--motion-test > img.brand-logo { clip-path: inset(0 0 0 29%); }
.brand-wheel {
  position: absolute;
  left: 0;
  top: 0;
  width: 26.680349%;
  height: 100%;
  pointer-events: none;
}
.brand-wheel-ring, .brand-wheel-center {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
}
/* Both mask edges sit in the transparent gap between the hub and the ring. */
.brand-wheel-ring {
  -webkit-mask-image: radial-gradient(circle, transparent 25%, #000 26%);
  mask-image: radial-gradient(circle, transparent 25%, #000 26%);
  transform-origin: 50% 50%;
  animation: logo-wheel-turn 18s linear infinite;
  will-change: transform;
}
.brand-wheel-center {
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 26%);
  mask-image: radial-gradient(circle, #000 25%, transparent 26%);
}
.brand .brand-wheel img.brand-wheel-art {
  position: absolute;
  display: block;
  width: 417.692308%;
  max-width: none;
  height: auto;
  left: -24.423077%;
  top: -19.038462%;
}
@keyframes logo-wheel-turn { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
.is-booting .brand-wheel-ring,
.is-entering .brand-wheel-ring,
.logo-motion-paused .brand-wheel-ring { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .brand-wheel-ring { animation: none; will-change: auto; }
}