#page-loader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s ease-in-out;
}

#page-loader .logo-loader {
    margin-bottom: 40px;
}

#page-loader .container-loader {
    width: 300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transform: perspective(500px) rotateX(60deg);

    .aro {
        position: absolute;
        inset: calc(var(--s) * 10px);
        box-shadow: inset 0 0 80px #d60000;
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        animation: strim 3s infinite ease-in-out both;
        animation-delay: calc(var(--s) * -0.1s);
    }
}

@keyframes strim {

    0%,
    100% {
        transform: translateZ(-100px) rotate(0deg);
    }

    50% {
        transform: translateZ(100px) rotate(90deg);
    }
}

/* Prior to using this loader, please ensure that you have set a background image or background color, as the text is transparent and not designed with a solid color. */
#page-loader .loader {
    --ANIMATION-DELAY-MULTIPLIER: 70ms;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    margin-top: 80px;
}

#page-loader .loader span {
    padding: 0;
    margin: 0;
    letter-spacing: -5rem;
    animation-delay: 0s;
    transform: translateY(4rem);
    animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
}

#page-loader .loader .l {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
}

#page-loader .loader .o {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
}

#page-loader .loader .a {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
}

#page-loader .loader .d {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
}

#page-loader .loader .ispan {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
}

#page-loader .loader .n {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
}

#page-loader .loader .g {
    animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
}

#page-loader .letter {
    width: fit-content;
    height: 3rem;
}

#page-loader .i {
    margin-inline: 5px;
}

@keyframes hideAndSeek {
    0% {
        transform: translateY(4rem);
    }

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