/*==================================================
  PREMIUM PORTFOLIO PROJECTS
==================================================*/

.portfolio-projects{

    position:relative;

    overflow:hidden;

    padding:140px 0 130px;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(0,217,255,.045),
            transparent 35%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(0,217,255,.035),
            transparent 35%
        );

}


.portfolio-projects-container{

    position:relative;

    width:min(
        var(--container-width),
        calc(100% - 60px)
    );

    margin:auto;

    z-index:2;

}


/*==================================================
  AMBIENT LIGHT
==================================================*/

.projects-ambient{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    pointer-events:none;

    filter:blur(100px);

    opacity:.12;

}


.projects-ambient-one{

    top:10%;

    left:-250px;

    background:var(--primary);

}


.projects-ambient-two{

    bottom:0;

    right:-250px;

    background:var(--primary-light);

}


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

.portfolio-projects-header{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    align-items:end;

    gap:60px;

    margin-bottom:80px;

}


.portfolio-projects-title{

    margin:25px 0 0;

    font-family:var(--heading-font);

    font-size:clamp(
        2.8rem,
        5vw,
        5rem
    );

    line-height:1.04;

    letter-spacing:-2px;

    font-weight:var(--fw-black);

}


.portfolio-projects-title span{

    display:block;

    margin-top:8px;

}


.projects-header-right{

    max-width:480px;

    justify-self:end;

}


.projects-header-right p{

    margin:0;

    color:var(--text-muted);

    font-size:.95rem;

    line-height:1.8;

}


.projects-live-status{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:25px;

    font-size:.65rem;

    letter-spacing:1.5px;

}


.projects-live-status span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:
        0 0 12px
        var(--primary);

    animation:
        projectStatusPulse
        1.8s
        ease-in-out
        infinite;

}


.projects-live-status strong{

    color:var(--primary-light);

}


.projects-live-status small{

    color:var(--text-muted);

}


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

.portfolio-project-showcase{

    display:grid;

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

    gap:22px;

}


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

.portfolio-project-card{

    position:relative;

    min-height:680px;

    overflow:hidden;

    border:1px solid
        var(--border-primary);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

    isolation:isolate;

    transition:
        border-color .5s ease,
        box-shadow .5s ease;

    opacity:0;

    transform:
        translateY(80px)
        scale(.96);

}


.portfolio-project-card.is-visible{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}


.portfolio-project-card:hover{

    border-color:
        var(--primary);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.35),
        0 0 35px
        rgba(0,217,255,.08);

}


/*==================================================
  CARD LIGHT
==================================================*/

.project-card-glow{

    position:absolute;

    width:300px;

    height:300px;

    left:var(--glow-x,50%);

    top:var(--glow-y,50%);

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 65%
        );

    opacity:0;

    filter:blur(50px);

    pointer-events:none;

    transition:opacity .5s ease;

    z-index:-1;

}


.portfolio-project-card:hover
.project-card-glow{

    opacity:.13;

}


/*==================================================
  NUMBER
==================================================*/

.project-card-number{

    position:absolute;

    top:20px;

    right:22px;

    font-family:var(--heading-font);

    font-size:4rem;

    line-height:1;

    font-weight:var(--fw-black);

    color:transparent;

    -webkit-text-stroke:
        1px var(--border-primary);

    opacity:.55;

    z-index:5;

}


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

.project-visual{

    position:relative;

    height:300px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    border-bottom:
        1px solid var(--border-primary);

    background:
        radial-gradient(
            circle at center,
            rgba(0,217,255,.08),
            transparent 65%
        );

}


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

.project-visual-grid{

    position:absolute;

    inset:0;

    opacity:.22;

    background-image:

        linear-gradient(
            var(--border-primary) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--border-primary) 1px,
            transparent 1px
        );

    background-size:35px 35px;

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

}


/*==================================================
  ORBITS
==================================================*/

.project-orbit{

    position:absolute;

    border:1px solid
        var(--border-primary);

    border-radius:50%;

    pointer-events:none;

}


.orbit-a{

    width:340px;

    height:150px;

    transform:
        rotate(-18deg);

    animation:
        projectOrbitA
        12s
        linear
        infinite;

}


.orbit-b{

    width:260px;

    height:110px;

    transform:
        rotate(35deg);

    animation:
        projectOrbitB
        9s
        linear
        infinite
        reverse;

}


@keyframes projectOrbitA{

    from{
        transform:
            rotate(-18deg);
    }

    to{
        transform:
            rotate(342deg);
    }

}


@keyframes projectOrbitB{

    from{
        transform:
            rotate(35deg);
    }

    to{
        transform:
            rotate(-325deg);
    }

}


/*==================================================
  FAKE WEBSITE SCREEN
==================================================*/

.project-screen{

    position:relative;

    width:72%;

    height:165px;

    border:1px solid
        var(--border-primary);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.35),
        0 0 30px
        rgba(0,217,255,.08);

    transform:
        perspective(800px)
        rotateX(8deg)
        rotateY(-8deg);

    z-index:3;

}


.screen-topbar{

    height:25px;

    display:flex;

    align-items:center;

    gap:5px;

    padding:0 10px;

    border-bottom:
        1px solid var(--border);

}


.screen-topbar span{

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--primary);

    opacity:.7;

}


.screen-content{

    padding:20px;

}


.screen-line{

    width:70%;

    height:4px;

    margin-bottom:9px;

    border-radius:4px;

    background:
        var(--border-primary);

}


.screen-line.line-large{

    width:85%;

    height:7px;

    background:
        var(--primary);

    opacity:.65;

}


.screen-line.short{

    width:45%;

}


.screen-panels{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:8px;

    margin-top:20px;

}


.screen-panels div{

    height:45px;

    border:1px solid
        var(--border-primary);

    background:
        var(--glass-strong);

}


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

.project-scan{

    position:absolute;

    left:10%;

    right:10%;

    top:-30%;

    height:1px;

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

    filter:
        drop-shadow(
            0 0 8px var(--primary)
        );

    opacity:.6;

    animation:
        projectScan
        4s
        ease-in-out
        infinite;

}


@keyframes projectScan{

    0%{
        top:-10%;
        opacity:0;
    }

    25%{
        opacity:.8;
    }

    75%{
        opacity:.8;
    }

    100%{
        top:110%;
        opacity:0;
    }

}


/*==================================================
  CONTENT
==================================================*/

.project-card-content{

    padding:30px;

}


.project-meta{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    color:var(--text-muted);

    font-size:.58rem;

    letter-spacing:1.4px;

}


.project-meta i{

    color:var(--primary);

}


.project-card-content h3{

    margin:20px 0 14px;

    font-family:var(--heading-font);

    font-size:1.45rem;

    line-height:1.2;

    color:var(--text-light);

}


.project-card-content p{

    margin:0;

    color:var(--text-muted);

    font-size:.84rem;

    line-height:1.75;

}


/*==================================================
  TAGS
==================================================*/

.project-tags{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:22px;

}


.project-tags span{

    padding:6px 9px;

    border:1px solid
        var(--border-primary);

    color:var(--primary-light);

    font-size:.52rem;

    letter-spacing:1px;

}


/*==================================================
  VIEW BUTTON
==================================================*/

.project-view-btn{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:30px;

    padding:13px 15px;

    border:1px solid
        var(--border-primary);

    color:var(--text-light);

    text-decoration:none;

    font-size:.68rem;

    letter-spacing:1px;

    overflow:hidden;

}


.project-view-btn::before{

    content:"";

    position:absolute;

    inset:0;

    transform:
        translateX(-100%);

    background:
        var(--primary);

    opacity:.12;

    transition:
        transform .45s ease;

}


.project-view-btn:hover::before{

    transform:
        translateX(0);

}


.project-view-btn i{

    color:var(--primary);

    transition:
        transform .4s ease;

}


.project-view-btn:hover i{

    transform:
        translateX(5px);

}


/*==================================================
  BOTTOM
==================================================*/

.projects-bottom{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:70px;

}


.projects-bottom span{

    color:var(--text-muted);

    font-size:.58rem;

    letter-spacing:2px;

    white-space:nowrap;

}


.projects-line{

    height:1px;

    flex:1;

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

}


.projects-line:last-child{

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

}


/*==================================================
  STATUS ANIMATION
==================================================*/

@keyframes projectStatusPulse{

    0%,100%{

        transform:scale(.7);

        opacity:.4;

    }

    50%{

        transform:scale(1.15);

        opacity:1;

    }

}




/*==================================================
  PROJECT TECHNOLOGY STACK
  NEW ADDITION ONLY
==================================================*/

.project-technology{

    margin-top:24px;

    padding-top:16px;

    border-top:1px solid var(--border);

}


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

.project-technology-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-bottom:11px;

}


.project-technology-heading > span{

    color:var(--text-muted);

    font-size:.55rem;

    font-weight:var(--fw-bold);

    letter-spacing:1.8px;

}


/*==================================================
  LIVE BUILD STATUS
==================================================*/

.project-technology-heading small{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--text-muted);

    font-size:.48rem;

    font-weight:var(--fw-semibold);

    letter-spacing:1px;

}


.project-technology-heading small i{

    color:var(--primary);

    font-size:.35rem;

    filter:
        drop-shadow(
            0 0 5px
            var(--primary)
        );

    animation:
        projectTechnologyStatus
        2s
        ease-in-out
        infinite;

}


@keyframes projectTechnologyStatus{

    0%,
    100%{

        opacity:.35;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1.15);

    }

}


/*==================================================
  TECHNOLOGY STACK
==================================================*/

.project-technology-stack{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

}


/*==================================================
  TECHNOLOGY CHIP
==================================================*/

.project-technology-stack span{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 10px;

    border:1px solid var(--border);

    background:var(--glass);

    color:var(--text-muted);

    font-size:.55rem;

    font-weight:var(--fw-semibold);

    letter-spacing:.8px;

    transition:
        color .3s ease,
        border-color .3s ease,
        background .3s ease,
        transform .3s ease;

}


/*==================================================
  TECHNOLOGY ICON
==================================================*/

.project-technology-stack span i{

    color:var(--primary-light);

    font-size:.75rem;

    filter:
        drop-shadow(
            0 0 5px
            var(--primary)
        );

}


/*==================================================
  TECHNOLOGY CHIP HOVER
==================================================*/

.project-technology-stack span:hover{

    color:var(--text-light);

    border-color:var(--border-primary);

    background:var(--glass-strong);

    transform:translateY(-2px);

}


.project-technology-stack span:hover i{

    color:var(--primary);

}