/*==================================================
  PORTFOLIO CAPABILITIES
==================================================*/

.portfolio-capabilities{

    position:relative;

    padding:150px 0;

    overflow:hidden;

}


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

.portfolio-capabilities-container{

    width:100%;

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

    margin:0 auto;

    padding:0 30px;

    position:relative;

    z-index:2;

}


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

.portfolio-capabilities-header{

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.65fr);

    align-items:end;

    gap:70px;

    margin-bottom:80px;

}


.portfolio-capabilities-title{

    margin:24px 0 0;

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

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

    line-height:1.02;

    letter-spacing:-2px;

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

}


.portfolio-capabilities-title span{

    display:block;

    margin-top:8px;

}


.portfolio-capabilities-intro{

    max-width:500px;

    margin:0;

    color:var(--text-muted);

    font-size:.95rem;

    line-height:1.85;

}


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

.portfolio-capabilities-grid{

    display:grid;

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

    gap:20px;

}


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

.portfolio-capability-card{

    position:relative;

    min-height:390px;

    padding:34px 30px;

    overflow:hidden;

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

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

    backdrop-filter:blur(18px);

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

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

}


/*==================================================
  CARD GRID EFFECT
==================================================*/

.portfolio-capability-card::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:
        linear-gradient(
            var(--border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--border) 1px,
            transparent 1px
        );

    background-size:32px 32px;

    opacity:.08;

    mask-image:
        linear-gradient(
            to bottom right,
            black,
            transparent 65%
        );

    pointer-events:none;

}


/*==================================================
  TOP ENERGY
==================================================*/

.portfolio-capability-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    top:-100px;

    right:-70px;

    border-radius:50%;

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

    opacity:.08;

    filter:blur(12px);

    pointer-events:none;

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

}


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

.portfolio-capability-index{

    position:absolute;

    top:20px;

    right:22px;

    color:var(--border-primary);

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

    font-size:1.8rem;

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

    line-height:1;

}


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

.portfolio-capability-icon{

    position:relative;

    width:60px;

    height:60px;

    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 25px rgba(0,217,255,.05);

}


.portfolio-capability-icon::before{

    content:"";

    position:absolute;

    inset:-5px;

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

    opacity:.18;

    animation:
        capabilityIconPulse
        3s
        ease-in-out
        infinite;

}


.portfolio-capability-icon i{

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

}


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

.portfolio-capability-label{

    display:block;

    margin-bottom:12px;

    color:var(--primary-light);

    font-size:.58rem;

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

    letter-spacing:2px;

}


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

.portfolio-capability-card h3{

    position:relative;

    margin:0 0 15px;

    color:var(--text-light);

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

    font-size:1.35rem;

    line-height:1.2;

}


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

.portfolio-capability-card p{

    position:relative;

    margin:0;

    color:var(--text-muted);

    font-size:.84rem;

    line-height:1.75;

}


/*==================================================
  CAPABILITY METER
==================================================*/

.portfolio-capability-meter{

    position:absolute;

    left:30px;

    right:30px;

    bottom:28px;

}


.portfolio-capability-meter > span{

    color:var(--text-muted);

    font-size:.48rem;

    letter-spacing:1.5px;

}


.portfolio-capability-meter strong{

    float:right;

    color:var(--primary-light);

    font-size:.48rem;

    letter-spacing:1px;

}


/*==================================================
  METER BAR
==================================================*/

.portfolio-capability-meter > div{

    position:relative;

    clear:both;

    width:100%;

    height:2px;

    margin-top:10px;

    overflow:hidden;

    background:var(--border);

}


.portfolio-capability-meter i{

    display:block;

    width:88%;

    height:100%;

    background:var(--primary);

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

    animation:
        capabilityMeterFlow
        3s
        ease-in-out
        infinite;

}


/*==================================================
  METER VARIATIONS
==================================================*/

.portfolio-capability-card:nth-child(2)
.portfolio-capability-meter i{

    width:94%;

}


.portfolio-capability-card:nth-child(3)
.portfolio-capability-meter i{

    width:86%;

}


.portfolio-capability-card:nth-child(4)
.portfolio-capability-meter i{

    width:92%;

}


.portfolio-capability-card:nth-child(5)
.portfolio-capability-meter i{

    width:96%;

}


.portfolio-capability-card:nth-child(6)
.portfolio-capability-meter i{

    width:90%;

}


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

.portfolio-capability-card:hover{

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

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

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

}


.portfolio-capability-card:hover::after{

    opacity:.18;

    transform:scale(1.35);

}


.portfolio-capability-card:hover
.portfolio-capability-icon{

    border-color:var(--primary);

}


/*==================================================
  KEYFRAME ANIMATIONS
==================================================*/

@keyframes capabilityIconPulse{

    0%,
    100%{

        transform:scale(.94);

        opacity:.15;

    }

    50%{

        transform:scale(1.08);

        opacity:.45;

    }

}


@keyframes capabilityMeterFlow{

    0%{

        transform:
            translateX(-8%);

        opacity:.55;

    }

    50%{

        opacity:1;

    }

    100%{

        transform:
            translateX(8%);

        opacity:.55;

    }

}


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

.portfolio-capabilities-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:.55rem;

    letter-spacing:1.5px;

}


.portfolio-capabilities-footer span{

    display:flex;

    align-items:center;

    gap:8px;

}


.portfolio-capabilities-footer span i{

    color:var(--primary);

    font-size:.4rem;

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

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

}


.portfolio-capabilities-footer strong{

    color:var(--primary-light);

    font-size:.55rem;

    letter-spacing:1.4px;

}