/*==================================================
  PORTFOLIO PROCESS
==================================================*/

.portfolio-process{

    position:relative;

    padding:140px 0 150px;

    overflow:hidden;

}


/*==================================================
  CONTAINER
==================================================*/

.portfolio-process-container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding:0 30px;

    position:relative;

    z-index:2;

}


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

.portfolio-process-header{

    max-width:760px;

    margin:0 auto 90px;

    text-align:center;

}


.portfolio-process-title{

    margin:24px 0 22px;

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

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

    line-height:1.05;

    letter-spacing:-2px;

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

}


.portfolio-process-intro{

    max-width:650px;

    margin:auto;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.8;

}


/*==================================================
  PROCESS SYSTEM
==================================================*/

.portfolio-process-system{

    position:relative;

    display:grid;

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

    gap:24px;

}


/*==================================================
  CONNECTING LINE
==================================================*/

.portfolio-process-line{

    position:absolute;

    top:76px;

    left:10%;

    right:10%;

    height:1px;

    background:var(--border-primary);

    opacity:.45;

    z-index:0;

}


.portfolio-process-line-progress{

    position:absolute;

    left:0;

    top:0;

    width:0%;

    height:2px;

    background:var(--primary);

    box-shadow:
        0 0 8px var(--primary),
        0 0 18px var(--primary);

}


/*==================================================
  PROCESS CARD
==================================================*/

.portfolio-process-card{

    position:relative;

    z-index:2;

    min-height:370px;

    padding:30px 26px;

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

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    overflow:hidden;

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

}


/*==================================================
  CARD TOP GLOW
==================================================*/

.portfolio-process-card::before{

    content:"";

    position:absolute;

    top:-80px;

    left:50%;

    width:160px;

    height:160px;

    transform:translateX(-50%);

    border-radius:50%;

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

    opacity:.08;

    pointer-events:none;

    transition:
        opacity .5s ease,
        transform .5s ease;

}


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

.portfolio-process-number{

    position:absolute;

    top:18px;

    right:20px;

    color:var(--border-primary);

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

    font-size:2rem;

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

    line-height:1;

}


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

.portfolio-process-icon{

    width:58px;

    height:58px;

    margin-bottom:28px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    background:var(--glass);

    color:var(--primary-light);

    font-size:1.2rem;

    box-shadow:
        0 0 20px rgba(0,217,255,.05);

}


.portfolio-process-icon i{

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

}


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

.portfolio-process-label{

    display:block;

    margin-bottom:12px;

    color:var(--primary-light);

    font-size:.62rem;

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

    letter-spacing:2px;

}


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

.portfolio-process-card h3{

    margin:0 0 15px;

    color:var(--text-light);

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

    font-size:1.35rem;

    line-height:1.2;

}


/*==================================================
  DESCRIPTION
==================================================*/

.portfolio-process-card p{

    margin:0;

    color:var(--text-muted);

    font-size:.88rem;

    line-height:1.75;

}


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

.portfolio-process-status{

    position:absolute;

    left:26px;

    bottom:24px;

    display:flex;

    align-items:center;

    gap:8px;

    color:var(--text-muted);

    font-size:.52rem;

    letter-spacing:1.5px;

}


.portfolio-process-status span{

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--primary);

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

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

}


@keyframes processStatusPulse{

    0%,
    100%{

        opacity:.35;

        transform:scale(.8);

    }

    50%{

        opacity:1;

        transform:scale(1);

    }

}


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

.portfolio-process-card:hover{

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

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 60px rgba(0,0,0,.25),
        0 0 30px rgba(0,217,255,.05);

}


.portfolio-process-card:hover::before{

    opacity:.18;

    transform:
        translateX(-50%)
        scale(1.3);

}


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

.portfolio-process-footer{

    margin-top:55px;

    padding-top:22px;

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

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:var(--text-muted);

    font-size:.58rem;

    letter-spacing:1.5px;

}


.portfolio-process-footer span{

    display:flex;

    align-items:center;

    gap:8px;

}


.portfolio-process-footer span i{

    color:var(--primary);

    font-size:.45rem;

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

}


.portfolio-process-footer strong{

    color:var(--primary-light);

    font-size:.58rem;

    letter-spacing:1.5px;

}