/* Prime loaders: the "P" of the logo being written.
   .prime-loader      - full page loader (green circle + white P), markup in Views/Shared/_PrimeLoader.cshtml
   .prime-loader-sm   - small inline loader for buttons / lists; the P takes the current text colour (currentColor)
   Both use the same two paths with pathLength="1":
     bowl: M24.3 18.85 H43.6 A12.41 12.41 0 0 1 43.6 43.67 H33.9
     stem: M43.3 31.16 H33.6 A12.4 12.4 0 0 0 21.25 43.59 V53.2 */

.prime-loader { width: 56px; height: 56px; }
.prime-loader__circle { fill: #00CC83; animation: prime-loader-pulse 1.8s ease-in-out infinite; transform-origin: 36px 36px; }

.prime-loader-sm { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.125em; }

.prime-loader__stroke { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.prime-loader-sm .prime-loader__stroke { stroke: currentColor; stroke-width: 7; }

.prime-loader__stroke--bowl { animation: prime-loader-bowl 1.8s ease-in-out infinite; }
.prime-loader__stroke--stem { animation: prime-loader-stem 1.8s ease-in-out infinite; }

/* bowl is written first, then the stem, hold, fade out and repeat */
@keyframes prime-loader-bowl {
    0%   { stroke-dashoffset: 1; opacity: 1; }
    40%  { stroke-dashoffset: 0; }
    85%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes prime-loader-stem {
    0%, 35% { stroke-dashoffset: 1; opacity: 1; }
    65%  { stroke-dashoffset: 0; }
    85%  { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes prime-loader-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
    .prime-loader__stroke { animation: none; stroke-dashoffset: 0; }
    .prime-loader__circle { animation: prime-loader-pulse 2.4s ease-in-out infinite; }
}