/*
 * ============================================================
 *  FLOATING POST ORDER
 * ============================================================
 */

@property --floating-angle {

    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;

}


/*
 * ============================================================
 *  НАСТРОЙКИ
 * ============================================================
 */

#floatingPostOrder {

    /*
     * Цвета
     */
    --floating-bg: #161616;                         /* Основной фон */
    --floating-bg-light: #242424;                   /* Светлая часть фона */
    --floating-border: #484848;                     /* Обычная рамка */

    --floating-glow: #c51818;                       /* Бегущий блик */
    --floating-glow-soft: #ac1e1e;                  /* Мягкий блик */
    --floating-glow-dark: #db1818;                  /* Хвост блика */

    --floating-text: #ffffff;                       /* Основной текст */
    --floating-text-muted: #a8a8a8;                 /* Второй текст */

    --floating-icon-bg: #ffffff;                    /* Фон иконки */
    --floating-icon-color: #161616;                 /* Цвет иконки */


    /*
     * Видимость обводки
     */
    --floating-glow-opacity: .90;                    /* Яркость бегущей рамки 0 → 1 */


    /*
     * Бегающая внутренняя вмятина
     */
--floating-dent-opacity: 1;
--floating-dent-size: 140px;
--floating-dent-depth: .90;
--floating-dent-light: .25;               /* Скорость движения вмятины */


    /*
     * Общая тень блока
     */
    --floating-shadow-opacity: .55;                  /* Насыщенность тени */
    --floating-shadow-blur: 28px;                    /* Размытие тени */
    --floating-shadow-y: 10px;                       /* Смещение вниз */


    /*
     * Размеры
     */
    --floating-radius: 12px;                         /* Скругление */
    --floating-border-size: 2px;                     /* Толщина бегущей рамки */
    --floating-max-width: 600px;                     /* Максимальная ширина */


    /*
     * Скорость рамки
     */
    --floating-border-speed: 2s;                     /* Скорость бегущего блика */


    /*
     * Footer
     */
    --floating-footer-offset: 0px;                   /* Меняется через JS */


    position: fixed;

    left: 0;
    right: 0;

    bottom: calc(
        15px +
        var(--floating-footer-offset)
    );

    z-index: 1050;

    padding-left: 15px;
    padding-right: 15px;

    pointer-events: none;

    transition:
        bottom .15s ease;

}



/*
 * ============================================================
 *  КОНТЕЙНЕР
 * ============================================================
 */

.floating-post-order-inner {

    width: 100%;

    max-width:
        var(--floating-max-width);

    margin-left: auto;
    margin-right: auto;

    filter:
        drop-shadow(
            0
            var(--floating-shadow-y)
            var(--floating-shadow-blur)
            rgba(
                0,
                0,
                0,
                var(--floating-shadow-opacity)
            )
        );

}



/*
 * ============================================================
 *  КНОПКА
 * ============================================================
 */

.floating-post-order-button {

    position: relative;

    display: flex;

    align-items: center;

    width: 100%;

    padding: 12px 14px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            var(--floating-bg-light) 0%,
            var(--floating-bg) 100%
        );

    color:
        var(--floating-text);

    border:
        1px solid
        var(--floating-border);

    border-radius:
        var(--floating-radius);

    text-decoration: none;

    pointer-events: auto;

    overflow: visible;

    isolation: isolate;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        inset 0 -1px 0 rgba(0, 0, 0, .40);

    transition:
        transform .18s ease;

}



/*
 * ============================================================
 *  БЕГУЩАЯ РАМКА
 * ============================================================
 */

.floating-post-order-button::before {

    content: '';

    position: absolute;

    inset:
        calc(
            var(--floating-border-size) * -1
        );

    padding:
        var(--floating-border-size);

    border-radius:
        calc(
            var(--floating-radius) + 1px
        );

    background:
        conic-gradient(

            from var(--floating-angle),

            transparent 0deg,
            transparent 165deg,

            rgba(
                104,
                104,
                104,
                var(--floating-glow-opacity)
            ) 210deg,

            rgba(
                189,
                189,
                189,
                var(--floating-glow-opacity)
            ) 255deg,

            rgba(
                255,
                255,
                255,
                var(--floating-glow-opacity)
            ) 300deg,

            rgba(
                255,
                255,
                255,
                var(--floating-glow-opacity)
            ) 325deg,

            rgba(
                189,
                189,
                189,
                var(--floating-glow-opacity)
            ) 347deg,

            transparent 360deg

        );

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    pointer-events: none;

    z-index: 4;

    animation:
        floatingPostOrderBorder
        var(--floating-border-speed)
        linear
        infinite;

}



/*
 * ============================================================
 *  БЕГАЮЩАЯ ВНУТРЕННЯЯ ВМЯТИНА
 * ============================================================
 *
 *  Эта область создаёт ощущение, что поверхность
 *  блока продавливается внутрь и это продавливание
 *  перемещается по краям.
 * ============================================================
 */

.floating-post-order-button::after {

    content: '';

    position: absolute;

    inset: 3px;

    border-radius:
        calc(
            var(--floating-radius) - 3px
        );

    pointer-events: none;

    z-index: 1;

    opacity:
        var(--floating-dent-opacity);

    background:

        radial-gradient(
            circle
            var(--floating-dent-size)
            at 0% 0%,

            rgba(
                255,
                255,
                255,
                var(--floating-dent-light)
            ) 0%,

            rgba(
                255,
                255,
                255,
                .04
            ) 12%,

            rgba(
                0,
                0,
                0,
                calc(
                    var(--floating-dent-depth) * .45
                )
            ) 28%,

            rgba(
                0,
                0,
                0,
                var(--floating-dent-depth)
            ) 44%,

            rgba(
                0,
                0,
                0,
                .12
            ) 58%,

            transparent 72%

        );

    background-repeat:
        no-repeat;

    animation:
        floatingPostOrderDent
        var(--floating-dent-speed)
        linear
        infinite;

}



/*
 * ============================================================
 *  СОДЕРЖИМОЕ ПОВЕРХ ВМЯТИНЫ
 * ============================================================
 */

.floating-post-order-icon,
.floating-post-order-content,
.floating-post-order-arrow {

    position: relative;

    z-index: 2;

}



/*
 * ============================================================
 *  АНИМАЦИЯ РАМКИ
 * ============================================================
 */

@keyframes floatingPostOrderBorder {

    from {

        --floating-angle: 0deg;

    }

    to {

        --floating-angle: 360deg;

    }

}



/*
 * ============================================================
 *  ДВИЖЕНИЕ ВМЯТИНЫ ПО ПЕРИМЕТРУ
 * ============================================================
 */

@keyframes floatingPostOrderDent {

    /*
     * Левый верх
     */
    0% {

        background-position:
            0% 0%;

    }


    /*
     * Центр сверху
     */
    12.5% {

        background-position:
            50% 0%;

    }


    /*
     * Правый верх
     */
    25% {

        background-position:
            100% 0%;

    }


    /*
     * Справа по центру
     */
    37.5% {

        background-position:
            100% 50%;

    }


    /*
     * Правый низ
     */
    50% {

        background-position:
            100% 100%;

    }


    /*
     * Центр снизу
     */
    62.5% {

        background-position:
            50% 100%;

    }


    /*
     * Левый низ
     */
    75% {

        background-position:
            0% 100%;

    }


    /*
     * Слева по центру
     */
    87.5% {

        background-position:
            0% 50%;

    }


    /*
     * Возврат наверх
     */
    100% {

        background-position:
            0% 0%;

    }

}



/*
 * ============================================================
 *  HOVER
 * ============================================================
 */

.floating-post-order-button:hover {

    color:
        var(--floating-text);

    transform:
        translateY(-2px);

}



/*
 * ============================================================
 *  ИКОНКА
 * ============================================================
 */

.floating-post-order-icon {

    width: 40px;
    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-right: 12px;

    border-radius: 9px;

    background:
        var(--floating-icon-bg);

    color:
        var(--floating-icon-color);

    border:
        1px solid
        rgba(255, 255, 255, .20);

    font-size: 18px;

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, .30),

        inset 0 1px 0
        rgba(255, 255, 255, .35);

}



/*
 * ============================================================
 *  КОНТЕНТ
 * ============================================================
 */

.floating-post-order-content {

    display: flex;

    flex-direction: column;

    flex: 1;

    min-width: 0;

}



/*
 * ============================================================
 *  ПОДПИСЬ
 * ============================================================
 */

.floating-post-order-label {

    color:
        var(--floating-text-muted);

    font-size: 12px;

    line-height: 1.2;

}



/*
 * ============================================================
 *  ЗАГОЛОВОК
 * ============================================================
 */

.floating-post-order-title {

    margin-top: 2px;

    color:
        var(--floating-text);

    font-size: 15px;

    font-weight: 600;

    line-height: 1.3;

}



/*
 * ============================================================
 *  СТРЕЛКА
 * ============================================================
 */

.floating-post-order-arrow {

    margin-left: 12px;

    color:
        var(--floating-text);

    opacity: .75;

    font-size: 18px;

    transition:
        transform .18s ease,
        opacity .18s ease;

}


.floating-post-order-button:hover
.floating-post-order-arrow {

    transform:
        translateX(4px);

    opacity: 1;

}



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

@media (max-width: 576px) {

    #floatingPostOrder {

        bottom: calc(
            10px +
            var(--floating-footer-offset)
        );

        padding-left: 10px;
        padding-right: 10px;

    }


    .floating-post-order-button {

        padding: 10px 12px;

    }


    .floating-post-order-icon {

        width: 38px;
        height: 38px;

        min-width: 38px;

    }


    .floating-post-order-title {

        font-size: 14px;

    }

}



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

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

    .floating-post-order-button::before,
    .floating-post-order-button::after {

        animation: none;

    }

}