/*
============================================================
Motmaître — VICTORY CELEBRATION
============================================================
*/


/* ==========================================================
   GLOBAL CELEBRATION LAYER
   ========================================================== */

.victory-celebration-layer {
    position:
        fixed;

    z-index:
        9999;

    inset:
        0;

    overflow:
        hidden;

    pointer-events:
        none;
}


/* ==========================================================
   FALLING CONFETTI
   ========================================================== */

.victory-confetti {
    position:
        absolute;

    top:
        -12vh;

    left:
        0;

    width:
        var(
            --confetti-size
        );

    height:
        calc(
            var(
                --confetti-size
            )
            * 0.58
        );

    border-radius:
        2px;

    background:
        var(
            --party-color
        );

    opacity:
        0;

    box-shadow:
        0
        1px
        1px
        rgba(
            0,
            0,
            0,
            0.08
        );

    transform:
        translate3d(
            var(
                --confetti-x
            ),
            -12vh,
            0
        );

    animation:
        motchaud-confetti-fall
        var(
            --confetti-duration
        )
        cubic-bezier(
            0.14,
            0.68,
            0.38,
            1
        )
        var(
            --confetti-delay
        )
        forwards;

    will-change:
        transform,
        opacity;
}


.victory-confetti-circle {
    height:
        var(
            --confetti-size
        );

    border-radius:
        999px;
}


.victory-confetti-ribbon {
    width:
        calc(
            var(
                --confetti-size
            )
            * 0.72
        );

    height:
        calc(
            var(
                --confetti-size
            )
            * 2.4
        );

    border:
        2px solid
        var(
            --party-color
        );

    border-left-color:
        transparent;

    border-radius:
        50%;

    background:
        transparent;

    box-shadow:
        none;
}


@keyframes motchaud-confetti-fall {

    0% {
        opacity:
            0;

        transform:
            translate3d(
                var(
                    --confetti-x
                ),
                -12vh,
                0
            )
            rotate(
                0deg
            );
    }


    8% {
        opacity:
            1;
    }


    88% {
        opacity:
            1;
    }


    100% {
        opacity:
            0;

        transform:
            translate3d(
                calc(
                    var(
                        --confetti-x
                    )
                    +
                    var(
                        --confetti-drift
                    )
                ),
                112vh,
                0
            )
            rotate(
                var(
                    --confetti-spin
                )
            );
    }
}


/* ==========================================================
   FLOATING UNICORNS
   ========================================================== */

.victory-unicorn {
    position:
        absolute;

    left:
        var(
            --unicorn-x
        );

    bottom:
        -18vh;

    font-size:
        var(
            --unicorn-size
        );

    line-height:
        1;

    opacity:
        0;

    filter:
        drop-shadow(
            0
            5px
            7px
            rgba(
                0,
                0,
                0,
                0.18
            )
        );

    animation:
        motmaitre-unicorn-float
        var(
            --unicorn-duration
        )
        cubic-bezier(
            0.2,
            0.62,
            0.34,
            1
        )
        var(
            --unicorn-delay
        )
        forwards;

    will-change:
        transform,
        opacity;
}


@keyframes motmaitre-unicorn-float {

    0% {
        opacity:
            0;

        transform:
            translate3d(
                0,
                12vh,
                0
            )
            rotate(
                var(
                    --unicorn-tilt
                )
            )
            scale(
                0.72
            );
    }


    12% {
        opacity:
            1;
    }


    72% {
        opacity:
            1;
    }


    100% {
        opacity:
            0;

        transform:
            translate3d(
                var(
                    --unicorn-drift
                ),
                -132vh,
                0
            )
            rotate(
                calc(
                    var(
                        --unicorn-tilt
                    )
                    * -1
                )
            )
            scale(
                1.08
            );
    }
}


/* ==========================================================
   CENTRAL BURST
   ========================================================== */

.victory-burst-piece {
    position:
        fixed;

    top:
        var(
            --burst-y
        );

    left:
        var(
            --burst-x
        );

    width:
        var(
            --burst-size
        );

    height:
        calc(
            var(
                --burst-size
            )
            * 0.62
        );

    border-radius:
        2px;

    background:
        var(
            --party-color
        );

    opacity:
        0;

    animation:
        motchaud-victory-burst
        1.05s
        cubic-bezier(
            0.12,
            0.72,
            0.22,
            1
        )
        var(
            --burst-delay
        )
        forwards;

    will-change:
        transform,
        opacity;
}


@keyframes motchaud-victory-burst {

    0% {
        opacity:
            0;

        transform:
            translate3d(
                -50%,
                -50%,
                0
            )
            scale(
                0.3
            )
            rotate(
                0deg
            );
    }


    12% {
        opacity:
            1;
    }


    72% {
        opacity:
            1;
    }


    100% {
        opacity:
            0;

        transform:
            translate3d(
                calc(
                    -50%
                    +
                    var(
                        --burst-dx
                    )
                ),
                calc(
                    -50%
                    +
                    var(
                        --burst-dy
                    )
                ),
                0
            )
            scale(
                1
            )
            rotate(
                var(
                    --burst-spin
                )
            );
    }
}


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

.victory-section.is-celebrating {
    box-shadow:
        0
        22px
        65px
        rgba(
            0,
            0,
            0,
            0.20
        );
}


.victory-section.is-celebrating
.victory-content {
    animation:
        motchaud-victory-content-pop
        0.82s
        cubic-bezier(
            0.16,
            1.35,
            0.36,
            1
        )
        both;
}


.victory-section.is-celebrating
.victory-glow {
    animation:
        motchaud-victory-glow
        1.5s
        ease-out
        both;
}


@keyframes motchaud-victory-content-pop {

    0% {
        opacity:
            0;

        transform:
            scale(
                0.88
            )
            translateY(
                12px
            );
    }


    50% {
        opacity:
            1;

        transform:
            scale(
                1.035
            )
            translateY(
                -2px
            );
    }


    72% {
        transform:
            scale(
                0.992
            );
    }


    100% {
        opacity:
            1;

        transform:
            scale(
                1
            )
            translateY(
                0
            );
    }
}


@keyframes motchaud-victory-glow {

    0% {
        opacity:
            0.35;

        transform:
            translateX(
                -50%
            )
            scale(
                0.72
            );
    }


    42% {
        opacity:
            1;

        transform:
            translateX(
                -50%
            )
            scale(
                1.28
            );
    }


    100% {
        opacity:
            1;

        transform:
            translateX(
                -50%
            )
            scale(
                1
            );
    }
}


/* ==========================================================
   PARTY POPPERS
   ========================================================== */

.victory-section.is-celebrating::before,
.victory-section.is-celebrating::after {
    position:
        absolute;

    z-index:
        5;

    bottom:
        18px;

    font-size:
        clamp(
            34px,
            7vw,
            52px
        );

    line-height:
        1;

    opacity:
        0;

    content:
        "🎉";

    pointer-events:
        none;
}


.victory-section.is-celebrating::before {
    left:
        20px;

    animation:
        motchaud-popper-left
        1.05s
        0.12s
        cubic-bezier(
            0.16,
            1.4,
            0.36,
            1
        )
        both;
}


.victory-section.is-celebrating::after {
    right:
        20px;

    animation:
        motchaud-popper-right
        1.05s
        0.16s
        cubic-bezier(
            0.16,
            1.4,
            0.36,
            1
        )
        both;
}


@keyframes motchaud-popper-left {

    0% {
        opacity:
            0;

        transform:
            translate(
                -20px,
                20px
            )
            scale(
                0.5
            )
            rotate(
                -28deg
            );
    }


    48% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1.12
            )
            rotate(
                -8deg
            );
    }


    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            )
            rotate(
                -10deg
            );
    }
}


@keyframes motchaud-popper-right {

    0% {
        opacity:
            0;

        transform:
            translate(
                20px,
                20px
            )
            scale(
                0.5
            )
            rotate(
                28deg
            );
    }


    48% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1.12
            )
            rotate(
                8deg
            );
    }


    100% {
        opacity:
            1;

        transform:
            translate(
                0,
                0
            )
            scale(
                1
            )
            rotate(
                10deg
            );
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

.victory-section.is-celebrating-reduced {
    box-shadow:
        0
        22px
        65px
        rgba(
            0,
            0,
            0,
            0.22
        );
}


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

    .victory-celebration-layer {
        display:
            none;
    }


    .victory-section.is-celebrating,
    .victory-section.is-celebrating
    .victory-content,
    .victory-section.is-celebrating
    .victory-glow,
    .victory-section.is-celebrating::before,
    .victory-section.is-celebrating::after {
        animation:
            none !important;
    }
}


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

@media (
    max-width: 600px
) {

    .victory-section.is-celebrating::before {
        bottom:
            13px;

        left:
            10px;
    }


    .victory-section.is-celebrating::after {
        right:
            10px;

        bottom:
            13px;
    }
}

/* ==========================================================
   VICTORY HEAT SUMMARY
   ========================================================== */

.victory-heat-summary {
    margin-top:
        22px;

    padding:
        14px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.09
        );

    border-radius:
        16px;

    background:
        rgba(
            255,
            255,
            255,
            0.055
        );
}


.victory-heat-summary-title {
    display:
        block;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.victory-heat-summary-grid {
    display:
        grid;

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

    gap:
        8px;

    margin-top:
        10px;
}


.victory-heat-summary-item {
    display:
        grid;

    justify-items:
        center;

    gap:
        3px;

    min-width:
        0;

    padding:
        9px
        5px;

    border-radius:
        12px;

    background:
        rgba(
            255,
            255,
            255,
            0.05
        );
}


.victory-heat-summary-item > span {
    font-size:
        17px;

    line-height:
        1;
}


.victory-heat-summary-item strong {
    color:
        #ffffff;

    font-size:
        19px;

    line-height:
        1.05;
}


.victory-heat-summary-item small {
    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        9px;

    line-height:
        1.1;
}


@media (
    max-width:
        430px
) {

    .victory-heat-summary-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );
    }
}

/* ==========================================================
   CAJOUNE EASTER EGG
   ========================================================== */

.victory-cajoune-shout {
    position:
        fixed;

    z-index:
        3;

    top:
        clamp(
            74px,
            12vh,
            132px
        );

    left:
        50%;

    padding:
        10px
        18px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.28
        );

    border-radius:
        999px;

    background:
        rgba(
            11,
            19,
            35,
            0.78
        );

    color:
        #ffffff;

    box-shadow:
        0
        10px
        34px
        rgba(
            0,
            0,
            0,
            0.22
        );

    font-size:
        clamp(
            18px,
            4vw,
            28px
        );

    font-weight:
        850;

    letter-spacing:
        -0.02em;

    line-height:
        1;

    white-space:
        nowrap;

    opacity:
        0;

    transform:
        translateX(
            -50%
        )
        translateY(
            14px
        )
        scale(
            0.86
        );

    animation:
        motlambda-cajoune-shout
        5.4s
        cubic-bezier(
            0.2,
            0.72,
            0.25,
            1
        )
        0.45s
        both;

    pointer-events:
        none;
}


@keyframes motlambda-cajoune-shout {

    0% {
        opacity:
            0;

        transform:
            translateX(
                -50%
            )
            translateY(
                18px
            )
            scale(
                0.82
            );
    }


    12% {
        opacity:
            1;

        transform:
            translateX(
                -50%
            )
            translateY(
                0
            )
            scale(
                1.05
            );
    }


    22% {
        transform:
            translateX(
                -50%
            )
            translateY(
                0
            )
            scale(
                1
            );
    }


    76% {
        opacity:
            1;
    }


    100% {
        opacity:
            0;

        transform:
            translateX(
                -50%
            )
            translateY(
                -16px
            )
            scale(
                0.96
            );
    }
}