/* ========================================
   WTFOK PRELOADER
======================================== */

.nm-preloader {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    background: #0b0b0b;

    z-index: 999999;

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

    overflow: hidden;

    /* Exit animation */
    transform: translateY(0);

    transition:
        transform .7s cubic-bezier(.76, 0, .24, 1);
}


/* ========================================
   GRID BACKGROUND
======================================== */

.nm-preloader::before {
    content: "";

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    /* Grid */
    background-image:
        linear-gradient(
            rgba(255, 255, 255, .05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .05) 1px,
            transparent 1px
        );

    background-size: 64px 64px;
    background-position: center top;
    background-repeat: repeat;

    opacity: 1;

    pointer-events: none;
}


/* ========================================
   LOGO
======================================== */

.nm-preloader-logo {
    position: relative;

    /* Above grid */
    z-index: 2;

    width: 230px;
    max-width: 60vw;

    animation:
        wtfokLogoIn .65s
        cubic-bezier(.34, 1.56, .64, 1)
        both;

    transition:
        opacity .3s ease,
        scale .45s cubic-bezier(.34, 1.56, .64, 1);
}


.nm-preloader-logo img {
    display: block;

    width: 100%;
    height: auto;
}


/* ========================================
   LOGO POP ANIMATION
======================================== */

@keyframes wtfokLogoIn {

    0% {
        opacity: 0;

        transform:
            scale(.35)
            rotate(-10deg);
    }

    70% {
        opacity: 1;

        transform:
            scale(1.08)
            rotate(2deg);
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);
    }
}


/* ========================================
   LOADING LINE
======================================== */

.nm-preloader-logo::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -30px;

    width: 80px;
    height: 5px;

    background: #fff;

    border-radius: 20px;

    transform:
        translateX(-50%)
        scaleX(.15);

    transform-origin: center;

    animation:
        wtfokLoading 1s
        ease-in-out
        infinite;

    transition:
        opacity .2s ease;
}


@keyframes wtfokLoading {

    0% {
        transform:
            translateX(-50%)
            scaleX(.15);

        opacity: .4;
    }

    50% {
        transform:
            translateX(-50%)
            scaleX(1);

        opacity: 1;
    }

    100% {
        transform:
            translateX(-50%)
            scaleX(.15);

        opacity: .4;
    }
}


/* ========================================
   EXIT ANIMATION
======================================== */

/* Logo zoom + fade */

.nm-preloader.is-loaded .nm-preloader-logo {
    opacity: 0;
    scale: 1.4;
}


/* Loading line fade */

.nm-preloader.is-loaded .nm-preloader-logo::after {
    opacity: 0;
}


/* Slide preloader upward */

.nm-preloader.is-loaded {
    transform: translateY(-100%);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 767px) {

    .nm-preloader-logo {
        width: 180px;
        max-width: 55vw;
    }

    /* Smaller grid on mobile */
    .nm-preloader::before {
        background-size: 42px 42px;
    }

    .nm-preloader-logo::after {
        width: 65px;
        height: 4px;
        bottom: -25px;
    }
}