/* =========================================================
   VARIABLES PREMIUM
========================================================= */

.cdv-profile-overview {

    --cdv-blue:
        88, 212, 255;

    --cdv-violet:
        150, 118, 255;

    --cdv-gold:
        242, 206, 130;

    --cdv-rose:
        211, 139, 183;

    isolation: isolate;
}


/* =========================================================
   APPARITION PROGRESSIVE
========================================================= */

.cdv-profile-overview
>
.replay-metric-card {

    opacity: 0;

    transform:
        translateY(10px) !important;

    animation:
        cdvProfileCardReveal
        .68s
        cubic-bezier(
            .2,
            .72,
            .2,
            1
        )
        forwards;

    animation-delay:
        calc(
            var(--cdv-order, 0)
            * 75ms
        );
}


.cdv-profile-overview
>
.replay-metric-card:nth-child(1) {

    --cdv-order: 0;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(2) {

    --cdv-order: 1;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(3) {

    --cdv-order: 2;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(4) {

    --cdv-order: 3;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(5) {

    --cdv-order: 4;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(6) {

    --cdv-order: 5;
}

.cdv-profile-overview
>
.replay-metric-card:nth-child(7) {

    --cdv-order: 6;
}


@keyframes cdvProfileCardReveal {

    from {

        opacity: 0;

        transform:
            translateY(10px) !important;
    }

    to {

        opacity: 1;

        transform:
            translateY(0) !important;
    }
}


/* =========================================================
   ÉCLAIRAGE INTERACTIF
   La carte ne bouge jamais.
========================================================= */

.cdv-profile-overview
>
.replay-metric-card {

    position: relative;

    overflow: hidden;

    --cdv-mouse-x: 50%;
    --cdv-mouse-y: 50%;

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background-color .3s ease !important;
}


.cdv-profile-overview
>
.replay-metric-card::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            330px circle
            at
            var(--cdv-mouse-x)
            var(--cdv-mouse-y),

            rgba(
                var(--cdv-accent, var(--cdv-violet)),
                .12
            ),

            rgba(
                var(--cdv-accent, var(--cdv-violet)),
                .035
            )
            33%,

            transparent
            68%
        );

    transition:
        opacity .28s ease;
}


.cdv-profile-overview
>
.replay-metric-card::after {

    content: "";

    position: absolute;

    left: 14%;
    right: 14%;
    top: 0;

    height: 1px;

    z-index: 1;

    pointer-events: none;

    opacity: .5;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(
                var(--cdv-accent, var(--cdv-violet)),
                .42
            ),

            transparent
        );

    transition:
        opacity .3s ease,
        left .3s ease,
        right .3s ease;
}


.cdv-profile-overview
>
.replay-metric-card:hover {

    transform:
        translateY(0) !important;

    border-color:
        rgba(
            var(--cdv-accent, var(--cdv-violet)),
            .20
        ) !important;

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        0 20px 44px
        rgba(
            0,
            0,
            0,
            .26
        ),

        0 0 30px
        rgba(
            var(--cdv-accent, var(--cdv-violet)),
            .055
        ) !important;
}


.cdv-profile-overview
>
.replay-metric-card:hover::before {

    opacity: 1;
}


.cdv-profile-overview
>
.replay-metric-card:hover::after {

    left: 8%;
    right: 8%;

    opacity: .82;
}


/* Le contenu reste toujours au-dessus de la lumière. */

.cdv-profile-overview
>
.replay-metric-card
>
* {

    position: relative;

    z-index: 2;
}


/* =========================================================
   COULEURS FONCTIONNELLES
========================================================= */

.cdv-summary-portrait {

    --cdv-accent:
        var(--cdv-violet);
}


.cdv-summary-winrate {

    --cdv-accent:
        var(--cdv-blue);
}


.cdv-summary-verse {

    --cdv-accent:
        var(--cdv-gold);
}


.cdv-summary-customs {

    --cdv-accent:
        var(--cdv-violet);
}


.cdv-summary-soloq {

    --cdv-accent:
        var(--cdv-violet);
}


.cdv-summary-record {

    --cdv-accent:
        var(--cdv-blue);
}


.cdv-summary-teammate {

    --cdv-accent:
        var(--cdv-blue);
}


/* =========================================================
   HIÉRARCHIE DES TITRES
========================================================= */

.cdv-summary-label {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 19px;
}


.cdv-summary-label::before {

    content: "";

    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background:
        rgb(
            var(--cdv-accent, var(--cdv-violet))
        );

    box-shadow:
        0 0 10px
        rgba(
            var(--cdv-accent, var(--cdv-violet)),
            .65
        );
}


.cdv-summary-value {

    text-shadow:
        0 8px 24px
        rgba(
            var(--cdv-accent, var(--cdv-violet)),
            .10
        );
}


/* =========================================================
   PORTRAIT PREMIUM
========================================================= */

.cdv-summary-avatar {

    position: relative;

    isolation: isolate;

    box-shadow:

        0 0 0 1px
        rgba(
            var(--cdv-violet),
            .26
        ),

        0 0 0 7px
        rgba(
            var(--cdv-violet),
            .035
        ),

        0 22px 50px
        rgba(
            0,
            0,
            0,
            .42
        ),

        0 0 38px
        rgba(
            var(--cdv-violet),
            .12
        );

    animation:
        cdvAvatarBreathing
        4.8s
        ease-in-out
        infinite;
}


.cdv-summary-avatar::after {

    content: "";

    position: absolute;

    inset: -40%;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,

            transparent 34%,

            rgba(
                255,
                255,
                255,
                .16
            )
            47%,

            transparent 59%
        );

    transform:
        translateX(-75%)
        rotate(8deg);

    animation:
        cdvAvatarReflection
        6.5s
        ease-in-out
        infinite;
}


.cdv-summary-avatar img,
.cdv-summary-avatar-fallback {

    position: relative;

    z-index: 1;
}


@keyframes cdvAvatarBreathing {

    0%,
    100% {

        box-shadow:

            0 0 0 1px
            rgba(
                var(--cdv-violet),
                .24
            ),

            0 0 0 7px
            rgba(
                var(--cdv-violet),
                .03
            ),

            0 22px 50px
            rgba(
                0,
                0,
                0,
                .42
            ),

            0 0 28px
            rgba(
                var(--cdv-violet),
                .09
            );
    }

    50% {

        box-shadow:

            0 0 0 1px
            rgba(
                var(--cdv-violet),
                .38
            ),

            0 0 0 9px
            rgba(
                var(--cdv-violet),
                .05
            ),

            0 22px 50px
            rgba(
                0,
                0,
                0,
                .42
            ),

            0 0 43px
            rgba(
                var(--cdv-violet),
                .17
            );
    }
}


@keyframes cdvAvatarReflection {

    0%,
    62% {

        transform:
            translateX(-78%)
            rotate(8deg);
    }

    82%,
    100% {

        transform:
            translateX(78%)
            rotate(8deg);
    }
}


/* =========================================================
   BARRE WINRATE
========================================================= */

.cdv-summary-ratio-track {

    position: relative;
}


.cdv-summary-ratio-track::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            100deg,

            transparent 10%,

            rgba(
                255,
                255,
                255,
                .22
            )
            42%,

            transparent 72%
        );

    transform:
        translateX(-120%);

    animation:
        cdvRatioShine
        1.1s
        1.1s
        ease-out
        1
        forwards;
}


.cdv-summary-ratio-track .wins,
.cdv-summary-ratio-track .losses {

    transform-origin: left center;

    animation:
        cdvRatioGrow
        .9s
        .65s
        cubic-bezier(
            .2,
            .72,
            .2,
            1
        )
        both;
}


@keyframes cdvRatioGrow {

    from {

        transform:
            scaleX(0);
    }

    to {

        transform:
            scaleX(1);
    }
}


@keyframes cdvRatioShine {

    from {

        transform:
            translateX(-120%);
    }

    to {

        transform:
            translateX(120%);
    }
}


/* =========================================================
   EMBLÈME SOLOQ
========================================================= */

.cdv-summary-emblem {

    position: relative;
}


.cdv-summary-emblem::before {

    content: "";

    position: absolute;

    inset: 14%;

    z-index: 0;

    border-radius: 50%;

    background:
        rgba(
            var(--cdv-violet),
            .16
        );

    filter:
        blur(15px);

    animation:
        cdvRankAura
        4.2s
        ease-in-out
        infinite;
}


.cdv-summary-emblem img,
.cdv-summary-emblem-empty {

    position: relative;

    z-index: 1;
}


@keyframes cdvRankAura {

    0%,
    100% {

        opacity: .45;
    }

    50% {

        opacity: 1;
    }
}


/* =========================================================
   ACCENTS CONDITIONNELS
========================================================= */

.cdv-summary-winrate.cdv-perfect-winrate {

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .04
        ),

        0 0 34px
        rgba(
            var(--cdv-blue),
            .075
        );
}


.cdv-summary-verse.cdv-top-three {

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        0 0 38px
        rgba(
            var(--cdv-gold),
            .09
        );
}


.cdv-summary-record.cdv-has-mvp
.cdv-summary-record-stat.mvp {

    box-shadow:
        inset
        0 0 18px
        rgba(
            var(--cdv-gold),
            .06
        );
}


.cdv-summary-soloq.cdv-elite-rank {

    box-shadow:

        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            .045
        ),

        0 0 38px
        rgba(
            var(--cdv-violet),
            .085
        );
}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

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

    .cdv-profile-overview
    >
    .replay-metric-card,

    .cdv-summary-avatar,

    .cdv-summary-avatar::after,

    .cdv-summary-emblem::before,

    .cdv-summary-ratio-track::after,

    .cdv-summary-ratio-track .wins,

    .cdv-summary-ratio-track .losses {

        animation: none !important;
    }


    .cdv-profile-overview
    >
    .replay-metric-card {

        opacity: 1 !important;

        transform:
            none !important;
    }
}