/* One centre for each orbit: the tracks stay fixed while light travels around them. */
.statement-orbit .orbit-track {
  stroke: var(--ink);
  stroke-width: 1.15;
  opacity: .76;
}
.statement-orbit .orbit-inner-track {
  stroke: var(--yellow);
  stroke-width: 1.05;
  opacity: .9;
}
.statement-orbit .orbit-rotor {
  transform-origin: 250px 250px;
  animation: elvion-orbit-clockwise 11s linear infinite;
}
.statement-orbit .orbit-counter {
  transform-origin: 250px 250px;
  animation: elvion-orbit-counterclockwise 15s linear infinite;
}
.statement-orbit .orbit-sweep {
  stroke: var(--yellow);
  stroke-width: 3.8;
  stroke-linecap: round;
  stroke-dasharray: 22 78;
  stroke-dashoffset: 22;
  transform: rotate(-90deg);
  transform-origin: 250px 250px;
  animation: elvion-outer-arc 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
.statement-orbit .orbit-node { fill: var(--yellow); stroke: none; }
.statement-orbit .orbit-node-halo {
  stroke: var(--yellow);
  stroke-width: 1;
  transform-origin: 250px 26px;
  animation: elvion-node-halo 2.75s ease-out infinite;
}
.statement-orbit .orbit-inner-sweep {
  stroke: var(--ink);
  stroke-width: 2.35;
  stroke-dasharray: 18 82;
  stroke-dashoffset: 18;
  stroke-linecap: round;
  opacity: 1;
  transform: rotate(-90deg);
  transform-origin: 250px 250px;
  animation: elvion-inner-arc 7.5s cubic-bezier(.45, 0, .55, 1) infinite;
}
.statement-orbit .orbit-inner-echo {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-dasharray: 9 91;
  stroke-dashoffset: 9;
  stroke-linecap: round;
  opacity: .42;
  transform: rotate(90deg);
  transform-origin: 250px 250px;
}
.statement-orbit .orbit-ticks {
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-dasharray: .15 3.85;
  stroke-linecap: butt;
  opacity: .25;
  transform-origin: 250px 250px;
  animation: elvion-orbit-clockwise 66s linear infinite;
}
.statement-orbit .orbit-aura {
  stroke: var(--yellow);
  stroke-width: 1.2;
  transform-origin: 250px 250px;
  opacity: 0;
  animation: elvion-statement-wave 5.5s cubic-bezier(.15, .45, .35, 1) infinite;
}
.statement-orbit .orbit-aura + .orbit-aura { animation-delay: -2.75s; }

@keyframes elvion-orbit-clockwise { to { transform: rotate(360deg); } }
@keyframes elvion-orbit-counterclockwise { from { transform: rotate(150deg); } to { transform: rotate(-210deg); } }
@keyframes elvion-outer-arc {
  0%, 100% { stroke-dasharray: 14 86; stroke-dashoffset: 14; }
  50% { stroke-dasharray: 35 65; stroke-dashoffset: 35; }
}
@keyframes elvion-inner-arc {
  0%, 100% { stroke-dasharray: 26 74; stroke-dashoffset: 26; }
  50% { stroke-dasharray: 10 90; stroke-dashoffset: 10; }
}
@keyframes elvion-node-halo {
  0% { transform: scale(.62); opacity: .8; }
  85%, 100% { transform: scale(1.8); opacity: 0; }
}
@keyframes elvion-statement-wave {
  0% { transform: scale(.97); opacity: 0; }
  15% { opacity: .4; }
  100% { transform: scale(1.09); opacity: 0; }
}

/* A more legible pulse below: two expanding rings and four travelling arc heads.
   Only decorative SVG layers animate. The list, grid, captions and circle centres do not. */
.process.orbit-enhanced::before,
.guarantees.orbit-enhanced::before {
  animation: elvion-ambient-halo 5.6s ease-in-out infinite;
  transform: var(--circle-anchor, translate(0, 0));
}
.process.orbit-enhanced::after,
.guarantees.orbit-enhanced::after { display: none; }
.ambient-orbit {
  display: block;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1;
  height: auto;
  overflow: visible;
}
.process > .ambient-orbit {
  color: var(--yellow);
  width: calc(var(--layout-vw) * 48);
  bottom: calc(var(--layout-vw) * -23);
  left: calc(var(--layout-vw) * -11);
  --ambient-wave-peak: .5;
}
.guarantees > .ambient-orbit {
  color: var(--ink);
  width: var(--guarantee-circle-size, 800px);
  left: var(--guarantee-circle-x, 75%);
  top: var(--guarantee-circle-y, 50%);
  transform: translate(-50%, -50%);
  --ambient-wave-peak: .28;
}
.ambient-orbit circle {
  fill: none;
  stroke: currentColor;
  transform-origin: 500px 500px;
}
.ambient-orbit .ambient-wave {
  stroke-width: 1.7;
  opacity: 0;
  animation: elvion-ambient-wave 5.6s cubic-bezier(.18, .45, .3, 1) infinite;
}
.ambient-orbit .ambient-wave:nth-child(2) { animation-delay: -2.8s; }
.ambient-orbit .ambient-carrier {
  transform-origin: 500px 500px;
  animation: elvion-orbit-clockwise 24s linear infinite;
}
.ambient-orbit .ambient-arc {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 17;
  opacity: .52;
  animation: elvion-ambient-arc 5.6s ease-in-out infinite;
}
.ambient-orbit .ambient-arc-tips {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: .15 24.85;
  stroke-dashoffset: -8;
  opacity: .88;
}
.guarantees > .ambient-orbit .ambient-carrier {
  animation-duration: 28s;
  animation-direction: reverse;
}
.guarantees > .ambient-orbit .ambient-arc { opacity: .36; }
.guarantees > .ambient-orbit .ambient-arc-tips { opacity: .62; }

/* The market ornament shares the exact centre and size of its original ring. */
.markets.orbit-enhanced::before {
  pointer-events: none;
  animation: elvion-market-pulse 6s ease-in-out infinite;
}
@keyframes elvion-market-pulse { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
@keyframes elvion-ambient-wave {
  0% { transform: scale(.87); opacity: 0; }
  18% { opacity: var(--ambient-wave-peak); }
  100% { transform: scale(1.29); opacity: 0; }
}
@keyframes elvion-ambient-halo {
  0%, 100% { opacity: .46; }
  50% { opacity: 1; }
}
@keyframes elvion-ambient-arc {
  0%, 100% { stroke-dasharray: 8 17; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 13 12; stroke-dashoffset: 5; }
}

/* Pause unseen ornaments without resetting their phase. */
.orbit-motion-paused .statement-orbit *,
.orbit-motion-paused > .ambient-orbit *,
.orbit-motion-paused.orbit-enhanced::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .statement-orbit *,
  .ambient-orbit *,
  .process.orbit-enhanced::before,
  .guarantees.orbit-enhanced::before,
  .markets.orbit-enhanced::before { animation: none; }
  .statement-orbit .orbit-aura,
  .statement-orbit .orbit-node-halo,
  .ambient-orbit .ambient-wave { display: none; }
  .process.orbit-enhanced::before,
  .guarantees.orbit-enhanced::before { opacity: 1; }
}
