/* =========================================
   OVERLAY
========================================= */

#wap-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #000;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}

/* =========================================
   HIDE
========================================= */

#wap-overlay.wap-hide {
    opacity: 0;
    visibility: hidden;
}

/* =========================================
   LOADER
========================================= */

.wap-loader {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

/* =========================================
   IMAGE
========================================= */

#wap-image {

    width: 100%;
    height: 100%;

    object-fit: contain;

    animation: wapZoom 5s ease forwards;

    opacity: 0;

    animation:
        wapFadeIn 1s ease forwards,
        wapZoom 5s ease forwards;
}

/* =========================================
   ANIMATIONS
========================================= */

@keyframes wapFadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes wapZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.03);
    }
}