/* ============================================================
   animations.css — анимации сайта (scroll-reveal, hover, micro-interactions)
   Подключается отдельным файлом — легко отключить если нужно.
   ============================================================ */

/* ---------- Базовые transition'ы для интерактивов ---------- */
a, button, .btn, .quiz__option, .case-feature, .thanks-feature,
.guarantee-card, .step-arrow, .case-mini, .case-main, .faq__item {
    transition:
        transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1),
        box-shadow 240ms ease,
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease;
}

/* ---------- Scroll reveal: fade-in-up ---------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 700ms cubic-bezier(0.2, 0.8, 0.3, 1),
        transform 700ms cubic-bezier(0.2, 0.8, 0.3, 1);
    will-change: opacity, transform;
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Каскадная задержка для дочерних элементов */
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* ---------- Hover-lift для карточек ---------- */
.thanks-feature:hover,
.guarantee-card:hover,
.case-mini:hover,
.case-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(86, 35, 18, 0.12);
}

/* ---------- Pulse на главных CTA (subtle, для привлечения внимания) ---------- */
@keyframes cta-pulse {
    0%, 100% { box-shadow: 0 14px 32px rgba(237, 83, 57, 0.28); }
    50%      { box-shadow: 0 14px 32px rgba(237, 83, 57, 0.28), 0 0 0 8px rgba(237, 83, 57, 0.08); }
}
.hero__cta,
.cta-box__button {
    animation: cta-pulse 2.6s ease-in-out infinite;
}
.hero__cta:hover,
.cta-box__button:hover {
    animation: none;                       /* при hover убираем pulse — пользователь уже видит */
}

/* ---------- Shield-illustration: лёгкое "дыхание" в thanks-hero ---------- */
@keyframes shield-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.02); }
}
.thanks-hero__shield {
    animation: shield-breathe 4s ease-in-out infinite;
    transform-origin: center bottom;
}

/* ---------- Декоративные звёзды — мерцание ---------- */
@keyframes star-twinkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.12); }
}
.thanks-hero__star,
.decor--sparkle,
.decor--sparkle-lg {
    animation: star-twinkle 3.2s ease-in-out infinite;
}
.thanks-hero__star--2 { animation-delay: 0.8s; }
.thanks-hero__star--3 { animation-delay: 1.6s; }

/* ---------- Прогресс-бар квиза — анимация заливки ---------- */
.quiz__progress-bar {
    transition: width 600ms cubic-bezier(0.2, 0.8, 0.3, 1) !important;
}

/* ---------- Чипсы Hero — поочерёдное появление ---------- */
.chip {
    animation: chip-pop 600ms cubic-bezier(0.3, 1.2, 0.5, 1) both;
}
.chip:nth-child(2) { animation-delay: 120ms; }
@keyframes chip-pop {
    from { opacity: 0; transform: translateY(8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Footer-ссылки — подчёркивание slide-in ---------- */
.footer__legal a {
    position: relative;
}
.footer__legal a::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 8px;
    right: 8px;
    height: 1.5px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.footer__legal a:hover::after {
    transform: scaleX(1);
}

/* ---------- Site-nav ссылки — то же подчёркивание ---------- */
.site-nav a {
    position: relative;
}
.site-nav a::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 280ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
.site-nav a:hover::after {
    transform: scaleX(1);
}

/* ---------- Респект reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-visible,
    .hero__cta,
    .cta-box__button,
    .thanks-hero__shield,
    .thanks-hero__star,
    .decor--sparkle,
    .decor--sparkle-lg,
    .chip {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}