/* Splash shown while the WASM bundle bootstraps and the dashboard chrome is
   not yet on screen. Removed from the DOM by app.razor's MutationObserver
   as soon as MudBlazor's MainLayout/MobileLayout mounts. Visuals replicate
   the splash that used to live in PropiaWasm/wwwroot/index.html. */

#app-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.loading-app-screen-container {
    background-color: #02362D;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    justify-content: flex-start;
    align-items: center;
}

.logo-image {
    margin-top: 10vh;
    margin-bottom: 20vh;
    max-width: 80vw;
    width: 1200px;
    height: auto;
    border-radius: 15px;
}

.dimensional-rounds-loader {
    position: relative;
    transform: rotateZ(45deg);
    perspective: 1000px;
    border-radius: 50%;
    width: 20rem;
    max-width: 40vw;
    aspect-ratio: 1 / 1;
    color: #fff;
}

.dimensional-rounds-loader:before,
.dimensional-rounds-loader:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: 1s spin linear infinite;
}

.dimensional-rounds-loader:before {
    transform: rotateX(70deg);
}

.dimensional-rounds-loader:after {
    color: #FF3D00;
    transform: rotateY(70deg);
    animation-delay: .4s;
}

.loading-progress-container {
    width: 40rem;
    max-width: 60vw;
    margin-top: 2rem;
}

.progress-loader {
    width: var(--blazor-load-percentage, 0%);
    height: 4.8px;
    display: inline-block;
    position: relative;
    background: #FFF;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    box-sizing: border-box;
    transition: width 0.1s ease-in-out;
}

.progress-loader::after,
.progress-loader::before {
    content: '';
    width: 10px;
    height: 1px;
    background: #FFF;
    position: absolute;
    opacity: 0;
    box-sizing: border-box;
}

.progress-loader::after {
    top: 9px;
    right: -2px;
    transform: rotate(-45deg) translateX(0px);
    animation: coli1 0.3s linear infinite;
}

.progress-loader::before {
    top: -4px;
    right: -2px;
    transform: rotate(45deg) translateX(0px);
    animation: coli2 0.3s linear infinite;
}

@keyframes coli1 {
    0%   { transform: rotate(-45deg) translateX(0px);   opacity: 0.7; }
    100% { transform: rotate(-45deg) translateX(-45px); opacity: 0; }
}

@keyframes coli2 {
    0%   { transform: rotate(45deg) translateX(0px);    opacity: 1; }
    100% { transform: rotate(45deg) translateX(-45px);  opacity: 0.7; }
}

@keyframes spin {
    0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; }
    12%      { box-shadow: .2em .2em 0 0 currentcolor; }
    25%      { box-shadow: 0 .2em 0 0px currentcolor; }
    37%      { box-shadow: -.2em .2em 0 0 currentcolor; }
    50%      { box-shadow: -.2em 0 0 0 currentcolor; }
    62%      { box-shadow: -.2em -.2em 0 0 currentcolor; }
    75%      { box-shadow: 0px -.2em 0 0 currentcolor; }
    87%      { box-shadow: .2em -.2em 0 0 currentcolor; }
}