/*=========================================================
    CCT PAGLINGAP FOUNDATION
    IMPACT REPORT
    Version 2
    Photoshop Interactive Edition
==========================================================*/


/*=========================================================
    ROOT VARIABLES
==========================================================*/

:root{

    --impact-green:#8CB63E;
    --impact-blue:#1595D3;

    --impact-white:#ffffff;

    --impact-text:#444;

    --impact-shadow:
        0 10px 30px rgba(0,0,0,.10);

    --impact-hover:
        0 18px 45px rgba(0,0,0,.18);

    --impact-radius:18px;

    --impact-transition:.35s ease;

}


/*=========================================================
    SECTION
==========================================================*/

.impact-section{

    position:relative;

    overflow:hidden;

    padding:90px 0;

    background-image:url("../../images/paglingap_impact.jpg");

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

}


/*=========================================================
    WHITE OVERLAY
==========================================================*/

.impact-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.10),

            rgba(255,255,255,.25),

            rgba(255,255,255,.65),

            rgba(255,255,255,.90)

        );

}


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

.impact-section .container{

    position:relative;

    z-index:5;

    max-width:1500px;

}


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

.impact-header{

    margin-bottom:28px;

}


.impact-title{

    color:#ffffff;

    font-size:42px;

    font-weight:700;

    margin-bottom:10px;

    text-shadow:0 3px 10px rgba(0,0,0,.25);

}


.impact-description{

    max-width:950px;

    color:#ffffff;

    font-size:16px;

    line-height:1.8;

    text-shadow:0 2px 8px rgba(0,0,0,.25);

}


/*=========================================================
    RIBBON
==========================================================*/

.impact-ribbon{

    display:grid;

    grid-template-columns:

        repeat(6, 1fr)

        320px;

    gap:18px;

    align-items:stretch;

}


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

.impact-card{

    position:relative;

    background:

        rgba(255,255,255,.93);

    backdrop-filter:blur(8px);

    border-radius:18px;

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

    box-shadow:var(--impact-shadow);

    padding:18px;

    min-height:170px;

    cursor:pointer;

    transition:var(--impact-transition);

}


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

.impact-card.active-card{

    border:2px solid var(--impact-blue);

    transform:translateY(-4px);

}


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

.impact-card:hover{

    background:#ffffff;

    transform:translateY(-8px);

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

    border:2px solid #1595D3;

}

/*=========================================================
    TOP BAR
==========================================================*/

.impact-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--impact-green),

            var(--impact-blue)

        );

}


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

.impact-number{

    color:var(--impact-green);

    font-size:35px;

    font-weight:800;

    margin-bottom:8px;

}


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

.impact-label{

    font-size:16px;

    font-weight:700;

    color:#222;

}


.impact-small{

    font-size:13px;

    color:#666;

    margin-top:2px;

}


.impact-growth{

    margin-top:12px;

    font-size:25px;

    font-weight:800;

    color:var(--impact-green);

}


/*=========================================================
    SUMMARY PANEL
==========================================================*/

.impact-summary{

    background:

        rgba(255,255,255,.95);

    backdrop-filter:blur(10px);

    border-radius:20px;

    padding:22px;

    box-shadow:var(--impact-shadow);

}


.impact-summary h4{

    color:var(--impact-blue);

    font-size:24px;

    margin-bottom:10px;

}


.summary-years{

    margin-top:25px;

}


.summary-row{

    display:flex;

    justify-content:space-between;

    padding:10px 0;

    border-bottom:1px solid #eee;

}


.summary-row:last-child{

    border-bottom:none;

}


.summary-row span{

    font-size:18px;

    color:#666;

}


.summary-row strong{

    font-size:28px;

    color:var(--impact-green);

}


/*=========================================================
    DETAILS PANEL
==========================================================*/

.impact-details-wrapper{

    margin-top:35px;

}


.impact-detail{

    display:none;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(8px);

    border-radius:20px;

    padding:30px;

    box-shadow:var(--impact-shadow);

}


.impact-detail.active{

    display:block;

    animation:fadeUp .4s ease;

}


.compare-growth{

    float:right;

    color:var(--impact-green);

}


/*=========================================================
    YEAR BAR
==========================================================*/

.year-bar{

    display:grid;

    grid-template-columns:80px 1fr 90px;

    gap:15px;

    align-items:center;

    margin-top:18px;

}


.bar{

    height:10px;

    border-radius:20px;

    overflow:hidden;

    background:#ececec;

}


.bar div{

    height:100%;

    border-radius:20px;

    width:0;

    transition:width 1.2s ease;

}

.bar.old div{

    background:#cfd8dc;

}


.bar.current div{

    background:

        linear-gradient(

            90deg,

            var(--impact-green),

            var(--impact-blue)

        );

}


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

@keyframes fadeUp{

    from{

        opacity:0;

        transform:

            translateY(20px)

            scale(.98);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

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

@media(max-width:1200px){

    .impact-ribbon{

        grid-template-columns:

            repeat(3,1fr);

    }

    .impact-summary{

        grid-column:1/-1;

    }

}


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

@media(max-width:768px){

    .impact-title{

        font-size:30px;

    }

    .impact-description{

        font-size:15px;

    }

    .impact-ribbon{

        grid-template-columns:

            repeat(2,1fr);

    }

    .year-bar{

        grid-template-columns:60px 1fr 70px;

    }

}


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

@media(max-width:576px){

    .impact-ribbon{

        grid-template-columns:1fr;

    }

}

/*=========================================================
    PREMIUM CARD HOVER
==========================================================*/

.impact-card{

    overflow:hidden;

}

.impact-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.55),

            transparent

        );

    transform:skewX(-25deg);

    transition:1s;

}

.impact-card:hover::after{

    left:170%;

}

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

.impact-card.active-card{

    border:2px solid var(--impact-blue);

    box-shadow:

        0 12px 35px rgba(21,149,211,.30);

}

.impact-card.active-card::before{

    height:7px;

}

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

.impact-number{

    transition:.35s;

}

.impact-card:hover .impact-number{

    transform:scale(1.08);

}
.impact-card:hover{

    transform:

        translateY(-10px)

        scale(1.02);

}

.impact-summary{

    transition:.35s;

}

.impact-card:hover~.impact-summary{

    transform:translateY(-3px);

}

.impact-card:focus{

    outline:none;

    border:2px solid var(--impact-blue);

}

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

    *{

        animation:none !important;

        transition:none !important;

    }

}

.impact-card{

    cursor:pointer;

}