/*-------------------
    First section
-------------------*/
@keyframes title-slider
{
    0%
    {
        transform: translateY(100%);
        opacity: 0;
    }
    /* 4% появление + 16% удержание = итого до 20% элемент на экране */
    4%,
    20%
    {
        transform: translateY(0);
        opacity: 1;
    }
    /* За 4% плавно уходит вверх (исчезает к 24%) */
    24%
    {
        transform: translateY(-100%);
        opacity: 0;
    }
    /* Моментальный сброс вниз в 100% и ожидание до конца круга */
    24.01%,
    100%
    {
        transform: translateY(100%);
        opacity: 0;
    }
}


.first_section
{
    position: relative;

    text-align: center;

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


    .cont
    {
        position: relative;
        z-index: 3;

        display: flex;
        align-content: center;
        align-items: center;
        flex-direction: column;
        justify-content: flex-end;
        gap: var(--inner_gap);

        min-height: 700px;
        padding-block: 155px 75px;
    }


    .title
    {
        width: 1049px;
        max-width: 100%;

        font-family: var(--font_family_secondary);
        font-size: 55px;
        font-weight: 400;
        line-height: 110.909%;


        .slider
        {
            position: relative;

            overflow: hidden;

            height: 1lh;

            --duration: 10s; /* полный круг: 4 фразы по 2.5s */


            span
            {
                position: absolute;
                top: 0;
                left: 0;

                display: block;

                width: 100%;
                height: 100%;

                transform: translateY(100%);
                animation: title-slider var(--duration) cubic-bezier(.65, 0, .35, 1) infinite backwards;

                opacity: 0;


                /* Шаг задержки изменен на .2 (20% от общего времени) */
                &:nth-child(2) { animation-delay: calc(var(--duration) * .2); }
                &:nth-child(3) { animation-delay: calc(var(--duration) * .4); }
                &:nth-child(4) { animation-delay: calc(var(--duration) * .6); }
                &:nth-child(5) { animation-delay: calc(var(--duration) * .8); }
            }
        }
    }


    .desc
    {
        width: 549px;
        max-width: 100%;

        font-size: var(--font_size_s);
        line-height: 157.143%;
    }


    .btns
    {
        display: flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--inner_gap_xs);

        margin-top: var(--inner_gap_xs);


        .btn
        {
            display: flex;
            align-content: center;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--inner_gap_xxs);

            min-width: 200px;
            max-width: 100%;
            height: 60px;
            padding-inline: var(--block_padding_s);

            font-size: var(--font_size_xs);
            font-weight: 600;

            text-align: center;
            text-decoration: none;

            color: currentColor;


            &.primary
            {
                transition: transform .2s linear;

                background: var(--gradient_primary);

                clip-path: var(--clip_path_double_corners_small);


                @media (hover: hover) and (pointer: fine)
                {
                    &:hover
                    {
                        transform: scale(1.1);
                    }
                }
            }


            &.outlined
            {
                transition: background .2s linear;

                border: 1px solid var(--light_color);
                background: rgba(255, 255, 255, .05);

                backdrop-filter: blur(7.1px);


                @media (hover: hover) and (pointer: fine)
                {
                    &:hover
                    {
                        background: rgba(255, 255, 255, .15);
                    }
                }
            }


            .icon
            {
                display: block;

                width: 5px;

                transform: translateY(1px);

                aspect-ratio: 1 / 1.5;
            }
        }
    }


    .video
    {
        position: absolute;
        z-index: 1;
        inset: 0;

        display: block;

        pointer-events: none;


        &:before
        {
            position: absolute;
            inset: 0;

            display: block;

            content: '';

            background: rgba(21, 21, 21, .50);
        }
    }
}



@media print,
(max-width: 1279px)
{
    .first_section
    {
        .cont
        {
            min-height: 650px;
            padding-block: 145px 65px;
        }
    }
}



@media print,
(max-width: 1023px)
{
    .first_section
    {
        .title
        {
            font-size: 50px;
        }
    }
}



@media (max-width: 767px)
{
    .first_section
    {
        .title
        {
            font-size: var(--font_size_title_l);


            .slider
            {
                height: 2lh;
            }
        }


        .btns
        {
            width: 260px;
            max-width: 100%;
            margin-inline: auto;


            .btn
            {
                width: 100%;
            }
        }
    }
}