/* ==========================================
   BOOKS FROM THE CLOSET
   ROOM LOADING TRANSITION
========================================== */

.pageLoadingScreen{
    position:fixed;
    inset:0;
    z-index:40000;

    overflow:hidden;

    background:#020100;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 220ms ease,
        visibility 0s linear 220ms;

    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}

.pageLoadingScreen.isVisible{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity 220ms ease,
        visibility 0s linear 0s;
}


/* The artwork and SVG both use centered cover scaling. */
.pageLoadingArtwork,
.pageLoadingRing{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;
}

.pageLoadingArtwork{
    object-fit:cover;
    object-position:center center;

    pointer-events:none;

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
}

.pageLoadingRing{
    overflow:visible;
    pointer-events:none;
}

.pageLoadingRingTrack,
.pageLoadingRingProgress{
    fill:none;
    stroke-width:9;
}

.pageLoadingRingTrack{
    stroke:rgba(201, 162, 107, 0.20);
}

.pageLoadingRingProgress{
    stroke:#c9a26b;
    stroke-linecap:round;

    stroke-dasharray:100;
    stroke-dashoffset:100;

    filter:
        drop-shadow(0 0 5px rgba(201, 162, 107, 0.42));
}

.pageLoadingScreen.isVisible
.pageLoadingRingProgress{
    animation:
        pageLoadingFill 3.2s
        cubic-bezier(.20, .68, .25, 1)
        forwards,
        pageLoadingBreathe 1.2s
        ease-in-out 3.2s
        infinite alternate;
}

@keyframes pageLoadingFill{

    0%{
        stroke-dashoffset:100;
    }

    72%{
        stroke-dashoffset:14;
    }

    100%{
        stroke-dashoffset:4;
    }

}

@keyframes pageLoadingBreathe{

    from{
        opacity:0.72;
    }

    to{
        opacity:1;
    }

}


/* Screen-reader status only. */
.pageLoadingStatus{
    position:absolute;

    width:1px;
    height:1px;

    padding:0;
    margin:-1px;

    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;

    border:0;
}


@media (prefers-reduced-motion:reduce){

    .pageLoadingScreen{
        transition:none;
    }

    .pageLoadingScreen.isVisible
    .pageLoadingRingProgress{
        animation:none;
        stroke-dashoffset:8;
    }

}


@media print{

    .pageLoadingScreen{
        display:none !important;
    }

}