/* =========================================================
   SERKAN ŞİMŞEK // DIGITAL EXPERIENCE
   PORTFOLIO
   FINAL
========================================================= */

.portfolio {
    position: relative;
    padding: 160px 0 180px;
    overflow: hidden;
}


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

.portfolio::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1200px;
    height: 1200px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(199, 154, 61, .05),
            transparent 68%
        );

    filter:
        blur(120px);

    pointer-events: none;
}


.portfolio::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .055),
            transparent
        );
}


/* =========================================================
   HEADER
========================================================= */

.portfolio
.section-header {
    position: relative;

    z-index: 5;

    margin-bottom: 80px;
}


/* =========================================================
   STAGE
========================================================= */

.portfolio-stage {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 34px;
}


/* =========================================================
   PROJECT
========================================================= */

.project {
    position: relative;

    min-width: 0;

    overflow: visible;
}


.project-large {
    grid-column:
        1 / -1;
}


.project-link {
    position: relative;

    display: block;

    width: 100%;
}


/* =========================================================
   MEDIA
========================================================= */

.project-media {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 255, 255, .065);

    border-radius: 28px;

    background:
        #0b0b0b;

    box-shadow:
        0 30px 90px
        rgba(0, 0, 0, .42);

    transform:
        perspective(1400px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translateZ(0);

    transform-style:
        preserve-3d;

    transition:
        transform .55s var(--ease),
        border-color .5s ease,
        box-shadow .5s ease;

    will-change:
        transform;
}


.project-large
.project-media {
    min-height: 700px;
}


/* =========================================================
   PLACEHOLDER BASE
========================================================= */

.project-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;
    justify-content: flex-start;

    padding: 36px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(199, 154, 61, .13),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #141414 0%,
            #090909 38%,
            #050505 100%
        );

    transition:
        transform .8s var(--ease),
        filter .8s var(--ease);

    will-change:
        transform;
}


/* =========================================================
   PROJECT 01
========================================================= */

.project-placeholder-one {
    background:
        radial-gradient(
            circle at 74% 30%,
            rgba(199, 154, 61, .15),
            transparent 26%
        ),
        radial-gradient(
            circle at 24% 72%,
            rgba(255, 255, 255, .025),
            transparent 34%
        ),
        linear-gradient(
            140deg,
            #141414,
            #070707 60%,
            #101010
        );
}


.project-placeholder-one::before {
    content: "";

    position: absolute;

    left: 12%;
    top: 15%;

    width: 76%;
    height: 64%;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .005)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, .05),

        0 40px 120px
        rgba(0, 0, 0, .7);

    backdrop-filter:
        blur(8px);

    transform:
        perspective(1300px)
        rotateX(2deg)
        rotateY(-8deg)
        rotateZ(-1deg);

    transition:
        transform .8s var(--ease);
}


.project-placeholder-one::after {
    content: "";

    position: absolute;

    left: 22%;
    top: 25%;

    width: 56%;
    height: 8px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            rgba(255, 255, 255, .08)
        );

    box-shadow:
        0 26px 0
        rgba(255, 255, 255, .07),

        0 52px 0
        rgba(255, 255, 255, .04),

        0 78px 0
        rgba(255, 255, 255, .025);
}


/* =========================================================
   PROJECT 02
========================================================= */

.project-placeholder-two {
    background:
        radial-gradient(
            circle at 30% 65%,
            rgba(199, 154, 61, .12),
            transparent 26%
        ),
        linear-gradient(
            125deg,
            #101010,
            #050505 72%
        );
}


.project-placeholder-two::before {
    content: "";

    position: absolute;

    left: 15%;
    top: 17%;

    width: 70%;
    height: 68%;

    border-radius: 32px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .04),
            rgba(255, 255, 255, .008)
        );

    border:
        1px solid
        rgba(255, 255, 255, .06);

    transform:
        perspective(1100px)
        rotateY(8deg)
        rotateZ(2deg);

    box-shadow:
        0 35px 100px
        rgba(0, 0, 0, .58);

    transition:
        transform .8s var(--ease);
}


.project-placeholder-two::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    border:
        1px solid
        rgba(199, 154, 61, .28);

    box-shadow:
        0 0 0 30px
        rgba(199, 154, 61, .03),

        0 0 80px
        rgba(199, 154, 61, .08);

    transition:
        transform .8s var(--ease),
        box-shadow .8s ease;
}


/* =========================================================
   PROJECT 03
========================================================= */

.project-placeholder-three {
    background:
        radial-gradient(
            circle at 70% 35%,
            rgba(199, 154, 61, .10),
            transparent 30%
        ),
        linear-gradient(
            150deg,
            #050505,
            #111111 50%,
            #070707
        );
}


.project-placeholder-three::before {
    content: "";

    position: absolute;

    left: 14%;
    top: 22%;

    width: 72%;
    height: 56%;

    border:
        1px solid
        rgba(255, 255, 255, .05);

    border-radius: 24px;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .04) 1px,
            transparent 1px
        );

    background-size:
        32px 32px;

    mask-image:
        radial-gradient(
            circle,
            black,
            transparent 95%
        );

    transform:
        perspective(1100px)
        rotateX(5deg)
        rotateY(-4deg);

    transition:
        transform .8s var(--ease);
}


.project-placeholder-three::after {
    content: "";

    position: absolute;

    width: 260px;
    height: 2px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    box-shadow:
        0 -55px 0
        rgba(199, 154, 61, .16),

        0 55px 0
        rgba(199, 154, 61, .10);

    transition:
        width .7s var(--ease);
}


/* =========================================================
   PLACEHOLDER LABEL
========================================================= */

.project-placeholder > span {
    position: relative;

    z-index: 5;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 10px;

    background:
        rgba(6, 6, 6, .65);

    backdrop-filter:
        blur(10px);

    color:
        #686868;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;

    transition:
        color .4s ease,
        border-color .4s ease,
        transform .5s var(--ease);
}


/* =========================================================
   SHADE
========================================================= */

.project-shade {
    position: absolute;

    inset: 0;

    z-index: 3;

    background:
        linear-gradient(
            180deg,
            transparent 35%,
            rgba(0, 0, 0, .18) 65%,
            rgba(0, 0, 0, .72) 100%
        );

    pointer-events: none;

    transition:
        opacity .6s ease;
}


/* =========================================================
   SCAN
========================================================= */

.project-scan {
    position: absolute;

    left: -20%;
    top: -30%;

    z-index: 4;

    width: 25%;
    height: 160%;

    opacity: 0;

    transform:
        rotate(16deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .12),
            transparent
        );

    filter:
        blur(9px);

    pointer-events: none;
}


/* =========================================================
   CORNERS
========================================================= */

.project-media::before {
    content: "";

    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 8;

    width: 34px;
    height: 34px;

    border-top:
        1px solid
        rgba(199, 154, 61, .38);

    border-left:
        1px solid
        rgba(199, 154, 61, .38);

    opacity: .5;

    transition:
        width .5s var(--ease),
        height .5s var(--ease),
        opacity .5s ease;
}


.project-media::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 8;

    width: 34px;
    height: 34px;

    border-right:
        1px solid
        rgba(199, 154, 61, .38);

    border-bottom:
        1px solid
        rgba(199, 154, 61, .38);

    opacity: .5;

    transition:
        width .5s var(--ease),
        height .5s var(--ease),
        opacity .5s ease;
}


/* =========================================================
   PROJECT INFO
========================================================= */

.project-info {
    position: relative;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    padding:
        24px 8px 0;
}


.project-info > div {
    order: 0;
}


.project-info::before {
    content: "";

    width: 0;
    height: 1px;

    align-self: center;

    order: 1;

    margin-left: auto;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );

    transition:
        width .55s var(--ease);
}


/* =========================================================
   CATEGORY
========================================================= */

.project-category {
    display: block;

    margin-bottom: 8px;

    color:
        var(--gold);

    font-family:
        "Outfit",
        sans-serif;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 3px;
}


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

.project-info h3 {
    margin: 0;

    font-family:
        "Outfit",
        sans-serif;

    font-size:
        clamp(
            28px,
            3vw,
            54px
        );

    font-weight: 600;

    line-height: 1;

    letter-spacing: -2px;

    color:
        #dfdfdf;

    transition:
        color .4s ease,
        transform .5s var(--ease);
}


/* =========================================================
   INDEX
========================================================= */

.project-index {
    flex:
        0 0 auto;

    order: 2;

    color:
        #454545;

    font-family:
        "Outfit",
        sans-serif;

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

    transition:
        color .4s ease,
        transform .5s var(--ease);
}


/* =========================================================
   HOVER
========================================================= */

.project-link:hover
.project-media {
    transform:
        perspective(1400px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translateY(-8px);

    border-color:
        rgba(199, 154, 61, .22);

    box-shadow:
        0 50px 130px
        rgba(0, 0, 0, .58),

        0 0 60px
        rgba(199, 154, 61, .055);
}


.project-link:hover
.project-placeholder {
    transform:
        scale(1.035);

    filter:
        contrast(108%)
        brightness(108%);
}


.project-link:hover
.project-placeholder-one::before {
    transform:
        perspective(1300px)
        rotateX(0deg)
        rotateY(-2deg)
        rotateZ(0deg)
        scale(1.02);
}


.project-link:hover
.project-placeholder-two::before {
    transform:
        perspective(1100px)
        rotateY(1deg)
        rotateZ(0deg)
        scale(1.02);
}


.project-link:hover
.project-placeholder-two::after {
    transform:
        translate(-50%, -50%)
        scale(1.08);

    box-shadow:
        0 0 0 40px
        rgba(199, 154, 61, .035),

        0 0 110px
        rgba(199, 154, 61, .12);
}


.project-link:hover
.project-placeholder-three::before {
    transform:
        perspective(1100px)
        rotateX(0deg)
        rotateY(0deg)
        scale(1.02);
}


.project-link:hover
.project-placeholder-three::after {
    width: 330px;
}


.project-link:hover
.project-placeholder > span {
    color:
        var(--gold-light);

    border-color:
        rgba(199, 154, 61, .25);

    transform:
        translateY(-4px);
}


.project-link:hover
.project-shade {
    opacity: .68;
}


.project-link:hover
.project-scan {
    animation:
        projectScan
        1.15s var(--ease)
        forwards;
}


.project-link:hover
.project-info h3 {
    color:
        var(--gold-light);

    transform:
        translateX(6px);
}


.project-link:hover
.project-index {
    color:
        var(--gold);

    transform:
        translateY(-4px);
}


.project-link:hover
.project-info::before {
    width: 90px;
}


.project-link:hover
.project-media::before,
.project-link:hover
.project-media::after {
    width: 60px;
    height: 60px;

    opacity: 1;
}


/* =========================================================
   SCAN ANIMATION
========================================================= */

@keyframes projectScan {

    0% {
        left: -20%;
        opacity: 0;
    }

    20% {
        opacity: .65;
    }

    100% {
        left: 125%;
        opacity: 0;
    }

}


/* =========================================================
   ACTIVE PARALLAX STATE
========================================================= */

.project.is-parallax
.project-media {
    transition:
        transform .12s linear,
        border-color .5s ease,
        box-shadow .5s ease;
}


/* =========================================================
   LAPTOP
========================================================= */

@media
(max-width: 1350px) {

    .portfolio {
        padding:
            130px 0 150px;
    }

    .project-large
    .project-media {
        min-height: 620px;
    }

    .project-media {
        min-height: 470px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media
(max-width: 1000px) {

    .portfolio-stage {
        grid-template-columns:
            1fr;
    }

    .project-large {
        grid-column:
            auto;
    }

    .project-large
    .project-media,
    .project-media {
        min-height:
            min(
                600px,
                65vw
            );
    }

}


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

@media
(max-width: 700px) {

    .portfolio {
        padding:
            100px 0 120px;
    }

    .portfolio
    .section-header {
        margin-bottom: 48px;
    }

    .portfolio-stage {
        gap: 50px;
    }

    .project-large
    .project-media,
    .project-media {
        min-height: 430px;

        border-radius: 22px;
    }

    .project-placeholder {
        padding: 22px;
    }

    .project-info {
        padding:
            18px 2px 0;

        align-items:
            flex-start;
    }

    .project-category {
        font-size: 8px;

        letter-spacing: 2px;
    }

    .project-info h3 {
        font-size: 30px;

        letter-spacing: -1px;

        line-height: 1.05;
    }

    .project-index {
        padding-top: 5px;

        font-size: 9px;
    }

    .project-info::before {
        display: none;
    }

}


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

@media
(max-width: 480px) {

    .project-large
    .project-media,
    .project-media {
        min-height: 350px;
    }

}


/* =========================================================
   TOUCH
========================================================= */

@media
(hover: none)
and
(pointer: coarse) {

    .project-media {
        transform: none !important;
    }

    .project-link:hover
    .project-media {
        transform: none !important;
    }

    .project-link:hover
    .project-scan {
        animation: none;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media
(prefers-reduced-motion: reduce) {

    .project-media,
    .project-placeholder,
    .project-placeholder-one::before,
    .project-placeholder-two::before,
    .project-placeholder-two::after,
    .project-placeholder-three::before,
    .project-placeholder-three::after,
    .project-shade,
    .project-info h3,
    .project-index,
    .project-media::before,
    .project-media::after {
        transition: none !important;
    }

    .project-link:hover
    .project-scan {
        animation: none !important;
    }

}