/*
 * Single loading screen of the app (#za-boot in index.html, outside #app so Blazor never removes it).
 * Visibility: shown while #app is still empty (boot) or while AppProgressBar renders its marker (authorizing / login).
 * Global (not CSS isolation) on purpose; fallback values are required because the Radzen theme is injected after Blazor starts.
 */
#za-boot {
    display: none;
}

body:has(#app:empty) #za-boot,
body:has(.za-loading-marker) #za-boot {
    display: flex;
}

.za-loading-overlay {
    position: fixed;
    z-index: 2000;
    inset: 0;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--rz-base-200, #EEEEEE);
    color: var(--rz-text-color, #212121);
}

/* Boot screen header: logo + title centered. */
.za-loading-overlay .header-content,
.za-loading-overlay .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.za-loading-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
    text-align: center;
}

.za-loading-logo {
    width: 6.5rem;
    height: 6.5rem;
    color: var(--rz-primary, #E6007E);
}

/* Default animation "assemble": the tiles glide in from different directions, join to the logo,
   hold briefly and drift apart again. Only opacity/transform are animated (GPU-friendly). */
.za-loading-tile {
    fill: currentColor;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    will-change: opacity, transform;
}

.za-loading-tile-1 {
    animation-name: za-loading-assemble-1;
}

.za-loading-tile-2 {
    animation-name: za-loading-assemble-2;
    animation-delay: 0.08s;
}

.za-loading-tile-3 {
    animation-name: za-loading-assemble-3;
    animation-delay: 0.16s;
}

@keyframes za-loading-assemble-1 {
    0% { opacity: 0; transform: translate(-60%, 20%) rotate(-12deg); }
    35%, 70% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translate(-60%, -20%) rotate(8deg); }
}

@keyframes za-loading-assemble-2 {
    0% { opacity: 0; transform: translate(0, -60%) rotate(10deg); }
    35%, 70% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translate(20%, -60%) rotate(-8deg); }
}

@keyframes za-loading-assemble-3 {
    0% { opacity: 0; transform: translate(40%, 30%) rotate(-10deg); }
    35%, 70% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translate(40%, -10%) rotate(10deg); }
}

/* Alternative animation "wave" (for comparison): add class "za-loading-logo-wave" to the <svg>. */
.za-loading-logo-wave .za-loading-tile {
    animation: za-loading-wave 1.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    opacity: 0.25;
}

.za-loading-logo-wave .za-loading-tile-2 {
    animation-delay: 0.15s;
}

.za-loading-logo-wave .za-loading-tile-3 {
    animation-delay: 0.3s;
}

@keyframes za-loading-wave {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1); }
}

.za-loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    animation: za-loading-fade-in 0.6s ease-out both;
}

    .za-loading-text p {
        margin: 0;
    }

.za-loading-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--rz-text-title-color, var(--rz-text-color, #212121));
}

.za-loading-subtitle {
    font-size: 0.95rem;
    color: var(--rz-text-secondary-color, #616161);
}

/* Animated ellipsis after the title. */
.za-loading-dots span {
    display: inline-block;
    animation: za-loading-dot 1.2s ease-in-out infinite;
}

    .za-loading-dots span:nth-child(2) {
        animation-delay: 0.15s;
    }

    .za-loading-dots span:nth-child(3) {
        animation-delay: 0.3s;
    }

@keyframes za-loading-dot {
    0%, 60%, 100% { opacity: 0.2; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-0.2em); }
}

/* Slim indeterminate progress bar in the primary color. */
.za-loading-bar {
    position: relative;
    width: 10rem;
    height: 3px;
    margin-top: 0.75rem;
    overflow: hidden;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--rz-primary, #E6007E) 18%, transparent);
}

    .za-loading-bar::after {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 40%;
        border-radius: inherit;
        background-color: var(--rz-primary, #E6007E);
        animation: za-loading-bar 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
    }

@keyframes za-loading-bar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@keyframes za-loading-fade-in {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: none; }
}

/* Accessibility: no motion for users preferring reduced motion – show the full logo statically. */
@media (prefers-reduced-motion: reduce) {
    .za-loading-tile {
        animation: none;
        opacity: 1;
    }

    .za-loading-text,
    .za-loading-dots span,
    .za-loading-bar::after {
        animation: none;
    }

    .za-loading-dots span {
        opacity: 1;
    }
}