/*
==========================================================
TALENTS PAGE
==========================================================
*/


/*
==========================================================
PAGE HEADING
==========================================================
*/

.talents-heading {

    padding:
        92px 20px 15px;

    text-align:
        center;

    margin-bottom:
        50px;

}


.talents-heading h1 {

    margin:
        12px 0 14px;

    font-size:
        clamp(38px, 6vw, 62px);

    line-height:
        1.05;

    letter-spacing:
        -1.8px;

}


.talents-heading p {

    margin:
        0 auto;

    color:
        var(--text-muted);

    font-size:
        18px;

    line-height:
        1.7;

}


@media (max-width: 700px) {

    .talents-heading {

        padding-top:
            40px;

    }


    .talents-heading h1 {

        font-size:
            38px;

    }


    .talents-heading p {

        font-size:
            16px;

    }

}

/*
==========================================================
COLLECTION
==========================================================
*/

.collection {

    padding:
        40px 20px 20px;

    text-align:
        center;

}


.collection h1 {

    margin-bottom:
        10px;

    font-size:
        48px;

}


.collection p {

    margin-bottom:
        35px;

    color:
        var(--text-secondary);

    font-size:
        18px;

}

/*
==========================================================
TALENTS DIVIDER
==========================================================
*/

.talents-divider {

    width:
        100%;

    margin:
        70px auto 40px;

    text-align:
        center;

}


.divider-line {

    width:
        450px;

    height:
        4px;

    margin:
        0 auto 25px;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #4da6ff,
            #9b7cff
        );

}


.talents-divider p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        14px;

    letter-spacing:
        .3px;

}


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

.card {

    animation:
        cardSlideIn .35s ease;

}


@keyframes cardSlideIn {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.card.card-no-entry-animation {

    animation:
        none;

}

/*
==========================================================
TALENTS GRID
==========================================================
*/

.cards {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        35px;

    padding:
        40px;

    min-height: 60vh;

}


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

.card {

    width:
        320px;

    padding:
        25px;

    position:
        relative;

    overflow:
        hidden;

    cursor:
        pointer;

    background:
        var(--surface-primary);

    border-radius:
        25px;

    box-shadow:
        0 15px 35px
        var(--shadow-menu);

    transition:
        .35s;

}


.card:hover {

    transform:
        translateY(-12px)
        scale(1.02)
        rotate(1deg);

}


/*
==========================================================
BRANCH COLORS
==========================================================
*/

.card::before {

    content:
        "";

    width:
        100%;

    height:
        8px;

    position:
        absolute;

    top:
        0;

    left:
        0;

}


.card.en::before {

    background:
        #4da6ff;

}


.card.jp::before {

    background:
        #ff6b81;

}


.card.id::before {

    background:
        #ffb84d;

}


.card.en {

    background:
        linear-gradient(
            160deg,
            #fff,
            #eef8ff
        );

}


.card.jp {

    background:
        linear-gradient(
            160deg,
            #fff,
            #fff0f3
        );

}


.card.id {

    background:
        linear-gradient(
            160deg,
            #fff,
            #fff7e8
        );

}

/* DEV-IS */

.card.devis::before {

    background:
        linear-gradient(
            90deg,
            var(--branch-devis),
            var(--branch-devis-secondary)
        );

}


.card.devis {

    background:
        linear-gradient(
            160deg,
            #ffffff,
            var(--branch-devis-soft)
        );

}


/* Holostars JP */

.card.stars-jp::before {

    background:
        linear-gradient(
            90deg,
            var(--branch-stars-jp),
            var(--branch-stars-jp)
        );

}


.card.stars-jp {

    background:
        linear-gradient(
            160deg,
            #ffffff,
            var(--branch-stars-jp-soft)
        );

}


/* Holostars EN */

.card.stars-en::before {

    background:
        linear-gradient(
            90deg,
            var(--branch-stars-en),
            var(--branch-stars-en)
        );

}


.card.stars-en {

    background:
        linear-gradient(
            160deg,
            #ffffff,
            var(--branch-stars-en-soft)
        );

}


/* Branch labels inside talent cards */

.card.devis .branch-label {

    color:var(--branch-devis);

    font-weight:700;

}


.card.stars-jp .branch-label {

    color:var(--branch-stars-jp);

    font-weight:700;

}


.card.stars-en .branch-label {

    color:var(--branch-stars-en);

    font-weight:700;

}


/*
==========================================================
SHINE EFFECT
==========================================================
*/

.card::after {

    content:
        "";

    width:
        60%;

    height:
        300%;

    position:
        absolute;

    top:
        -100%;

    left:
        -100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.6),
            transparent
        );

    transform:
        rotate(25deg);

    transition:
        .6s;

}


.card:hover::after {

    left:
        150%;

}


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

.card-header {

    display:
        flex;

    justify-content:
        space-between;

    color:
        var(--text-secondary);

    font-size:
        13px;

}


.portrait {

    width:
        180px;

    height:
        180px;

    margin:
        25px auto;

    overflow:
        hidden;

    background:
        var(--surface-secondary);

    border-radius:
        20px;

}


.portrait img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        .3s;

}


.card:hover .portrait img {

    transform:
        scale(1.05);

}


.card h2 {

    margin-bottom:
        5px;

    text-align:
        center;

}


.generation {

    color:
        var(--text-muted);

    text-align:
        center;

}


.divider {

    height:
        1px;

    margin:
        20px 0;

    background:
        var(--border-primary);

}

.card .generation {

    margin-bottom:0;

}


/*
==========================================================
DARK THEME
==========================================================
*/

html[data-theme="dark"] .card.en {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(77, 166, 255, .10)
        );
}

html[data-theme="dark"] .card.jp {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(255, 107, 129, .10)
        );
}

html[data-theme="dark"] .card.id {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(255, 184, 77, .10)
        );
}

html[data-theme="dark"] .card.devis {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(138, 147, 164, .11)
        );
}

html[data-theme="dark"] .card.stars-jp {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(157, 120, 232, .11)
        );
}

html[data-theme="dark"] .card.stars-en {
    background:
        linear-gradient(
            160deg,
            var(--surface-primary),
            rgba(85, 200, 120, .10)
        );
}

html[data-theme="dark"] .card::after {
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255, 255, 255, .10),
            transparent
        );
}

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

@media (max-width: 700px) {

    .cards {

        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            16px;

        padding:
            28px 16px;

        min-height: 50vh;

    }


    .card {

        width:
            auto;

        max-width:
            none;

        padding:
            16px 10px;

        border-radius:
            20px;

    }


    .card::before {

        height:
            6px;

    }


    .card-header {

        gap:
            6px;

        align-items:
            center;

        font-size:
            11px;

    }


    .portrait {

        width:
            110px;

        height:
            110px;

        margin:
            20px auto 16px;

        border-radius:
            16px;

    }


    .card h2 {

        min-height:
            44px;

        margin:
            0 0 5px;

        display:
            block;

        font-size:
            18px;

        line-height:
            1.2;

        text-align:
            center;

    }


    .generation {

        font-size:
            13px;

        line-height:
            1.3;

    }


    .divider {

        margin:
            14px 0;

    }

    .card .status-badge {

    padding:
        7px 10px;

    font-size:
        11px;

    line-height:
        1;

    white-space:
        nowrap;

    }

    .card .branch-label {

        font-size:
            11px;

        white-space:
            nowrap;

    }

}


/*
==========================================================
DARK THEME — CARD SHADOW POLISH
==========================================================
*/

html[data-theme="dark"] .card {
    box-shadow:
        0 8px 20px
        rgba(0,0,0,.07);
}