/* ==========================================================
   CARDS
========================================================== */

/* ==========================================================
   Base Card
========================================================== */

.card{

    position:relative;

    background:var(--gradient-card);

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

    border-radius:28px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    transition:

        transform .4s ease,

        box-shadow .4s ease,

        border-color .4s ease;

}

.card:hover{

    transform:translateY(-10px);

    border-color:rgba(37,99,235,.35);

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

}

/* ==========================================================
   Glass Card
========================================================== */

.card-glass{

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

    backdrop-filter:blur(24px);

}

/* ==========================================================
   Border Gradient
========================================================== */

.card-gradient{

    position:relative;

}

.card-gradient::before{

    content:"";

    position:absolute;

    inset:0;

    padding:1px;

    border-radius:inherit;

    background:var(--gradient-primary);

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

            mask-composite:exclude;

    opacity:.45;

}

/* ==========================================================
   Hover Glow
========================================================== */

.card-glow::after{

    content:"";

    position:absolute;

    inset:-30%;

    background:

        radial-gradient(

            circle,

            rgba(37,99,235,.15),

            transparent 70%

        );

    opacity:0;

    transition:.45s;

    pointer-events:none;

}

.card-glow:hover::after{

    opacity:1;

}

/* ==========================================================
   Light Sweep
========================================================== */

.card-shine{

    overflow:hidden;

}

.card-shine::before{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.08),

            transparent

        );

    transform:skewX(-22deg);

}

.card-shine:hover::before{

    left:160%;

    transition:1s;

}

/* ==========================================================
   Header
========================================================== */

.card-header{

    padding:2rem 2rem 1rem;

}

.card-title{

    margin-bottom:.6rem;

    font-size:1.5rem;

    font-weight:700;

    color:#ffffff;

}

.card-subtitle{

    color:var(--text-muted);

    line-height:1.8;

}

/* ==========================================================
   Body
========================================================== */

.card-body{

    padding:0 2rem 2rem;

}

.card-body p{

    color:var(--text-secondary);

    line-height:2;

}

/* ==========================================================
   Footer
========================================================== */

.card-footer{

    padding:1.5rem 2rem;

    border-top:1px solid rgba(255,255,255,.08);

}

/* ==========================================================
   Image
========================================================== */

.card-image{

    position:relative;

    overflow:hidden;

}

.card-image img,

.card-image video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.card:hover .card-image img,

.card:hover .card-image video{

    transform:scale(1.06);

}

/* ==========================================================
   Icon
========================================================== */

.card-icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:20px;

    margin-bottom:1.5rem;

    background:rgba(37,99,235,.12);

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

}

.card-icon img,

.card-icon svg{

    width:36px;

    height:36px;

}

/* ==========================================================
   Badge
========================================================== */

.card-badge{

    display:inline-flex;

    align-items:center;

    padding:.45rem .9rem;

    margin-bottom:1rem;

    border-radius:999px;

    background:rgba(6,182,212,.12);

    color:#67e8f9;

    font-size:.8rem;

    font-weight:700;

}

/* ==========================================================
   Feature List
========================================================== */

.card-list{

    display:flex;

    flex-direction:column;

    gap:.9rem;

    margin-top:1.5rem;

}

.card-list li{

    display:flex;

    align-items:center;

    gap:.8rem;

    color:var(--text-secondary);

}

.card-list li::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--color-primary);

    box-shadow:0 0 12px rgba(6,182,212,.8);

}

/* ==========================================================
   Horizontal Card
========================================================== */

.card-horizontal{

    display:flex;

    align-items:center;

    gap:2rem;

}

.card-horizontal .card-image{

    width:40%;

}

.card-horizontal .card-content{

    flex:1;

}

/* ==========================================================
   Accent Line
========================================================== */

.card-line{

    position:relative;

}

.card-line::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--gradient-primary);

    transition:.35s;

}

.card-line:hover::after{

    width:100%;

}

/* ==========================================================
   Mouse Light Effect
========================================================== */

.card-light{

    position:relative;

    overflow:hidden;

}

.card-light span.mouse-light{

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

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

            transparent 70%

        );

    pointer-events:none;

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

    opacity:0;

    transition:opacity .25s;

}

.card-light:hover span.mouse-light{

    opacity:1;

}

/* ==========================================================
   Reveal Animation
========================================================== */

.card-reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.card-reveal.active{

    opacity:1;

    transform:none;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:768px){

    .card{

        border-radius:22px;

    }

    .card-header{

        padding:1.5rem 1.5rem 1rem;

    }

    .card-body{

        padding:0 1.5rem 1.5rem;

    }

    .card-footer{

        padding:1.25rem 1.5rem;

    }

    .card-horizontal{

        flex-direction:column;

    }

    .card-horizontal .card-image{

        width:100%;

    }

}