/* ATL loader: the ATL wordmark on a disc, with a primary (blue) and a secondary (yellow) arc going round it.
   Shared by ATLShop.Backoffice and ATLShop.App (AtlLoaderMark.razor and the first load in their wwwroot/index.html).
   Colours come from the theme (Configurações → Tema); the ATL values after the comma are only used before theme.css loads. */

.atl-loader-mark {
    display: block;
    width: 9rem;
    height: 9rem;
}

.atl-loader-mark svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Both arcs turn together; their lengths also change in opposite directions, so they seem to chase each other. */
.atl-loader-mark .atl-loader-ring {
    transform-box: view-box;
    transform-origin: 50% 50%;
    animation: atl-loader-spin 1.4s linear infinite;
}

.atl-loader-mark .atl-loader-track {
    fill: none;
    stroke: color-mix(in srgb, var(--rz-primary, #17189b) 14%, white);
    stroke-width: 11;
}

.atl-loader-mark .atl-loader-arc {
    fill: none;
    stroke-width: 11;
    stroke-linecap: round;
}

.atl-loader-mark .atl-loader-arc--blue {
    stroke-dasharray: 30 70;
    animation: atl-loader-blue 1.4s cubic-bezier(0.2, 0, 0, 1) infinite alternate;
}

.atl-loader-mark .atl-loader-arc--yellow {
    stroke-dasharray: 26 74;
    stroke-dashoffset: -50;
    animation: atl-loader-yellow 1.4s cubic-bezier(0.2, 0, 0, 1) infinite alternate;
}

.atl-loader-mark .atl-loader-disc {
    fill: var(--rz-base-background-color, #fff);
    filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--rz-primary, #17189b) 14%, transparent));
}

.atl-loader-mark .atl-loader-wordmark {
    fill: var(--rz-primary, #17189b);
}

.atl-loader-mark .atl-loader-dot {
    fill: var(--rz-secondary, #e8bc33);
}

.atl-loader-mark .atl-loader-stop--primary-dark { stop-color: color-mix(in srgb, var(--rz-primary, #17189b) 70%, black); }
.atl-loader-mark .atl-loader-stop--primary-light { stop-color: color-mix(in srgb, var(--rz-primary, #17189b) 70%, white); }
.atl-loader-mark .atl-loader-stop--secondary { stop-color: var(--rz-secondary, #e8bc33); }
.atl-loader-mark .atl-loader-stop--secondary-light { stop-color: color-mix(in srgb, var(--rz-secondary, #e8bc33) 55%, white); }

@keyframes atl-loader-spin {
    to { transform: rotate(360deg); }
}

@keyframes atl-loader-blue {
    from { stroke-dasharray: 22 78; }
    to { stroke-dasharray: 38 62; }
}

@keyframes atl-loader-yellow {
    from { stroke-dasharray: 34 66; stroke-dashoffset: -44; }
    to { stroke-dasharray: 20 80; stroke-dashoffset: -58; }
}

@media (prefers-reduced-motion: reduce) {
    .atl-loader-mark .atl-loader-ring,
    .atl-loader-mark .atl-loader-arc--blue,
    .atl-loader-mark .atl-loader-arc--yellow {
        animation-duration: 3s;
    }
}