/* =======================================================
   Cards
======================================================= */

.card{
    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:260px;

    position:relative;

    text-decoration: none;

    color: inherit;

    --card-accent: var(--accent);

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

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

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:2.5rem;

    overflow:hidden;

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

}

.card:hover{

    transform:translateY(-8px);

    border-color:var(--card-accent);

    box-shadow:

        0 15px 40px rgba(0,0,0,.45),

        0 0 40px color-mix(in srgb, var(--card-accent) 20%, transparent);

}

.card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(circle at top right,

        color-mix(in srgb, var(--card-accent) 15%, transparent),

        transparent 45%);

    opacity:0;

    transition:.4s;

}

.card:hover::before{

    opacity:1;

}

.card h3{

    margin-bottom:1rem;

    font-family:"Space Grotesk",sans-serif;

    font-size:1.75rem;

    font-weight:700;

    color:var(--text-primary);

    letter-spacing:-1px;

}

.card p{

    max-width:32ch;

    line-height:1.8;

    margin-bottom:auto;

}

.card-footer{

    margin-top:2rem;

    color:var(--accent-light);

    font-size:.9rem;

    font-weight:500;

    transition:transform .3s ease;

}

.card:hover .card-footer{

    transform:translateX(6px);

}

.card:hover h3{

    color:var(--card-accent);

}


/* =======================================================
   Card Accent Overrides
======================================================= */

.card-lydia{
    --card-accent:#34EBE5;
}

.card-ghostface{
    --card-accent:#7B2CBF;
}

.card-tifa{
    --card-accent:#A61B1B;
}

.card-photography{
    --card-accent:#B8BEC8;
}

.card-lydia .card-footer,
.card-ghostface .card-footer,
.card-tifa .card-footer,
.card-photography .card-footer{

    color:var(--card-accent);

}