/* Loader dots: four dots wave in a row, then drift apart and swirl.
   .cp-loader (PageLoader.razor): centred in the content area, beside the sidebar and under the top bar. Above the popups (3000).
   It doesn't block the page: no background, and clicks pass through to whatever is underneath. */
.cp-loader {
    --loader-dot: #7a1f2b;
    position: fixed; inset: 72px 0 0 258px; z-index: 4000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    animation: cp-loader-in .15s ease-out;
}
/* .cp-dots (LoadingDots.razor): centred where it is placed. In a grid wider than the screen it stays in the visible part. */
.cp-dots {
    --loader-dot: #7a1f2b;
    position: sticky; left: 0; width: min(100%, calc(100vw - 340px)); height: 72px;
    display: flex; align-items: center; justify-content: center;
}
@media (max-width: 991px) {
    .cp-loader { left: 72px; }
    .cp-dots { width: min(100%, calc(100vw - 154px)); }
}

.cp-loader__dots { position: relative; width: 0; height: 0; scale: .6; animation: cp-loader-swirl 2.8s ease-in-out infinite; }
.cp-loader__dot {
    position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--loader-dot);
    animation: 2.8s ease-in-out infinite;
}
.cp-loader__dot--1 { animation-name: cp-loader-dot1; }
.cp-loader__dot--2 { animation-name: cp-loader-dot2; }
.cp-loader__dot--3 { animation-name: cp-loader-dot3; }
.cp-loader__dot--4 { animation-name: cp-loader-dot4; }

@keyframes cp-loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-loader-swirl {
    0%, 48% { transform: rotate(0deg); }
    92%, 100% { transform: rotate(360deg); }
}
@keyframes cp-loader-dot1 {
    0%, 16%, 46%, 100% { transform: translate(-51px, 0) scale(1); opacity: .85; }
    8% { transform: translate(-51px, -14px) scale(1); opacity: .85; }
    62%, 86% { transform: translate(-24px, -30px) scale(1.15); opacity: 1; }
}
@keyframes cp-loader-dot2 {
    0%, 8%, 24%, 46%, 100% { transform: translate(-17px, 0) scale(1); opacity: .85; }
    16% { transform: translate(-17px, -14px) scale(1); opacity: .85; }
    62%, 86% { transform: translate(-12px, 22px) scale(1); opacity: .75; }
}
@keyframes cp-loader-dot3 {
    0%, 16%, 32%, 46%, 100% { transform: translate(17px, 0) scale(1); opacity: .85; }
    24% { transform: translate(17px, -14px) scale(1); opacity: .85; }
    62%, 86% { transform: translate(18px, -6px) scale(.8); opacity: .6; }
}
@keyframes cp-loader-dot4 {
    0%, 24%, 40%, 46%, 100% { transform: translate(51px, 0) scale(1); opacity: 1; }
    32% { transform: translate(51px, -14px) scale(1); opacity: 1; }
    62%, 86% { transform: translate(40px, 12px) scale(.6); opacity: .5; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-loader__dots { animation: none; }
    .cp-loader__dot { animation: cp-loader-pulse 1.6s ease-in-out infinite; }
    .cp-loader__dot--1 { left: -60px; }
    .cp-loader__dot--2 { left: -26px; }
    .cp-loader__dot--3 { left: 8px; }
    .cp-loader__dot--4 { left: 42px; }
    @keyframes cp-loader-pulse { 50% { opacity: .4; } }
}