/* Fixed elliptical planes + transform-only rotation: continuous position and
   velocity across every loop. Wordmark sits outside the animated planes. */
.brand-capability-visual.precision-visual {
  min-width: 0;
  background: radial-gradient(ellipse at 50% 50%, #303034 0, #222225 38%, #1d1d1f 72%);
}
.precision-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: min(90%, 390px);
  aspect-ratio: 1;
  isolation: isolate;
}
.precision-orbit::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(220 221 229 / 5%), transparent 70%);
  opacity: .55;
  transition: opacity 900ms ease;
}
.precision-visual:hover .precision-orbit::before { opacity: 1; }
.precision-plane {
  position: absolute;
  inset: 1%;
  border: 1px solid rgb(221 223 231 / 17%);
  border-radius: 50%;
  transform: rotate(-32deg) scaleY(.65);
  --orbit-duration: 22s;
  --orbit-delay: -7s;
  --orbit-light: 237 239 245;
}
.precision-plane.plane-two {
  inset: 7%;
  transform: rotate(46deg) scaleY(.7);
  --orbit-duration: 29s;
  --orbit-delay: -19s;
  --orbit-light: 198 202 214;
  opacity: .72;
}
.precision-plane.plane-three {
  inset: 15%;
  transform: rotate(-8deg) scaleY(.81);
  --orbit-duration: 18s;
  --orbit-delay: -3s;
  --orbit-light: 227 38 32;
  border-color: rgb(221 223 231 / 10%);
}
.precision-runner {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  animation: precision-revolve var(--orbit-duration) linear var(--orbit-delay) infinite;
}
.precision-runner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent 0deg 310deg, rgb(var(--orbit-light) / .12) 335deg, rgb(var(--orbit-light) / .85) 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.precision-runner::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(var(--orbit-light));
  box-shadow: 0 0 9px 2px rgb(var(--orbit-light) / .2);
}
.precision-wordmark {
  z-index: 1;
  font-size: clamp(28px, 2.5vw, 36px);
  letter-spacing: -.08em;
  line-height: 1;
  color: #f5f5f7;
}
@keyframes precision-revolve { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@media (max-width: 900px) {
  .precision-orbit { width: min(68vw, 340px); margin: 40px auto; }
}
@media (prefers-reduced-motion: reduce) {
  .precision-runner { animation: none; transform: rotate(.12turn); }
  .plane-two .precision-runner { transform: rotate(.6turn); }
  .plane-three .precision-runner { transform: rotate(.83turn); }
  .precision-orbit::before { transition: none; }
}