/*==================================================
  PORTFOLIO CLIENTS
==================================================*/

.portfolio-clients{

    position:relative;

    padding:150px 0;

    overflow:hidden;

}


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

.portfolio-clients-container{

    width:100%;

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

    margin:auto;

    padding:0 30px;

}


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

.portfolio-clients-header{

    max-width:760px;

    margin:0 auto 80px;

    text-align:center;

}


.portfolio-clients-title{

    margin:24px 0;

    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-clients-intro{

    max-width:650px;

    margin:auto;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.8;

}


/*==================================================
  MARQUEE
==================================================*/

.clients-marquee{

    position:relative;

    width:100%;

    overflow:hidden;

    padding:35px 0 50px;

    mask-image:
        linear-gradient(
            to right,
            transparent,
            black 8%,
            black 92%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent,
            black 8%,
            black 92%,
            transparent
        );

}


.clients-marquee-track{

    display:flex;

    width:max-content;

    gap:28px;

    will-change:transform;

}


/*==================================================
  CLIENT CARD
==================================================*/

.client-card{

    position:relative;

    width:280px;

    flex-shrink:0;

}


/*==================================================
  CLIENT FRAME
==================================================*/

.client-frame{

    position:relative;

    height:330px;

    padding:10px;

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

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

    overflow:hidden;

    isolation:isolate;

}


/*==================================================
  FRAME GLOW
==================================================*/

.client-frame::before{

    content:"";

    position:absolute;

    inset:-1px;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            var(--primary) 50%,
            transparent 80%
        );

    opacity:.12;

    transform:
        translateX(-100%);

    animation:
        clientFrameSweep
        5s
        linear
        infinite;

    pointer-events:none;

}


@keyframes clientFrameSweep{

    to{

        transform:
            translateX(100%);

    }

}


/*==================================================
  IMAGE
==================================================*/

.client-image-wrap{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

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

    background:var(--body);

}


.client-image{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1),
        filter .8s ease;

    filter:
        saturate(.85)
        brightness(.8);

}


.client-card:hover .client-image{

    transform:scale(1.08);

    filter:
        saturate(1.1)
        brightness(1);

}


/*==================================================
  SCI-FI GRID
==================================================*/

.client-image-wrap::after{

    content:"";

    position:absolute;

    inset:0;

    background-image:

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

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

    background-size:
        35px 35px;

    opacity:.08;

    pointer-events:none;

}


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

.client-scan-line{

    position:absolute;

    left:10px;

    right:10px;

    top:10px;

    height:2px;

    z-index:5;

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

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

    opacity:.7;

    animation:
        clientScan
        3.5s
        linear
        infinite;

}


@keyframes clientScan{

    0%{

        top:10px;

        opacity:0;

    }

    10%{

        opacity:.8;

    }

    90%{

        opacity:.8;

    }

    100%{

        top:calc(100% - 12px);

        opacity:0;

    }

}


/*==================================================
  CORNER HUD ELEMENTS
==================================================*/

.client-frame-corner{

    position:absolute;

    width:22px;

    height:22px;

    z-index:10;

    pointer-events:none;

}


.corner-tl{

    top:3px;

    left:3px;

    border-top:2px solid var(--primary);

    border-left:2px solid var(--primary);

}


.corner-tr{

    top:3px;

    right:3px;

    border-top:2px solid var(--primary);

    border-right:2px solid var(--primary);

}


.corner-bl{

    bottom:3px;

    left:3px;

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

    border-left:2px solid var(--primary);

}


.corner-br{

    bottom:3px;

    right:3px;

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

    border-right:2px solid var(--primary);

}


/*==================================================
  ROTATING TECH RING
==================================================*/

.client-tech-ring{

    position:absolute;

    width:90px;

    height:90px;

    right:-35px;

    bottom:-35px;

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

    border-radius:50%;

    z-index:5;

    opacity:.6;

    animation:
        clientRingRotate
        12s
        linear
        infinite;

}


.client-tech-ring::before,
.client-tech-ring::after{

    content:"";

    position:absolute;

    inset:12px;

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

    border-radius:50%;

}


.client-tech-ring::after{

    inset:27px;

    border-style:solid;

    opacity:.6;

}


@keyframes clientRingRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}


/*==================================================
  CLIENT INFO
==================================================*/

.client-info{

    padding:20px 4px 0;

}


.client-index{

    display:block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.55rem;

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

    letter-spacing:2px;

}


.client-info h3{

    margin:0 0 8px;

    color:var(--text-light);

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

    font-size:1.05rem;

    line-height:1.35;

}


.client-category{

    color:var(--text-muted);

    font-size:.55rem;

    letter-spacing:1.8px;

}


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

.client-card{

    transition:
        transform .6s cubic-bezier(.16,1,.3,1);

}


.client-card:hover{

    transform:
        translateY(-12px);

}


.client-card:hover .client-frame{

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

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

}


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

.clients-system-status{

    margin-top:45px;

    padding-top:22px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    color:var(--text-muted);

    font-size:.55rem;

    letter-spacing:1.5px;

}


.clients-system-status span{

    display:flex;

    align-items:center;

    gap:8px;

}


.clients-system-status i{

    color:var(--primary);

    font-size:.4rem;

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

}


.clients-system-status strong{

    color:var(--primary-light);

    font-size:.58rem;

}


/*==================================================
  RESPONSIVE
==================================================*/

@media(max-width:768px){

    .portfolio-clients{

        padding:110px 0;

    }

    .portfolio-clients-container{

        padding:0 20px;

    }

    .client-card{

        width:250px;

    }

    .client-frame{

        height:300px;

    }

    .clients-system-status{

        flex-direction:column;

        align-items:flex-start;

        line-height:1.7;

    }

}


@media(max-width:480px){

    .portfolio-clients{

        padding:90px 0;

    }

    .portfolio-clients-header{

        margin-bottom:55px;

    }

    .client-card{

        width:235px;

    }

    .client-frame{

        height:285px;

    }

}


.clients-marquee::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            280px circle at
            var(--client-mouse-x, 50%)
            var(--client-mouse-y, 50%),
            rgba(0,217,255,.09),
            transparent 70%
        );

    z-index:20;

}