/* The original artwork stays visible; light follows only its outer silhouette. */
.brand-motion {
  overflow: visible;
  flex-shrink: 0;
}
.brand-motion-sheen,
.brand-motion-trail,
.brand-motion-tip {
  opacity: 0;
  pointer-events: none;
}
.brand-motion-effects {
  opacity: 0;
  pointer-events: none;
}
.brand-motion.is-brand-motion-active .brand-motion-effects {
  opacity: 1;
}
.brand-motion-trail,
.brand-motion-tip {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.brand-motion-trail {
  stroke: #bfeaff;
  stroke-width: 1.1px;
  stroke-dasharray: 12 88;
}
.brand-motion-tip {
  stroke: #fffdf7;
  stroke-width: 1.8px;
  stroke-dasharray: 1.4 98.6;
  filter: drop-shadow(0 0 1.2px #a7eaffcc);
}
.brand-motion-streak {
  transform-origin: 0 0;
}
.v3-brand-moment > .brand-motion {
  width: clamp(76px, 9vw, 130px);
  height: clamp(76px, 9vw, 130px);
  filter: drop-shadow(0 22px 48px rgba(37, 99, 235, .32));
}
.v3-case-system .brand-motion {
  width: 86px;
  height: 86px;
  margin-bottom: 26px;
  filter: drop-shadow(0 20px 42px rgba(37, 99, 235, .30));
}
.architecture-core-mark > .brand-motion {
  display: block;
  width: 64%;
  height: 64%;
  transform: translateX(5%);
}
.navbar-brand > .brand-motion {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .brand-motion-effects,
  .brand-motion-sheen,
  .brand-motion-trail,
  .brand-motion-tip {
    display: none;
  }
}

/* Keep the moving light legible against the light theme as well. */
html.light .brand-motion-trail { stroke: #477bce; }
html.light .brand-motion-tip { stroke: #e8faff; filter: drop-shadow(0 0 1.2px #2867d9); }