@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=EB+Garamond:wght@400..800&display=swap');

:root{
    --primary-color:#9b1219;
    --secondary-color:#c41721;
    --dark-color:#000;
    --zeta-font:"IM Fell English",sans-serif;
    --zeta-title-font:"EB Garamond",serif;
    --zeta-font-size:calc(1rem + .25vw);
    --swiper-theme-color:#fff;
}

::selection{
    background-color:var(--primary-color);
    color:#fff;
}

::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-button{background-color:var(--primary-color);height:0;width:0;}
::-webkit-scrollbar-track{background-color:var(--primary-color);box-shadow:0;}
::-webkit-scrollbar-track-piece{background-color:var(--dark-color);}
::-webkit-scrollbar-thumb{background-color:var(--primary-color);border-radius:5px;}
::-webkit-scrollbar-corner{background-color:var(--primary-color);}
::-webkit-resizer{background-color:var(--primary-color);}

body{
    --page-frame-size:20px;

    background-color:var(--dark-color);
    overflow-y:hidden;

    &::after{
        content:"";
        width:100%;
        height:100vh;
        border:var(--page-frame-size) solid;
        border-image:url(../img/mask-frame.png);
        border-image-slice:30;
        border-image-repeat:repeat;
        pointer-events:none;
        position:fixed;
        top:0;
        left:0;
        z-index:var(--zeta-index-3);
    }

    &.ready{
        overflow-y:auto;
        
        & #preloader{
            opacity:0;
            visibility:hidden;
            filter:blur(15px);
        }
    }
}

nav{
    height:60px;
    background-color:transparent;
    box-shadow:none;
    mask-size:30% 200%;
    mask-repeat:no-repeat;
    mask-position:-2% 100%, 33% 100%, 67% 100%, 102% 100%;
    mask-image:
        url(../img/mask-block.svg),
        url(../img/mask-block.svg),
        url(../img/mask-block.svg),
        url(../img/mask-block.svg);
    transition:.5s ease-in-out;

    & > .nav-wrapper{
        & > .badge{
            & img{
                height:45%;
            }
        }

        & .modules{
            & ul{
                & li{
                    & a{
                        font-family:var(--zeta-title-font);
                        font-weight:500;
                        font-size:1.25rem;
                        color:#fff;

                        & span{
                            margin-right:.5rem;
                            line-height:0;
                            transition:.3s ease;
                        }

                        &:hover,
                        &:active,
                        &:focus{
                            background-color:transparent;
                        }
                    }
                }
            }
        }

        & .icons{
            width:auto;
            height:inherit;
            display:inline-flex;
            align-items:center;
        }

        & .social{
            margin-left:auto;
        }
    }

    &.active{
        background-color:rgba(0,0,0,0.85);
        backdrop-filter:blur(10px);
    }
}

h1,h2,h3,h4,h5{
    font-family:var(--zeta-title-font);
    font-weight:600;

    & b{
        margin-left:-1rem;
        margin-right:-1rem;
        padding:0 1.1rem;
        width:auto;
        display:inline-block;
        mask-size:100% 100%;
        -webkit-mask-image:url(../img/mask-button.svg);
                mask-image:url(../img/mask-button.svg);
        background-color:var(--primary-color);
        font-weight:inherit;
    }
}

h6{
    & span{
        margin-left:-1rem;
        margin-right:-1rem;
        padding:0 1.1rem;
        width:auto;
        display:inline-block;
        mask-size:100% 100%;
        -webkit-mask-image:url(../img/mask-button.svg);
                mask-image:url(../img/mask-button.svg);
        background-color:var(--primary-color);
    }
}

h2{
    margin-bottom:1.5rem;
    font-size:calc(2rem + 1vw);
    font-weight:400;
    color:#fff;
}

h3{
    font-weight:500;
    color:#fff;
}

p{
    font-weight:300;
    color:rgba(255,255,255,.8);
    text-align:justify;
    text-indent:2rem;

    &:last-child{
        margin-bottom:0;
    }

    & a{
        width:auto;
        display:inline-block;
        font-weight:600;
        text-decoration:none;
        color:#fff;
        position:relative;
        transition:0.3s ease;

        &::before{
            content:"";
            width:100%;
            height:1px;
            position:absolute;
            left:0;
            bottom:-2px;
            -webkit-mask-image:url(../img/mask-form-translucent.svg);
                    mask-image:url(../img/mask-form-translucent.svg);
            mask-size:100%;
            background-color:var(--secondary-color);
            transition:0.3s ease;
        }

        &:hover,
        &:focus,
        &:active{
            color:#fff;

            &::before{
                background-color:#fff;
            }
        }
    }
}

figure{
    margin:0;
    padding:0;
}

footer{
    background-image:url(../img/background-blood-04.png);
    background-size:400px;
    background-repeat:no-repeat;
    background-position-y:105%;
    background-position-x:105%;

    & h4{
        font-weight:500;
        color:#fff;
    }

    & p{
        font-size:1.1rem;
    }

    & h5{
        margin:0;
        text-align:center;
        color:rgba(255,255,255,.8);
    }

    & .icons{
        margin:1rem 0;

        & a{
            width:60px;
            height:60px;
        }
    }

    & #copyright{
        & p{
            font-weight:500;
            text-indent:0;
            text-align:left;

            & b{
                font-family:var(--zeta-title-font);
                text-transform: capitalize;
                color:#fff;
            }
        }
    }
}

.row,
.nav-wrapper{
    margin:0 auto;
    max-width:1400px;
}

.fab{
    font:var(--fa-font-brands);
}

.parallax{
    height:600px;
}

.solar{
    display:flex;
    align-items:center;
}

.background{
    &.dark{
        background-color:var(--dark-color);
    }

    &.blood{
        background-image:url(../img/background-blood.png);
        background-size:contain;
        background-position:center;
        background-repeat:no-repeat;
    }

    &.image{
        height:100%;
        overflow:hidden;
        position:relative;

        & > img{
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
            transition:.5s ease-in-out;
        }

        &:hover,
        &:focus,
        &:active{
            & > img{
                scale:1.1;
            }
        }
    }

    &.mask{
        position:relative;
        -webkit-mask-image:url(../img/mask-block-02.svg);
                mask-image:url(../img/mask-block-02.svg);
        mask-size:100% 100%;

        &::before{
            content:"";
            width:100%;
            height:100%;
            position:absolute;
            top:0;
            left:0;
            z-index:1;
            pointer-events:none;
            box-shadow:inset 0 0 80px rgba(0,0,0,1);
            opacity:0;
            visibility:hidden;
            transition:.5s ease-in-out;
        }

        &:hover,
        &:focus,
        &:active{
            &::before{
                opacity:1;
                visibility:visible;
            }
        }
    }
}

.grunge-bg{
    background-image:url(../img/dust-grunge.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.grunge{
    position:relative;

    &::before,
    &::after{
        content:"";
        width:100%;
        height:54px;
        position:absolute;
        left:0;
        z-index:1;
    }

    &.top{
        &::before{
            top:-50px;
            background-image:url(../img/grunge-top.svg);
            background-repeat:repeat-x;
            background-position:center;
            transform:rotateZ(180deg);
        }
    }

    &.bottom{
        &::after{
            bottom:-50px;
            background-image:url(../img/grunge-bottom.svg);
            background-repeat:repeat-x;
            background-position:center;
        }
    }
}

.degrade{
    &.bottom-top{
        align-items:end;
        background:linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0.5) 100%);
    
        &.linear{
            background:linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
        }
    }

    &.right-left{
        background:linear-gradient(-90deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.75) 75%, rgba(0, 0, 0, 0.5) 100%);
    }
}

.separator{
    -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image:linear-gradient(to right, transparent 0%, #000 10px, #000 calc(100% - 10px), transparent 100%);
}

.button-circle{
    --button-size:80px;
    --before-size:14px;
    --animation-time:.5s;

    width:var(--button-size);
    height:var(--button-size);
    border:0;
    background-color:var(--primary-color);
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    opacity:.85;
    position:relative;
    transition:var(--animation-time) ease-in-out;

    &::before{
        content:"";
        width:calc(var(--button-size) + var(--before-size));
        height:calc(var(--button-size) + var(--before-size));
        -webkit-mask-image:url(../img/mask-circle-outline.svg);
                mask-image:url(../img/mask-circle-outline.svg);
        mask-size:100% 100%;
        background-color:var(--primary-color);
        border-radius:50%;
        position:absolute;
        top:-7px;
        bottom:-7px;
        right:-7px;
        left:-7px;
        transition:var(--animation-time) ease-in-out;
    }

    & span{
        margin-top:.5rem;
        font-size:1.5rem;
        color:#fff;
        transition:var(--animation-time) ease-in-out;
    }

    & img{
        width:25px;
        height:auto;
        transition:var(--animation-time) ease-in-out;
    }

    &.min{
        --button-size:60px;
        --before-size:10px;

        &::before{
            top:-5px;
            right:-5px;
            bottom:-5px;
            left:-5px;
        }

        & img{
            width:20px;
        }
    }

    &:hover,
    &:focus,
    &:active{
        opacity:1;

        &::before{
            rotate:15deg;
        }

        & span,
        & img{
            scale:1.1;
        }
    }
}

.icons{
    display:flex;
    align-items:center;
    justify-content:center;

    & a{
        width:50px;
        height:50px;
        margin:0 .25rem;
        display:flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        font-size:calc(1.25rem + .25vw);
        color:#fff;
        text-decoration:none;
        position:relative;

        & span{
            transition:.3s ease;

            &[class^="fi-rr"]{
                line-height:0;
            }
        }

        &::before{
            content:"";
            width:inherit;
            height:inherit;
            -webkit-mask-image:url(../img/mask-circle-outline.svg);
                    mask-image:url(../img/mask-circle-outline.svg);
            mask-size:100% 100%;
            background-color:var(--primary-color);
            border-radius:inherit;
            position:absolute;
            top:0;
            left:0;
            opacity:0;
            transition:.3s ease;
        }

        &:first-child{
            font-size:calc(1.05rem + .25vw);
        }

        &:last-child{
            font-size:calc(1.05rem + .25vw);
        }

        &:hover,
        &:focus,
        &:active{
            & span{
                scale:.9;
            }

            &::before{
                opacity:1;
                rotate:360deg;
            }
        }
    }
}


.text-align{
    &.center{
        text-align:center;
    }

    &.right{
        text-align:right;
    }
}

.filter{
    &.invert{
        filter:invert();
    }
}

.glitch-text{
    animation-name:glitch-anim-text;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

#preloader{
    width:100vw;
    height:100vh;
    align-content:center;
    background-color:var(--dark-color);
    position:fixed;
    top:0;
    left:0;
    opacity:1;
    visibility:visible;
    pointer-events:none;
    filter:blur(0);
    z-index:var(--zeta-index-3);
    transition:.5s ease;

    & h2{
        line-height:1;
    }

    & span{
        margin:2rem auto 0 auto;
        width:80%;
        height:1px;
        display:block;
        -webkit-mask-image:url(../img/mask-line.svg);
                mask-image:url(../img/mask-line.svg);
        mask-size:auto 100%;
        background-color:rgba(255,255,255,.5);
        overflow:hidden;
        position:relative;

        &::before{
            content:"";
            width:200px;
            height:2px;
            display:block;
            background-image:
                linear-gradient(90deg, transparent 0%, var(--primary-color) 20px, var(--primary-color) calc(100% - 20px), transparent 100%);
            position:absolute;
            top:0;
            left:0;
            transform:translate(-100%);
            animation:preloader 1.5s infinite;
        }
    }
}

#btnMenu{
    width:60px;
    height:60px;
    display:block;
    border-radius:50%;
    align-content:center;
    text-align:center;
    background-color:var(--primary-color);
    box-shadow:0 0 20px rgba(0, 0, 0, 0.75);
    position:fixed;
    bottom:1.5rem;
    right:1.5rem;
    z-index:var(--zeta-index-2);
    transition:0.5s ease;

    &::before{
        content:"";
        width:70px;
        height:70px;
        -webkit-mask-image:url(../img/mask-circle-outline.svg);
                mask-image:url(../img/mask-circle-outline.svg);
        mask-size:100% 100%;
        background-color:var(--primary-color);
        border-radius:inherit;
        position:absolute;
        top:-5px;
        left:-5px;
    }

    & img{
        filter:invert();
    }

    &:hover,
    &:focus,
    &:active{
        scale:.85;
        rotate:360deg;
    }
}

#menu{
    width:100vw;
    height:100vh;
    background-image:url(../img/img-12.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position:fixed;
    top:0;
    left:0;
    z-index:var(--zeta-index-1);
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    filter:blur(15px);
    transition:0.5s ease;

    & .solar{
        padding:3rem 0;
        display:block;
        align-content:center;
        overflow-y:auto;

        & h2{
            margin-top:3rem;
            font-size:calc(1.5vw + 2rem);
        }

        & h5{
            margin:1rem 0 1.5rem 0;
            color:#fff;
        }

        & p{
            font-size:.9rem;

            &.text-align{
                text-indent:0;
            }
        }

        & menu{
            margin:4rem 0 3rem 0;
            padding:0;
            list-style-type:none;

            & li{
                margin:.5rem 0;

                & a{
                    width:auto;
                    margin-bottom:.5rem;
                    display:inline-block;
                    font-size:calc(.8vw + 1.5rem);
                    text-transform:capitalize;
                    text-decoration:none;
                    color:rgba(255,255,255,.8);
                    position:relative;
                    transition:0.3s ease;
                    
                    &::before{
                        content:"";
                        width:0;
                        height:3px;
                        position:absolute;
                        left:0;
                        bottom:4px;
                        -webkit-mask-image:url(../img/mask-line.svg);
                                mask-image:url(../img/mask-line.svg);
                        mask-size:auto 100%;
                        background-color:var(--secondary-color);
                        transition:0.5s ease;
                    }

                    &:hover,
                    &:focus,
                    &:active{
                        color:#fff;

                        &::before{
                            width:100%;
                        }
                    }
                }
            }
        }
    }

    &.active{
        opacity:1;
        visibility:visible;
        filter:blur(0);
        pointer-events:all;
    }
}

#swiperGallery{
    margin-top:1rem;
    
    & figure{
        height:calc(300px + 6vw);
    }

    & .swiper-pagination{
        bottom:2rem;
    }
}

@keyframes glitch-anim-text {
    0%{ 
        transform:translate3d(10px,0,0) scale3d(-1,-1,1);
        -webkit-clip-path:polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
                clip-path:polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
    }
    2%{
        -webkit-clip-path:polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
                clip-path:polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    4%{
        -webkit-clip-path:polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
                clip-path:polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    5%{
        -webkit-clip-path:polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
                clip-path:polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    6%{
        -webkit-clip-path:polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
                clip-path:polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    7%{
        -webkit-clip-path:polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
                clip-path:polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    8%{
        -webkit-clip-path:polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
                clip-path:polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    9%{
        -webkit-clip-path:polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
                clip-path:polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }
    9.9%{
        transform: translate3d(10px,0,0) scale3d(-1,-1,1);
    }
    10%, 100% {
        transform:translate3d(0,0,0) scale3d(1,1,1);
        -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
                clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
}

@media(max-width:991px){
    footer{
        text-align:center;

        p{
            text-indent:0;
            text-align:center;
        }

        & #copyright{
            & p{
                text-align:center;
            }

            & .text-align{
                &.right{
                    text-align:center;
                }
            }
        }
    }
}

@media(max-width:767px){
    nav{
        & > .nav-wrapper{
            & .social{
                display:none;
            }
        }
    }
}

@media(max-width:575px){
    #menu{
        & h2{
            text-align:center;
        }

        & menu{
            & li {
                & p{
                    display:none;
                }
            }
        }
    }
}

@media(max-width:464px){
    nav{
        & > .nav-wrapper{
            justify-content:center;
            
            & .functions{
                display:none;
            }
        }
    }
}

@keyframes preloader {
    0%{
        transition-timing-function:ease-in-out;
        transform:translate(-100%);
    }

    100%{
        transition-timing-function:ease-in;
        transform:translate(calc(100% + 140px));
    }
}