/* --- BODY --- */

@keyframes blink {
  0% { display: none; }
  90% { display: none; }
  100%   { display: block; }
}

@keyframes kapoo {
  0% { display: none; }
  100%   { display: block; }
}
   
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes blink {
  0% { display: none; }
  90% { display: none; }
  100%   { display: block; }
}

@-webkit-keyframes kapoo {
  0% { display: none; }
  100%   { display: block; }
}
   
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#LANDING{
    position: relative;
    overflow-x: hidden;
    min-height: calc(100vh - var(--HEADERHEIGHT));
    display: flex;
    align-items: center;
    margin-top: var(--HEADERHEIGHT);
}

.landing-hook{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    max-width: 520px;
    margin: var(--SCROLLOFFSET) 14%;
    gap: var(--GAP);
}

.landing-img{
    position: absolute;
    margin: var(--SCROLLOFFSET) 0;
    right: -7vw;
    width: 45vw;
    max-width: 1000px;
    z-index: -1;
}

.landing-img-blink{
    animation: 4s steps(2, end) blink;
    animation-iteration-count: infinite;
}

.landing-img-kapoo{
    animation: 8s steps(2, end) kapoo;
    animation-iteration-count: infinite;
}

.landing-img-masked {
    clip-path: url(#CLIPPATH);
}

.landing-img-light{
    mix-blend-mode: overlay;
}

.landing-img-leaves {
    opacity: .5;
}

#DEMOREEL, #WORKS, #CONTACT, #ABOUT{
    position: relative;
    background-color: var(--BG02);
    width: 72%;
    margin: calc(var(--GAP)*2) 7%;
    padding: calc(var(--GAP)*1.2) 7%;
    border-radius: var(--RADIUS01);
    scroll-margin-top: var(--SCROLLOFFSET);
    overflow: clip;
}

#ABOUT{
    background-color: transparent;
}

.demoreel-img{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.demoreel-leaves-01{
    position: absolute;
    left: -7.5%;
    top: 25%;
    width: 21%;
    transform: rotate(180deg);
    filter: blur(0.2vw);
}

.demoreel-leaves-02{
    position: absolute;
    right: -7.5%;
    top: 45%;
    width: 21%;
    filter: blur(0.2vw);
}

.demoreel-video{
    width: 58vw;
        overflow: hidden;
    border-radius: var(--RADIUS02);
}

#TABS{
    width: 100%;
    height: var(--HEADERHEIGHT);
    display: flex;
    justify-content: center;
    margin-bottom: var(--GAP);
}

.works-tabs{
    position: relative;
    background-color: var(--BG01);
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    gap: var(--NAVGAP);
    height: 100%;
    padding: 0px var(--NAVPADDING);
    width: fit-content;
    border-radius: 100px;
    overflow: hidden;
}

.works-tabs-txt{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-wrap: nowrap;
    gap: var(--NAVGAP);
    height: var(--HEADERHEIGHT);
    padding: 0px var(--NAVPADDING);
    transition: 0.2s ease;
}

.works-tabs-slider{
    position: absolute;
    background-color: var(--BG03);
    left: 0px;
    height: 100%;
    width: 0px;
    border-radius: 100px;
    clip: rect(0, auto, auto, 0);
    transition: 0.2s ease;
}

.works-gallery-carousel{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 200%;
}

.works-gallery{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: baseline;
    gap: calc(var(--GAP) / 2);
    opacity: 1;
    width: 72vw;
}

.works-projects{
    transform: translateX(-100%);
}

.works-gallery-hidden.left{
    transform: translateX(-80%) scale(0.7);
    opacity: 0;
    filter: blur(0.2vw);
}

.works-gallery-hidden.right{
    transform: translateX(80%) scale(0.7);
    opacity: 0;
    filter: blur(0.2vw);
    height: 5px;
}

.works-card{
    position: relative;
    display: flex;
    background-color: var(--BG01);
    width: calc(50% - var(--GAP) / 4);
    border-radius: var(--RADIUS02);
    overflow: -moz-hidden-unscrollable;
    mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

.works-card-bg{
    transition: ease 0.3s;
    position: relative;
    display: flex;
}

.works-card-bg h3{
    position: absolute;
    top: calc(var(--GAP)/1.5);
    width: 100%;
    text-align: center;
    transition: transform ease 0.3s;
    font-size: 2.6vw;
    pointer-events: none;
}

.works-card-hidden{
    display: none;
}

.works-square-img{
    display: none;
}

.works-card img{
    width: 100%;
    transition: ease 0.3s;
}

.works-projects .works-card:hover img, .works-card:hover .works-card-bg{
    transform: scale(1.05);
}

.works-caption{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--GAP) / 1.5);
    border-radius: var(--RADIUS02);
    height: 100.1%;
    width: 100.1%;
    backdrop-filter: blur(25px);
    background-color: hsla(270, 24%, 11%, 0.3);
    padding: 10px var(--GAP);
    box-sizing: border-box;
    transform: translateX(-50%) scaleX(0%);
    transition: ease 0.3s;
}

.works-card:hover .works-caption{
    transform: translateX(0%) scaleX(100%);
}

.works-caption .-W-H4{
    margin-bottom: calc(var(--GAP)/-2);
}

.works-caption p{
    width: 70%;
}

.works-more{
    padding-top: var(--GAP);
    width: 100%;
    display: flex;
    justify-content: center;
}

.works-more-btn{
    transition: ease 0.2s;
    height: var(--SVG02)
}

.works-more-btn:hover{
    transform: translateY(-5px);
}

.works-more svg{
    height: var(--SVG02);
}


.about-content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--GAP) * 2);
}

.about-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--GAP) * 2);
}

.about-presentation{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: calc(var(--GAP)/1.5);
}

.about-main img{
    max-height: 50vh;
    max-width: 30vw;
    border-radius: var(--RADIUS02);
}

.about-resume-00{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: calc(var(--GAP) * 2);
}

.about-resume-01{
    display: flex;
    flex-direction: column;
    gap: calc(var(--GAP) * 2);
}

.about-date{
    background-color: var(--BG03);
    height: fit-content;
    text-align: center;
    text-wrap: nowrap;
    min-width: 55px;
    padding: 5px;
    border-radius: 100px;
}

.about-text-group-00{
    display: flex;
    flex-direction: column;
    gap: var(--GAP);
}

.about-text-group-01{
    display: flex;
    justify-content: baseline;
    align-items: baseline;
    gap: var(--GAP);
}

.about-text-group-02{
    display: flex;
    flex-direction: column;
    gap: calc(var(--GAP) / 2);
    max-width: 380px;
}

.about-text-group-03{
    width: fit-content;
}

.about-line{
    position: absolute;
    text-align: center;
    margin-top: 25px;
    padding: 0 6px;
    width: 55px;
    overflow: hidden;
    z-index: -3;
}

.about-education, .about-software, .about-experience {
    display: flex;
    flex-direction: column;
    gap: calc(var(--GAP)/1.5);
}

.about-software-img{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(var(--GAP) / 2);
    width: calc(var(--ROUNDPADDING) * 6 + var(--GAP) * 2.5);
}

.about-software-img li{
  position: relative;
  display: inline-block;
}

.about-software-img li:hover::after{
    content: attr(data-title);
    position: absolute;
    background-color: var(--BG02);
    border-radius: var(--RADIUS01);
    color: var(--TXT02);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 500;
    font-size: var(--P);
    margin: 0;
    padding: calc(var(--P) + 3px);
    top: -75%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: 0.2s fade;
}

.about-software-img img{
    position: relative;
    width: var(--ROUNDPADDING);
    border-radius: var(--RADIUS03);
    transition: transform 0.1s ease;
}

.about-software-img img:hover{
    transform: translateY(-8px) rotate(-10deg);
}

.contact-content{
    display: flex;
    justify-content: space-between;
    gap: calc(var(--GAP) * 2);
    width: 100%;
}

form{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    gap: calc(var(--GAP) / 2);
    width: 100%;
}

input{
    box-sizing: border-box;
    background-color: var(--BG01);
    width: 100%;
    height: var(--HEADERHEIGHT);
    border-radius: 100px;
    border: none;
    outline: none;
    padding: 0 var(--NAVPADDING);
}

input::placeholder{
    color: var(--TXT01);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--P);
    margin: 0;
}

textarea{
    box-sizing: border-box;
    background-color: var(--BG01);
    width: 100%;
    height: 200px;
    border-radius: var(--RADIUS02);
    border: none;
    outline: none;
    padding: calc((var(--HEADERHEIGHT) - var(--P))/2) var(--NAVPADDING);
    resize: none;
    scrollbar-color: var(--BG03);
}

textarea::placeholder{
    color: var(--TXT01);
    font-family: "Baloo Bhai 2", sans-serif;
    font-weight: 700;
    font-size: var(--P);
    margin: 0;
}

textarea::-webkit-scrollbar{
    display: none;
}

.contact-submit{
    gap: calc(var(--GAP) / 3);
}

.contact-submit svg{
    transition: ease 0.2s;
    width: var(--SVG02);
}

.contact-submit:hover svg{
    transform: translateX(5px);
}

#SOCIALS{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--GAP) / 2);
}

.contact-links-img{
    height: var(--SVG01);
}

.short-line{
    width: 170px;
}

.contact-mail-links{
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: calc(var(--GAP) / 3);
}

.contact-mail{
    gap: calc(var(--GAP) / 3);
    padding: 0px calc(var(--NAVPADDING)*1.6);
}

.contact-links{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

@media only screen and (max-width: 1290px) {
    .works-caption p{
        width: 100%;
    }
}

@media only screen and (min-width: 1241px) {
    .works-tasks-card{
        width: calc(33.33333% - var(--GAP)/3);
        aspect-ratio: 1/1;
    }

    .works-full-img{
        display: none;
    }

    .works-square-img{
        display: block;
    }
}

@media only screen and (max-width: 1240px) {
    .landing-hook{
        gap: calc(var(--GAP) / 1.5);
    }

    .works-gallery{
        gap: calc(var(--GAP) / 2);
    }
    
    .works-card{
        width: 58vw;
    }

    .works-card-bg h3{
        font-size: 4.7vw;
    }

    .works-caption p{
        width: 70%;
    }

    .about-software-img{
        gap: calc(var(--GAP) / 4);
        width: calc(var(--ROUNDPADDING) * 4 + var(--GAP)*0.75);
    } 

    .about-software-img li:nth-child(1){order: 1;}
    .about-software-img li:nth-child(2){order: 2;}
    .about-software-img li:nth-child(3){order: 3;}
    .about-software-img li:nth-child(4){order: 4;}
    .about-software-img li:nth-child(5){order: 5;}
    .about-software-img li:nth-child(6){order: 6;}
    .about-software-img li:nth-child(7){order: 11;}
    .about-software-img li:nth-child(8){order: 12;}
    .about-software-img li:nth-child(9){order: 7;}
    .about-software-img li:nth-child(10){order: 8;}
    .about-software-img li:nth-child(11){order: 9;}
    .about-software-img li:nth-child(12){order: 10;}

}

@media only screen and (max-width: 1024px) {
    .landing-hook{
        max-width: 45%;
    }

    .landing-hook{
        gap: calc(var(--GAP) / 2);
    }

    .demoreel-img{
        display: none;
    }

    .demoreel-video{
        width: 100%;
        overflow: hidden;
        border-radius: var(--RADIUS02);
    }

    .works-gallery{
        gap: calc(var(--GAP) / 2);
    }
    
    .works-card{
        width: 100%;
    }

    .works-card-bg h3{
        font-size: 5.8vw;
    }
    
    .about-main img{
        max-width: 58vw;
    }

    .about-main{
        flex-direction: column;
        gap: var(--GAP);
    }

    .about-content{
        gap: calc(var(--GAP)*1.2);
    }

    .about-main img{
        order: 2;
    }

    .about-presentation{
        order: 1;
    }

    .about-resume-00{
        flex-direction: column;
        gap: calc(var(--GAP)*1.2);
    }

    .about-resume-01{
        gap: calc(var(--GAP)*1.2);
    }

    .about-software-img{
        gap: calc(var(--GAP) / 6);
        width: calc(var(--ROUNDPADDING) * 6 + var(--GAP)*1.25);
    }

    .about-software-img li:nth-child(1){order: 1;}
    .about-software-img li:nth-child(2){order: 2;}
    .about-software-img li:nth-child(3){order: 3;}
    .about-software-img li:nth-child(4){order: 4;}
    .about-software-img li:nth-child(5){order: 5;}
    .about-software-img li:nth-child(6){order: 6;}
    .about-software-img li:nth-child(7){order: 7;}
    .about-software-img li:nth-child(8){order: 8;}
    .about-software-img li:nth-child(9){order: 9;}
    .about-software-img li:nth-child(10){order: 10;}
    .about-software-img li:nth-child(11){order: 11;}
    .about-software-img li:nth-child(12){order: 12;}

    .contact-content{
        flex-direction: column;
        gap: calc(var(--GAP)*1.2);
    }
    
    form{
        order: 2;
    }

    #SOCIALS{
        order: 1;
    }

    #DEMOREEL, #WORKS, #CONTACT, #ABOUT{
        margin: var(--GAP) 7%;
    }
}

@media only screen and (max-width: 768px) {
    #LANDING{
        min-height: 100vh;
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        margin-top: 0px;
    }
    
    .landing-hook{
        max-width: 350px;
        margin-bottom: 0px;
    }
    
    .landing-img{
        position: relative;
        margin: 0px 0px;
        margin-bottom: var(--HEADERHEIGHT);
        width: 65%;
        top: 0px;
        right: -30vw;
    }

    .works-caption p{
        width: 100%;
    }

    .works-card-bg h3{
        top: calc(var(--GAP)/2);
    }
}

@media only screen and (max-width: 580px) {
    .landing-hook{
        max-width: none;
        margin-bottom: 0px;
    }

    .landing-img{
        width: 80%;
        right: -15vw;
    }

    .works-card-bg h3{
        top: calc(var(--GAP)/2.5);
    }
}

@media only screen and (hover: none), (max-width: 560px) {
    
    .works-card{
        overflow: visible;
        flex-direction: column;
        background-color: var(--BG01);
    }

    .works-card img{
        border-radius: var(--RADIUS02);
    }

    .works-projects .works-card:hover img, .works-card:hover .works-card-bg{
        transform: initial;
    }
    
    .works-caption{
        position: relative;
        height: initial;
        width: 100%;
        padding: var(--GAP);
        backdrop-filter: none;
        background-color: transparent;
        transform: initial;
        transition: none;
    }

    .works-caption p{
        width: 100%;
    }
    
    .works-card:hover .works-caption{
        transform: initial;
    }

    .works-more-btn:hover{
        transform: initial;
    }

    .contact-submit:hover svg{
        transform: initial;
    }

    .about-software-img img:hover{
        transform: initial;
    }

    @media only screen and (max-width: 768px) {
        .works-caption{
            padding: calc(var(--GAP) / 1.2) 7vw;
        }
    
    }
}

@media only screen and (max-width: 470px) {
    #LANDING{
        min-height: 92vh;
    }
}

@media only screen and (max-width: 425px) {
    .about-software-img{
        width: 100%;
    }

    .contact-mail{
        padding: 0px calc(var(--NAVPADDING)*1.4);
    }
}