/* Jade micro interactions (must be loaded last) */
html.jade-js-ready {
    scroll-behavior: smooth;
}

body:not(.jade-is-lk) #jade-tilda-root .jade-clickable,
body:not(.jade-is-lk) #jade-tilda-root .jade-clickable--btn,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable--btn {
    cursor: pointer;
    transition: box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
}

body:not(.jade-is-lk) #jade-tilda-root .jade-clickable:hover,
body:not(.jade-is-lk) #jade-tilda-root .jade-clickable--btn:hover,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable:hover,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable--btn:hover {
    filter: brightness(1.05) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18) !important;
}

body:not(.jade-is-lk) #jade-tilda-root .jade-clickable:active,
body:not(.jade-is-lk) #jade-tilda-root .jade-clickable--btn:active,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable:active,
body:not(.jade-is-lk) #jade-wp-root .jade-clickable--btn:active {
    opacity: .9 !important;
}

body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable,
body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable--btn {
    transition: none;
}

body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable:hover,
body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable--btn:hover,
body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable:active,
body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"].jade-clickable--btn:active {
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

body:not(.jade-is-lk) #jade-tilda-root a[href],
body:not(.jade-is-lk) #jade-wp-root a[href] {
    transition: opacity 180ms ease, text-decoration-thickness 180ms ease;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.14em;
}

body:not(.jade-is-lk) #jade-tilda-root a[href]:hover,
body:not(.jade-is-lk) #jade-wp-root a[href]:hover {
    opacity: .85;
}

body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"] .tn-atom,
body:not(.jade-is-lk) #jade-wp-root .tn-elem[data-elem-type="button"] .tn-atom {
    border-radius: 999px;
    overflow: visible;
    transition: box-shadow 180ms ease, filter 180ms ease, opacity 180ms ease;
    will-change: box-shadow, filter, opacity;
}

body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"]:hover .tn-atom,
body:not(.jade-is-lk) #jade-wp-root .tn-elem[data-elem-type="button"]:hover .tn-atom {
    filter: brightness(1.05);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .22);
}

body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"]:active .tn-atom,
body:not(.jade-is-lk) #jade-wp-root .tn-elem[data-elem-type="button"]:active .tn-atom {
    opacity: .9;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .14);
}

body:not(.jade-is-lk) #jade-tilda-root .t-btn,
body:not(.jade-is-lk) #jade-tilda-root a.t-btn,
body:not(.jade-is-lk) #jade-wp-root .t-btn,
body:not(.jade-is-lk) #jade-wp-root a.t-btn {
    border-radius: 999px;
}

body:not(.jade-is-lk) #jade-tilda-root button,
body:not(.jade-is-lk) #jade-tilda-root input[type="submit"],
body:not(.jade-is-lk) #jade-wp-root button,
body:not(.jade-is-lk) #jade-wp-root input[type="submit"] {
    border-radius: inherit;
}

body:not(.jade-is-lk) #jade-tilda-root .t-btn,
body:not(.jade-is-lk) #jade-tilda-root button,
body:not(.jade-is-lk) #jade-tilda-root input[type="submit"],
body:not(.jade-is-lk) #jade-wp-root .t-btn,
body:not(.jade-is-lk) #jade-wp-root button,
body:not(.jade-is-lk) #jade-wp-root input[type="submit"] {
    transition: box-shadow 180ms ease, opacity 180ms ease, filter 180ms ease;
}

body:not(.jade-is-lk) #jade-tilda-root .t-btn:hover,
body:not(.jade-is-lk) #jade-tilda-root button:hover,
body:not(.jade-is-lk) #jade-tilda-root input[type="submit"]:hover,
body:not(.jade-is-lk) #jade-wp-root .t-btn:hover,
body:not(.jade-is-lk) #jade-wp-root button:hover,
body:not(.jade-is-lk) #jade-wp-root input[type="submit"]:hover {
    filter: brightness(1.03);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
}

body:not(.jade-is-lk) #jade-tilda-root .t-btn:active,
body:not(.jade-is-lk) #jade-tilda-root button:active,
body:not(.jade-is-lk) #jade-tilda-root input[type="submit"]:active,
body:not(.jade-is-lk) #jade-wp-root .t-btn:active,
body:not(.jade-is-lk) #jade-wp-root button:active,
body:not(.jade-is-lk) #jade-wp-root input[type="submit"]:active {
    opacity: .92;
}

/* ============================================================
   Header desktop (rec1956576631) — nav link hover underline
   ============================================================ */

/* position:relative нужен, чтобы ::after позиционировался
   относительно текста, а не артборда */
body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="text"] .tn-atom {
    position: relative;
    cursor: pointer;
}

/* Линия растёт из левого края при наведении */
body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="text"] .tn-atom::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: currentColor;
    transition: width 0.22s ease;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="text"]:hover .tn-atom::after {
    width: 100%;
}

/* ============================================================
   Header desktop — logo hover
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="image"] {
    cursor: pointer;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="image"] .tn-atom {
    transition: opacity 0.2s ease;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
.tn-elem[data-elem-type="image"] .tn-atom:hover {
    opacity: 0.75;
}

/* ============================================================
   Header desktop — тень при скролле
   JS добавляет класс jade-scrolled на <html> когда
   пользователь прокрутил страницу вниз
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard {
    transition: box-shadow 0.35s ease;
}

html.jade-scrolled body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   Header mobile (rec1960548361) — бургер-кнопка hover
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1960548361 .t-menuburger {
    transition: opacity 0.2s ease;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1960548361 .t-menuburger:hover {
    opacity: 0.65;
}

/* ============================================================
   Reveal: более выразительный spring-easing
   Переопределяем style.css (jade-micro.css грузится последним)
   ============================================================ */

.jade-reveal--shown {
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================================
   Stagger: дочерние элементы секции появляются поочерёдно
   Класс добавляется JS-функцией staggerChildren()
   ============================================================ */

@keyframes jade-stagger-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.jade-stagger {
    animation: jade-stagger-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: opacity;
}

/* ============================================================
   CTA-кнопки: пульсирующий glow — притягивает взгляд
   Применяем ко всем кнопкам в контентных секциях
   ============================================================ */

@keyframes jade-btn-pulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.20); }
    55%       { box-shadow: 0 0 0 11px rgba(255, 255, 255, 0.00); }
}

body:not(.jade-is-lk) #jade-tilda-root #rec1954342481 .tn-elem[data-elem-type="button"] .tn-atom,
body:not(.jade-is-lk) #jade-tilda-root #rec1955493881 .tn-elem[data-elem-type="button"] .tn-atom,
body:not(.jade-is-lk) #jade-tilda-root #rec1955688391 .tn-elem[data-elem-type="button"] .tn-atom,
body:not(.jade-is-lk) #jade-tilda-root #rec1956458601 .tn-elem[data-elem-type="button"] .tn-atom {
    animation: jade-btn-pulse 2.8s ease-in-out infinite;
}

/* ============================================================
   Контентные изображения: zoom при hover
   Исключаем хедер, мобильный хедер и футер
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root
.t-rec:not(#rec1956576631):not(#rec1960548361):not(#rec1956603401)
.tn-elem[data-elem-type="image"] .tn-atom {
    overflow: hidden;
}

body:not(.jade-is-lk) #jade-tilda-root
.t-rec:not(#rec1956576631):not(#rec1960548361):not(#rec1956603401)
.tn-elem[data-elem-type="image"] .tn-atom__img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

body:not(.jade-is-lk) #jade-tilda-root
.t-rec:not(#rec1956576631):not(#rec1960548361):not(#rec1956603401)
.tn-elem[data-elem-type="image"]:hover .tn-atom__img {
    transform: scale(1.06);
}

/* ============================================================
   Секция услуг (rec1955549791): иконки — bouncy-hover
   Пружинистый cubic-bezier создаёт живое ощущение
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1955549791
.tn-elem[data-elem-type="image"] .tn-atom__img {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1955549791
.tn-elem[data-elem-type="image"]:hover .tn-atom__img {
    transform: scale(1.18) !important;
}

/* ============================================================
   Секция автомобилей (rec1956343771): zoom чуть больше
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1956343771
.tn-elem[data-elem-type="image"]:hover .tn-atom__img {
    transform: scale(1.08) !important;
}

/* ============================================================
   Список преимуществ (rec1956280981): nudge при hover
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1956280981 .t396__artboard
.tn-elem[data-elem-type="text"] .tn-atom {
    transition: transform 0.22s ease, opacity 0.22s ease;
    display: inline-block;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956280981 .t396__artboard
.tn-elem[data-elem-type="text"]:hover .tn-atom {
    transform: translateX(5px);
    opacity: 0.8;
}

/* ============================================================
   Футер (rec1956603401): hover-подчёркивание ссылок
   Такая же механика как у nav-ссылок в хедере
   ============================================================ */

body:not(.jade-is-lk) #jade-tilda-root #rec1956603401 .t396__artboard
.tn-elem[data-elem-type="text"] .tn-atom {
    position: relative;
    cursor: pointer;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956603401 .t396__artboard
.tn-elem[data-elem-type="text"] .tn-atom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background-color: currentColor;
    transition: width 0.22s ease;
}

body:not(.jade-is-lk) #jade-tilda-root #rec1956603401 .t396__artboard
.tn-elem[data-elem-type="text"]:hover .tn-atom::after {
    width: 100%;
}

/* ============================================================
   prefers-reduced-motion: отключаем все новые анимации
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html.jade-js-ready {
        scroll-behavior: auto;
    }

    body:not(.jade-is-lk) #jade-tilda-root .jade-clickable,
    body:not(.jade-is-lk) #jade-tilda-root .jade-clickable--btn,
    body:not(.jade-is-lk) #jade-wp-root .jade-clickable,
    body:not(.jade-is-lk) #jade-wp-root .jade-clickable--btn,
    body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"] .tn-atom,
    body:not(.jade-is-lk) #jade-wp-root .tn-elem[data-elem-type="button"] .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root .t-btn,
    body:not(.jade-is-lk) #jade-tilda-root button,
    body:not(.jade-is-lk) #jade-tilda-root input[type="submit"],
    body:not(.jade-is-lk) #jade-wp-root .t-btn,
    body:not(.jade-is-lk) #jade-wp-root button,
    body:not(.jade-is-lk) #jade-wp-root input[type="submit"] {
        transition: none !important;
    }

    body:not(.jade-is-lk) #jade-tilda-root .jade-clickable:hover,
    body:not(.jade-is-lk) #jade-tilda-root .jade-clickable--btn:hover,
    body:not(.jade-is-lk) #jade-wp-root .jade-clickable:hover,
    body:not(.jade-is-lk) #jade-wp-root .jade-clickable--btn:hover,
    body:not(.jade-is-lk) #jade-tilda-root .tn-elem[data-elem-type="button"]:hover .tn-atom,
    body:not(.jade-is-lk) #jade-wp-root .tn-elem[data-elem-type="button"]:hover .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root .t-btn:hover,
    body:not(.jade-is-lk) #jade-tilda-root button:hover,
    body:not(.jade-is-lk) #jade-tilda-root input[type="submit"]:hover,
    body:not(.jade-is-lk) #jade-wp-root .t-btn:hover,
    body:not(.jade-is-lk) #jade-wp-root button:hover,
    body:not(.jade-is-lk) #jade-wp-root input[type="submit"]:hover {
        box-shadow: none !important;
    }

    /* Pulse на кнопках */
    body:not(.jade-is-lk) #jade-tilda-root #rec1954342481 .tn-elem[data-elem-type="button"] .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root #rec1955493881 .tn-elem[data-elem-type="button"] .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root #rec1955688391 .tn-elem[data-elem-type="button"] .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root #rec1956458601 .tn-elem[data-elem-type="button"] .tn-atom {
        animation: none !important;
    }

    /* Stagger */
    .jade-stagger {
        animation: none !important;
    }

    /* Reveal */
    .jade-reveal--shown {
        transition: none !important;
    }

    /* Zoom на картинках */
    body:not(.jade-is-lk) #jade-tilda-root
    .t-rec:not(#rec1956576631):not(#rec1960548361):not(#rec1956603401)
    .tn-elem[data-elem-type="image"] .tn-atom__img {
        transition: none !important;
    }

    /* Nudge преимуществ */
    body:not(.jade-is-lk) #jade-tilda-root #rec1956280981 .t396__artboard
    .tn-elem[data-elem-type="text"] .tn-atom {
        transition: none !important;
    }

    /* Header: отключаем все переходы */
    body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
    .tn-elem[data-elem-type="text"] .tn-atom::after,
    body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard
    .tn-elem[data-elem-type="image"] .tn-atom,
    body:not(.jade-is-lk) #jade-tilda-root #rec1956576631 .t396__artboard,
    body:not(.jade-is-lk) #jade-tilda-root #rec1960548361 .t-menuburger {
        transition: none !important;
    }
}
