/*------------
    Stats
------------*/
@property --num
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@property --i
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@property --f
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@property --ti
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@property --tf
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
}

@property --vis
{
    syntax: '<integer>';
    initial-value: 0;
    inherits: true;
}


@keyframes count
{
    from
    {
        --num: 0;
    }
    to
    {
        --num: var(--to);
    }
}


@keyframes vis
{
    from,
    to
    {
        --vis: 1;
    }
}


.stats
{
    .data
    {
        position: relative;

        overflow: clip;

        width: 1380px;
        max-width: 100%;
        margin-inline: auto;
        padding-block: var(--outside_gap_s);
        padding-inline: var(--outside_gap_xs);

        color: var(--light_color);
        background: var(--gradient_primary);

        clip-path: var(--clip_path_corner_top_left);


        & > *
        {
            position: relative;
            z-index: 3;
        }


        .bg1
        {
            position: absolute;
            z-index: 1;
            bottom: 0;
            left: 0;

            display: block;

            width: 431px;
            max-width: 100%;

            pointer-events: none;

            mix-blend-mode: color-dodge;


            img
            {
                display: block;

                width: 100%;
            }
        }


        .bg2
        {
            position: absolute;
            z-index: 1;
            top: 0;
            right: 0;

            display: block;

            width: 364px;
            max-width: 100%;

            pointer-events: none;

            mix-blend-mode: color-dodge;


            img
            {
                display: block;

                width: 100%;
            }
        }
    }


    .grid_row
    {
        justify-content: space-between;

        --items_per_line: 4;
        --gap_x: var(--block_padding);
        --gap_y: var(--block_padding);


        & > *
        {
            width: fit-content;
        }
    }


    .item
    {
        display: flex;
        flex-direction: column;
        gap: var(--outside_gap_xxs);

        padding-left: var(--inner_gap_l);

        animation: vis linear;

        border-left: 1px solid rgba(255, 255, 255, .2);

        animation-timeline: view();
        animation-range: contain;


        .label
        {
            font-size: var(--font_size_s);
            font-weight: 500;
            line-height: 157.143%;
        }


        .val
        {
            font-family: var(--font_family_secondary);
            font-size: 70px;
            font-weight: 300;
            line-height: 1;


            .count
            {
                display: inline-grid;

                counter-reset: n var(--num) t var(--to);

                font-variant-numeric: tabular-nums;


                &:before,
                &:after
                {
                    grid-area: 1 / 1;
                }


                &:before
                {
                    content: counter(n);
                }


                &:after
                {
                    visibility: hidden;

                    content: counter(t);
                }


                &.decimal
                {
                    counter-reset: i var(--i) f var(--f) ti var(--ti) tf var(--tf);

                    --i: calc(var(--num) / 10 - .5);
                    --f: calc(var(--num) - var(--i) * 10);
                    --ti: calc(var(--to) / 10 - .5);
                    --tf: calc(var(--to) - var(--ti) * 10);


                    &:before
                    {
                        content: counter(i) ',' counter(f);
                    }


                    &:after
                    {
                        content: counter(ti) ',' counter(tf);
                    }
                }
            }


            @container style(--vis: 1)
            {
                .count
                {
                    animation: count 2s ease-out both;
                }
            }


            @supports not (animation-timeline: view())
            {
                .count
                {
                    --num: var(--to);
                }
            }


            small
            {
                font-size: var(--font_size_title_s);
                font-weight: 500;
            }
        }
    }
}



@media print,
(max-width: 1439px)
{
    .stats
    {
        .grid_row
        {
            --gap_x: var(--inner_gap_l);
        }


        .item
        {
            .val
            {
                font-size: var(--font_size_title_l);
            }
        }
    }
}



@media print,
(max-width: 1279px)
{
    .stats
    {
        .data
        {
            padding-inline: var(--block_padding);
        }


        .item
        {
            padding-left: var(--inner_gap);


            .val
            {
                small
                {
                    font-size: var(--font_size_l);
                }
            }
        }
    }
}



@media print,
(max-width: 1024px)
{
    .stats
    {
        .grid_row
        {
            --items_per_line: 2;


            & > *
            {
                width: calc(100% / var(--items_per_line) * var(--width_multiplier, 1) - var(--gap_x));
            }
        }


        .item
        {
            gap: var(--inner_gap);
        }
    }
}



@media (max-width: 767px)
{
    .stats
    {
        .grid_row
        {
            --items_per_line: 1;
        }


        .item
        {
            align-content: center;
            align-items: center;
            gap: var(--inner_gap_xs);

            padding-left: 0;

            text-align: center;

            border: none;
        }


        .item + .item
        {
            padding-top: var(--block_padding);

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