/* ============================================================
   Pilony — Иммерсивные анимации
   ============================================================ */

/* === Базовые классы появления (добавляются через JS + IntersectionObserver) === */

@media (prefers-reduced-motion: no-preference) {

    .anim-up {
        opacity: 0;
        transform: translateY(30px);
        will-change: opacity, transform;
        transition: opacity 0.65s ease, transform 0.65s ease;
        transition-delay: var(--anim-delay, 0ms);
    }

    .anim-left {
        opacity: 0;
        transform: translateX(-36px);
        will-change: opacity, transform;
        transition: opacity 0.65s ease, transform 0.65s ease;
        transition-delay: var(--anim-delay, 0ms);
    }

    .anim-right {
        opacity: 0;
        transform: translateX(36px);
        will-change: opacity, transform;
        transition: opacity 0.65s ease, transform 0.65s ease;
        transition-delay: var(--anim-delay, 0ms);
    }

    .anim-scale {
        opacity: 0;
        transform: scale(0.88);
        will-change: opacity, transform;
        transition: opacity 0.65s ease, transform 0.65s ease;
        transition-delay: var(--anim-delay, 0ms);
    }

    .anim-fade {
        opacity: 0;
        will-change: opacity;
        transition: opacity 0.65s ease;
        transition-delay: var(--anim-delay, 0ms);
    }

    .anim-up.anim-done,
    .anim-left.anim-done,
    .anim-right.anim-done,
    .anim-scale.anim-done,
    .anim-fade.anim-done {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   Hover-эффекты на карточках
   ============================================================ */

/* Карточки товаров по акции */
.pilony-promo-products .po-item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pilony-promo-products .po-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Виды пилонов */
.pilony-types__card:not(.pilony-types__card--cta) {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pilony-types__card:not(.pilony-types__card--cta):hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
}

/* Преимущества — красный кружок при наведении */
.pilony-advantages__item-title::before {
    transition: transform 0.22s ease;
}
.pilony-advantages__item:hover .pilony-advantages__item-title::before {
    transform: scale(1.3);
}

/* Радиальная схема — иконки */
.pilony-features-radial__icon {
    transition: transform 0.25s ease;
}
.pilony-features-radial__item:hover .pilony-features-radial__icon {
    transform: scale(1.1);
}

/* Применение — плашки */
.pilony-usage__item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pilony-usage__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

/* Почему выбирают */
.pilony-page .pilony-why-choose .block-first-item {
    transition: transform 0.22s ease;
}
.pilony-page .pilony-why-choose .block-first-item:hover {
    transform: translateY(-4px);
}

/* Вкладки статей */
.pilony-articles__tab {
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.pilony-articles__tab:hover {
    background: rgba(241, 84, 84, 0.07);
}

/* Карточки этапов (howto) */
.pilony-howto__card {
    transition: border-color 0.25s ease, background 0.25s ease;
}
.pilony-howto__card:hover {
    border-color: #ff4a4a;
    background: rgba(246, 246, 246, 0.09);
}

/* ============================================================
   CTA-кнопка — пульсация + shimmer
   ============================================================ */

@keyframes pilony-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(241, 84, 84, 0.45); }
    55%       { box-shadow: 0 0 0 12px rgba(241, 84, 84, 0); }
}

@keyframes pilony-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.pilony-request-form__row .btn_red {
    position: relative;
    overflow: hidden;
    animation: pilony-pulse 2.5s ease infinite;
}

.pilony-request-form__row .btn_red::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.20) 50%,
        transparent 62%
    );
    background-size: 200% 100%;
    animation: pilony-shimmer 2.8s linear infinite;
    pointer-events: none;
}

/* ============================================================
   Форма — акцент при фокусе
   ============================================================ */

.pilony-request-form__row input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pilony-request-form__row input:focus {
    outline: none;
    border-color: #f15454;
    box-shadow: 0 0 0 3px rgba(241, 84, 84, 0.16);
}

/* ============================================================
   FAQ — плавное раскрытие (заменяет display:none)
   ============================================================ */

.pilony-faq__item .faq-answer {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    margin-top: 0 !important;
    transition: max-height 0.38s ease, margin-top 0.22s ease;
}

.pilony-faq__item.is-open .faq-answer {
    display: block !important;
    max-height: 800px;
    margin-top: 20px !important;
}

.pilony-faq__item .faq-toggle {
    transition: transform 0.28s ease;
}

/* ============================================================
   Параллакс фото проектов
   ============================================================ */

.pilony-projects__image {
    will-change: transform;
}