/* Splash screen animation container */
aside#splashscreen {
    /* background-image:radial-gradient(circle, #fce9e8 75%, #e0cfce 100%); */
    background-color: white;
    display: block;
    position: fixed;
    width: 100vw;
    animation: splash-fade-out 1s;
    animation-delay: 3s;
    animation-fill-mode: forwards;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    z-index: 10;
}

@keyframes splash-fade-out {
    0% {
        opacity: 1;
    }
    99% {
        opacity: 0;
    }
    100% { 
        display: none;
        opacity: 0;
        pointer-events: none;
    }
}

aside#splashscreen[hidden] {
    display: none;
}

/* Everything else should be inaccessible while spashing */
aside#splashscreen[hidden] + main#app {
    opacity: 0;
    overflow: hidden;
    animation: unhide-app 5s;
    animation-fill-mode: forwards;
}

@keyframes funhide-app {
    0% {
        opacity: 0;
        overflow: hidden;
    }
    100% { 
        display: block;
        opacity: 1;
        overflow: auto;
        -pointer-events: all;
    }
}



.loader-grid-container {
    display: grid;
    height: 100dvh;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 1fr auto 1fr;
}

#splashscreen .middle {
    grid-column: 2;
    grid-row: 2;
    aspect-ratio: 1 / 2;
    height: min(160dvw, 80dvh);
}


#splashscreen svg#icon {
    width: 60%;
    display: block;
    height:30%;
    margin: 0 auto;
    margin-top: 40%;
    opacity: 0.65;
    opacity: 1;
}

#splashscreen svg#icon > path {
        fill: none;
        stroke: #221F1F;
        stroke-width: 30;
        stroke-opacity: 1;
}

#splashscreen svg#icon > path.curves {
        stroke-dasharray: 320;
        stroke-dashoffset: 0;
        animation: curve-dash 2s;
        animation-fill-mode: forwards;
        animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
}

@keyframes curve-dash {
    0% {
        stroke-dashoffset: -320;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#splashscreen svg#icon > path.sides {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: side-dash 2s;
        animation-delay: 2s;
        animation-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
        animation-fill-mode: forwards;
}

@keyframes side-dash {
    0% {
        stroke-dashoffset: 186;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

#splashscreen svg#logo1 {
    width: 100%;
    fill: #221F1F;
    display: 0 auto;
    margin-top: 10%;
    animation: text 4s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
}

@keyframes text {
    0% {
        transform:translate(0px,40px);
        opacity:0;
    }
    100% {
        transform:translate(0px,0px);
        opacity:1;
    }
}


@media screen and (orientation: landscape) and (max-height: 400px) {
    html, body {
        height: 100dvh;
        /* overflow: hidden; */
    }
    #splashscreen .middle {
        height: 100dvh;
        width: 90vh;
    }
    #splashscreen svg#text {
        width: 100%;
        margin-top: 18%;
    }
    #splashscreen svg#logo1 {
        width: 100%;
        margin-top: 15%;
    }

    #splashscreen svg#icon {
        width: 60%;
        display: block;
        height:30%;
        /* height:356px; */
        /* width:504px; */
        margin: 0 auto;
        margin-top: 20%;
    }
}