/* Add custom CSS styles below */ 
/* From Uiverse.io by Nawsome */ 
.s-loading {
  width: 6em;
  height: 6em;
  transform-origin: center;
}

.s-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 7em; /* prevent layout shift */
}

/* Shared ring styles */
.s-loading .ring {
  fill: none;
  stroke-linecap: round;
  transform-origin: center;
}

/* Ring-specific colors & animations */
.s-loading .ring-a {
  stroke: var(--color-primary, #f42f25);
  animation: ringA 2s linear infinite;
}

.s-loading .ring-b {
  stroke: var(--color-secondary, #f49725);
  animation: ringB 2s linear infinite;
}

.s-loading .ring-c {
  stroke: var(--color-accent, #255ff4);
  animation: ringC 2s linear infinite;
}

.s-loading .ring-d {
  stroke: var(--color-highlight, #f42582);
  animation: ringD 2s linear infinite;
}

/* ——— Animations (optimized & cleaned) ——— */

@keyframes ringA {
  from, 4% { stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -330; }
  12%     { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -335; }
  32%     { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -595; }
  40%, 54%{ stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -660; }
  62%     { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -665; }
  82%     { stroke-dasharray: 60 600; stroke-width: 30; stroke-dashoffset: -925; }
  90%, to{ stroke-dasharray: 0 660; stroke-width: 20; stroke-dashoffset: -990; }
}

@keyframes ringB {
  from, 12%{ stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -110; }
  20%     { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -115; }
  40%     { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -195; }
  48%, 62%{ stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -220; }
  70%     { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -225; }
  90%     { stroke-dasharray: 20 200; stroke-width: 30; stroke-dashoffset: -305; }
  98%, to{ stroke-dasharray: 0 220; stroke-width: 20; stroke-dashoffset: -330; }
}

@keyframes ringC {
  from     { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
  8%       { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
  28%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
  36%, 58% { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
  66%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
  86%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
  94%, to { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
}

@keyframes ringD {
  from, 8% { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: 0; }
  16%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -5; }
  36%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -175; }
  44%, 50% { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -220; }
  58%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -225; }
  78%      { stroke-dasharray: 40 400; stroke-width: 30; stroke-dashoffset: -395; }
  86%, to { stroke-dasharray: 0 440; stroke-width: 20; stroke-dashoffset: -440; }
}