/* Decorative progress illustrates the four steps of the process. */
#process .process-motion-indicator { position: relative; flex-shrink: 0; }
#process .process-motion-indicator > svg.process-fill-ring {
  position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px);
  overflow: visible; fill: none; stroke-width: 2.5; pointer-events: none;
  transform: rotate(-90deg);
}
#process .process-fill-ring .process-ring-track { fill: none; stroke: #82ba7138; }
#process .process-fill-ring .process-ring-fill { fill: none; stroke: var(--green); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
#process .round-icons .line-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 4px 4px 16px; }
#process .round-icons .line-icon > svg:not(.process-fill-ring) { width: 28px; height: 28px; }
#process :is(.media-overlay, .maintain-overlay) > .process-motion-item { position: relative; padding-bottom: 10px; }
#process .process-fill-bar { display: block; position: absolute; bottom: 0; left: 28px; right: 0; height: 3px; border-radius: 99px; overflow: hidden; background: #baff9d26; }
#process .process-fill-bar > i { display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; background: linear-gradient(90deg, #39c930, #b5ff84); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
  #process .process-motion-group:not(.process-motion-played) .process-ring-fill { stroke-dashoffset: 100; }
  #process .process-motion-group:not(.process-motion-played) .process-fill-bar > i { transform: scaleX(0); }
  #process .process-motion-played .process-ring-fill { animation: process-ring-fill 1600ms cubic-bezier(.25,.6,.3,1) var(--process-delay) both; }
  #process .process-motion-played .process-fill-bar > i { animation: process-bar-fill 1600ms cubic-bezier(.25,.6,.3,1) var(--process-delay) both; }
  #process .process-motion-played .process-motion-indicator > svg:not(.process-fill-ring),
  #process .process-motion-played .process-motion-item > b,
  #process .process-motion-played .process-motion-item > small { animation: process-detail-reveal 1000ms ease-out var(--process-delay) both; }
}
@keyframes process-ring-fill { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes process-bar-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes process-detail-reveal { from { opacity: .4; } to { opacity: 1; } }