:root { --minimoto-blue: #243cff; }

.brand.logo-motion,
.about-brand.logo-motion {
  position: relative;
  display: inline-block;
  overflow: visible;
}

.logo-motion > img {
  position: relative;
  z-index: 1;
  transform: none !important;
}

/* The original raster wordmark always stays untouched.
   These layers appear only while the logo interaction is active. */
.logo-motion-dot-masks,
.logo-motion-dots {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.logo-motion-dot-masks { z-index: 2; }
.logo-motion-dots {
  z-index: 3;
  transform-origin: 95% 41.29%;
}

.logo-motion-dot-masks i,
.logo-motion-dots i {
  position: absolute;
  width: 3.1319%;
  height: 36.7742%;
  border-radius: 50%;
}

/* Exact positions measured from the original 1820 × 155 wordmark. */
.logo-motion-dot-masks i:nth-child(1),
.logo-motion-dots i:nth-child(1) { left: 90%; top: 6.4516%; }

.logo-motion-dot-masks i:nth-child(2),
.logo-motion-dots i:nth-child(2) { left: 96.8681%; top: 6.4516%; }

.logo-motion-dot-masks i:nth-child(3),
.logo-motion-dots i:nth-child(3) { left: 93.4615%; top: 56.7742%; }

.logo-motion-dot-masks i {
  background: var(--paper, #fbfbfa);
  transform: scale(1.14);
}

.logo-motion-dots i {
  background: var(--minimoto-blue);
}

.logo-motion.is-logo-near .logo-motion-dot-masks,
.logo-motion.is-logo-near .logo-motion-dots {
  opacity: 1;
}

.logo-motion.is-logo-near .logo-motion-dots {
  animation: minimoto-dots-orbit .9s cubic-bezier(.3,.75,.2,1) infinite;
}

@keyframes minimoto-dots-orbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-motion.is-logo-near .logo-motion-dots { animation: none; }
}