html, body {
    width: 100%;
    overflow-x: hidden;
    min-height: 100%;
}

.loading-container {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: #530542;
    opacity: 0;
    animation: fade-cycle 3s infinite;
}

.icon-house {
    animation-delay: 0s;
}

.icon-key {
    animation-delay: 1s;
}

.icon-sign {
    animation-delay: 2s;
}

@keyframes fade-cycle {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
    4% {
        opacity: 1;
        transform: scale(1.1) translateY(0);
    }
    8% {
        transform: scale(1) translateY(0);
    }
    28% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    33.33% {
        opacity: 0;
        transform: scale(0.5) translateY(-20px);
    }
    100% {
        opacity: 0;
        transform: scale(0.5) translateY(20px);
    }
}

.loading-progress-text {
    position: relative;
    text-align: center;
    font-weight: bold;
    color: #530542;
    margin-top: 1rem;
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; transform: scale(1.05); }
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}