@charset "UTF-8";

/* ===================================
   PORTFOLIO PAGE
=================================== */

body.portfolio-page{

    background:#16090D;
    overflow-x:hidden;

}


/* ===================================
   EFFECTS
=================================== */

.portfolio-effects{

    position:fixed;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:0;

}


/* ===================================
   BRANDING GLOW
=================================== */

.branding-effect{

    position:absolute;
    inset:0;

    opacity:0;

    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(0,229,255,.35),
            rgba(0,229,255,.12) 25%,
            transparent 55%
        );

    transition:opacity .5s ease;

}


body.branding-active .branding-effect{

    opacity:1;

    animation:spotlightPulse 2.5s infinite alternate;

}


@keyframes spotlightPulse{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.08);
    }

}


/* ===================================
   DESIGN RAIN
=================================== */

.design-effect{

    position:absolute;
    inset:0;

    opacity:0;

    overflow:hidden;

}


.design-hover:hover .design-effect,
body.design-active .design-effect{

    opacity:1;

}


.design-effect span{

    position:absolute;

    top:-120%;

    width:2px;
    height:120%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #00E5FF,
            transparent
        );

    animation:rainFall 2.5s linear infinite;

}


.design-effect span:nth-child(1){ left:45%; animation-delay:.2s; }
.design-effect span:nth-child(2){ left:55%; animation-delay:1s; }
.design-effect span:nth-child(3){ left:62%; animation-delay:.5s; }
.design-effect span:nth-child(4){ left:70%; animation-delay:1.4s; }
.design-effect span:nth-child(5){ left:78%; animation-delay:.8s; }


@keyframes rainFall{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(220vh);
    }

}

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

.portfolio-grid{
    width:100%;
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,260px);
    justify-content:center;
    align-content:center;
    gap:70px;
    min-height:calc(100vh - 300px);
    margin:0 auto;
}

/* ===================================
   CARDS
=================================== */

.portfolio-card{
    width:260px;
    height:260px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    text-decoration:none;
    background:#080808;
    border:2px solid rgba(255,255,255,.15);
    animation:cardFloat 5s ease-in-out infinite;
    transition:.35s ease;
}

.portfolio-card:hover{
    transform:translateY(-10px);
    border-color:#00E5FF;
    box-shadow:
        0 0 35px rgba(0,229,255,.35);
}

@keyframes cardFloat{
    0%,100%{
        transform:translateY(0);
    }

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

/* ===================================
   IMAGES
=================================== */

.card-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.default-image{
    opacity:1;
}

.hover-image{
    opacity:0;
}

.portfolio-card:hover .default-image{
    opacity:0;
}

.portfolio-card:hover .hover-image{
    opacity:1;
}

/* ===================================
   TITLE
=================================== */

.card-title{
    position:absolute;
    z-index:5;
    color:white;
    font-family:"Barlow Condensed",sans-serif;
    font-size:38px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    text-shadow:
        0 3px 12px rgba(0,0,0,.9);
    transition:.25s ease;

}

.portfolio-card:hover .card-title{
    color:#00E5FF;
}

/* ===================================
   CONTACT
=================================== */

.portfolio-contact{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:18px;
    margin:10px auto 90px;
}

.portfolio-contact p{
    color:rgba(255,255,255,.65);
    font-size:15px;
    letter-spacing:.08em;
}

/* ===================================
   PAGE CONTACT LINK
=================================== */

.portfolio-page .page-contact-link{
    transform:translateY(-35px);
}

.portfolio-page .page-contact-link p{
    color:#ffffff;
    font-family:"Jost",sans-serif;
    font-size:18px;
    font-weight:400;
    letter-spacing:.04em;
    text-transform:none;

}

/* ===================================
   FOOTER PROTECTION
=================================== */

body.portfolio-page footer{
    margin-top:0;
}

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

@media (max-width:900px){
    .portfolio-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .portfolio-page .page-contact-link{
        transform:none;
    }
}