/* === VIEW-TRANSITIONS.CSS ===
 * Magic Stack 2026 Tier S - View Transitions API для плавной навигации
 * 91% support 2026
 */

/* Глобальная конфигурация View Transitions */
@view-transition {
    navigation: auto;
}

/* Каждая секция получает уникальное имя для smooth crossfade */
.brain-section,
.mkt-hero {
    view-transition-name: auto;
}

/* Ключевые блоки с собственными transitions */
#hero       { view-transition-name: section-hero; }
#triggers   { view-transition-name: section-triggers; }
#pain       { view-transition-name: section-pain; }
#how        { view-transition-name: section-how; }
#what-works { view-transition-name: section-what-works; }
#case       { view-transition-name: section-case; }
#why-now    { view-transition-name: section-why-now; }
#faq        { view-transition-name: section-faq; }
#business   { view-transition-name: section-business; }
#manifesto  { view-transition-name: section-manifesto; }
#lead       { view-transition-name: section-lead; }
#final-cta  { view-transition-name: section-cta; }

/* Crossfade transitions */
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 0.4s;
    animation-timing-function: var(--ease-out-quart);
}

::view-transition-old(*) {
    animation-name: vt-fade-out;
}

::view-transition-new(*) {
    animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0s;
    }
}