@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  @keyframes fillSweep {
    0% { stroke-dashoffset: 565.48; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -565.48; }
  }
@keyframes colorShift {
  0%, 100% { stroke: #FC6144; }
  25% { stroke: #D4401E; }
  50% { stroke: #B33015; }
  75% { stroke: #D4401E; }
}
@keyframes bgColorShift {
  0%, 100% { fill: #FE9A85; }
  25% { fill: #FC6144; }
  50% { fill: #FC6144; }
  75% { fill: #FE9A85; }
}
  .pie-group {
    transform-origin: 340px 250px;
    animation: spin 6s linear infinite;
  }
  .pie-bg {
    animation: bgColorShift 4s ease-in-out infinite;
  }
  .pie-sweep {
    fill: none;
    stroke-width: 90;
    stroke-dasharray: 565.48;
    animation: fillSweep 4s ease-in-out infinite, colorShift 4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    .pie-group { animation: none; }
    .pie-sweep { animation: none; stroke: #FF8C00; stroke-dashoffset: 282; }
    .pie-bg { animation: none; fill: #CC4400; }
  }