<!-- =========================================
     CINEMATIC PRELOADER
========================================= -->

<div id="preloader">

    <!-- BACKGROUND -->

    <div class="preloader-bg"></div>

    <!-- OVERLAY -->

    <div class="preloader-overlay"></div>

    <!-- CONTENT -->

    <div class="loader-wrapper">

        <!-- LOGO -->

        <img
            src="Assets/Logo.png"
            class="loader-logo"
        >

        <!-- LOADER -->

        <div class="loader">

            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>
            <div class="text"><span>REWIRE</span></div>

            <div class="line"></div>

        </div>

    </div>

</div>

<!-- =========================================
     CSS
========================================= -->

<style>

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

#preloader{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

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

    overflow:hidden;

    background:#000;

    z-index:999999;

    transition:
    opacity .8s ease,
    visibility .8s ease;
}

/* HIDE */

#preloader.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

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

.preloader-bg{
    position:absolute;
    inset:0;

    background:
    radial-gradient(
        circle at center,
        rgba(255,0,0,.18),
        rgba(0,0,0,1) 70%
    );

    animation:
    pulseBg 4s ease-in-out infinite;
}

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

.preloader-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(0,0,0,.55),
        rgba(0,0,0,.92)
    );

    backdrop-filter:blur(8px);
}

/* =========================================
   WRAPPER
========================================= */

.loader-wrapper{
    position:relative;
    z-index:5;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

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

.loader-logo{
    width:240px;

    margin-bottom:35px;

    animation:
    logoFloat 4s ease-in-out infinite;

    filter:
    drop-shadow(
        0 0 25px rgba(255,0,0,.35)
    );
}

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

.loader{

    --main-size: 7em;
    --text-color: #ffffff;
    --shine-color: rgba(255,0,0,.45);

    position:relative;

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

    overflow:hidden;

    width:7em;
    height:1em;

    font-size:var(--main-size);
    font-weight:900;

    text-transform:uppercase;

    user-select:none;

    color:var(--text-color);

    filter:
    drop-shadow(
        0 0 12px var(--shine-color)
    );
}

/* =========================================
   TEXT
========================================= */

.loader .text{
    position:absolute;

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

    width:100%;

    white-space:nowrap;
}

/* =========================================
   TEXT LAYERS
========================================= */

.loader .text:nth-child(1){
    clip-path:polygon(0% 0%,11.11% 0%,11.11% 100%,0% 100%);
    font-size:calc(var(--main-size)/20);
    margin-left:-2.1em;
    opacity:0.6;
}

.loader .text:nth-child(2){
    clip-path:polygon(11.11% 0%,22.22% 0%,22.22% 100%,11.11% 100%);
    font-size:calc(var(--main-size)/16);
    margin-left:-0.98em;
    opacity:0.7;
}

.loader .text:nth-child(3){
    clip-path:polygon(22.22% 0%,33.33% 0%,33.33% 100%,22.22% 100%);
    font-size:calc(var(--main-size)/13);
    margin-left:-0.33em;
    opacity:0.8;
}

.loader .text:nth-child(4){
    clip-path:polygon(33.33% 0%,44.44% 0%,44.44% 100%,33.33% 100%);
    font-size:calc(var(--main-size)/11);
    margin-left:-0.05em;
    opacity:0.9;
}

.loader .text:nth-child(5){
    clip-path:polygon(44.44% 0%,55.55% 0%,55.55% 100%,44.44% 100%);
    font-size:calc(var(--main-size)/10);
    margin-left:0em;
    opacity:1;
}

.loader .text:nth-child(6){
    clip-path:polygon(55.55% 0%,66.66% 0%,66.66% 100%,55.55% 100%);
    font-size:calc(var(--main-size)/11);
    margin-left:0.05em;
    opacity:0.9;
}

.loader .text:nth-child(7){
    clip-path:polygon(66.66% 0%,77.77% 0%,77.77% 100%,66.66% 100%);
    font-size:calc(var(--main-size)/13);
    margin-left:0.33em;
    opacity:0.8;
}

.loader .text:nth-child(8){
    clip-path:polygon(77.77% 0%,88.88% 0%,88.88% 100%,77.77% 100%);
    font-size:calc(var(--main-size)/16);
    margin-left:0.98em;
    opacity:0.7;
}

.loader .text:nth-child(9){
    clip-path:polygon(88.88% 0%,100% 0%,100% 100%,88.88% 100%);
    font-size:calc(var(--main-size)/20);
    margin-left:2.1em;
    opacity:0.6;
}

/* =========================================
   TEXT ANIMATION
========================================= */

.loader .text span{
    animation:
    scrolling 2s cubic-bezier(0.1,0.6,0.9,0.4) infinite;
}

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

.loader .line{
    position:relative;

    width:50%;
    height:3px;

    margin-top:85px;

    overflow:hidden;

    border-radius:20px;

    background:
    rgba(255,255,255,.08);
}

.loader .line::after{
    content:"";

    position:absolute;
    inset:0;

    background:#ff0000;

    transform:translateX(-100%);

    animation:
    lineMove 2s ease-in-out infinite;
}

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

@keyframes lineMove{

    0%{
        transform:translateX(-100%);
    }

    50%{
        transform:translateX(100%);
    }

    100%{
        transform:translateX(-100%);
    }

}

@keyframes scrolling{

    0%{
        transform:translateX(-100%);
    }

    100%{
        transform:translateX(100%);
    }

}

@keyframes logoFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes pulseBg{

    0%{
        opacity:.7;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.7;
    }

}

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

@media(max-width:700px){

    .loader-logo{
        width:170px;
    }

    .loader{
        --main-size:5em;
    }

}

</style>

<!-- =========================================
     SCRIPT
========================================= -->

<script>

window.addEventListener("load", () => {

    setTimeout(() => {

        const preloader =
        document.getElementById("preloader");

        if(preloader){
            preloader.classList.add("hide");
        }

    }, 1600);

});

/* PAGE TRANSITIONS */

document.addEventListener("click", function(e){

    const link = e.target.closest("a");

    if(!link) return;

    const href = link.getAttribute("href");

    if(
        !href ||
        href.startsWith("#") ||
        href.startsWith("javascript") ||
        href.startsWith("mailto:") ||
        link.target === "_blank"
    ){
        return;
    }

    e.preventDefault();

    const preloader =
    document.getElementById("preloader");

    if(preloader){
        preloader.classList.remove("hide");
    }

    setTimeout(() => {
        window.location.href = href;
    }, 500);

});

</script>