/* ════════════════════════════════════════════════════════════════════
   Answerly — переходи між сторінками: лендінг ↔ «Замовити демо» ↔ «Вхід».
   View Transitions між документами (Chrome / Edge 126+, Safari 18.2+). Без підтримки — звичайний перехід, без помилок.

   Сцена відкривається з того, що натиснули. Темна кнопка, фінальна смуга лендінгу чи посилання
   розростається в темну сцену нової сторінки. Між двома сценами сцена стоїть на місці, змінюється вміст.
   Зі сцени в кабінет ('dock') площина стискається в ліву панель; радіус панелі кабінет ставить сам (--st-vt-r1 на html).
   З посилання лендінгу «Кабінет» ('link') площина так само проявляється й сідає в ліву панель.
   Назад на лендінг сцена тихо відступає й гасне.
   Вид переходу ставить answerly-transitions.js на <html data-vt>, поки перехід триває.
   Джерело в старому документі дістає view-transition-name: stage. У новому документі імʼя stage має
   заглушка першого кадру (.st-boot, у кабінеті — .cb-boot), а потім жива сцена (.st-stage чи [data-vt-stage]).
   Зменшений рух — без анімації.
   ════════════════════════════════════════════════════════════════════ */
html { background: #faf9f5; --st-vt-r1: 28px; --st-vt-ease: cubic-bezier(0.2, 0, 0, 1); }
@media (max-width: 599px) { html { --st-vt-r1: 24px; } }

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: var(--st-vt-ease); }
/* «розростання» — повільний старт і довге м'яке приземлення: рух видно, а не стрибок */
::view-transition-group(stage) { animation-duration: 480ms; animation-timing-function: var(--st-vt-ease); }

/* форму сцени малює суцільна темна площина: без розтягнутих знімків і спотворених кутів;
   вміст джерела (текст кнопки, смуга) гасне на самому початку */
html[data-vt="pill"]::view-transition-image-pair(stage),
html[data-vt="band"]::view-transition-image-pair(stage),
html[data-vt="link"]::view-transition-image-pair(stage),
html[data-vt="stage"]::view-transition-image-pair(stage),
html[data-vt="dock"]::view-transition-image-pair(stage) {
  overflow: hidden; background: #0d0d0d; border-radius: var(--st-vt-r1);
  animation: st-vt-shape 480ms var(--st-vt-ease) both;
}
/* з посилання (текст на папері) площина спершу проявляється */
html[data-vt="link"]::view-transition-image-pair(stage) { animation-name: st-vt-shape-link; }
html[data-vt]::view-transition-old(stage) { animation: st-vt-fade 180ms ease-out both; }
/* текст кнопки й посилання не розтягуємо разом із площиною: кнопка гасне миттю, посилання — одразу */
html[data-vt="pill"]::view-transition-old(stage) { animation-duration: 90ms; }
html[data-vt="link"]::view-transition-old(stage) { animation: none; opacity: 0; }
html[data-vt]::view-transition-new(stage) { animation: none; opacity: 0; }
/* жива темна поверхня нової сторінки (ліва панель кабінету) — лише після переходу: доти її малює площина.
   Інакше, коли площина летить з посилання лендінгу, на місці панелі заздалегідь проступає друга, сіра */
html[data-vt] [data-vt-stage] { visibility: hidden; }
/* сцена → сцена і сцена → панель кабінету: вміст попередньої сторінки гасне спокійніше */
html[data-vt="stage"]::view-transition-old(stage), html[data-vt="dock"]::view-transition-old(stage) { animation-duration: 320ms; }
/* назад на лендінг: сцена відступає й гасне, під нею — папір */
html[data-vt="close"]::view-transition-old(stage) { animation: st-vt-close 420ms cubic-bezier(0.4, 0, 1, 1) both; }
/* «Назад» у браузері, лендінг із кешу: сцена згортається в ту кнопку, з якої відкрилась; кнопка проявляється наприкінці */
html[data-vt="return"]::view-transition-group(stage) { animation-duration: 520ms; }
html[data-vt="return"]::view-transition-image-pair(stage) {
  overflow: hidden; background: #0d0d0d; border-radius: var(--st-vt-r0, 22px);
  animation: st-vt-return 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
html[data-vt="return"][data-vt-src="link"]::view-transition-image-pair(stage) { animation-name: st-vt-return-link; }
html[data-vt="return"]::view-transition-old(stage) { animation: st-vt-fade 200ms ease-out both; }
html[data-vt="return"]::view-transition-new(stage) { animation: st-vt-show 180ms ease-in 340ms both; }

@keyframes st-vt-shape { from { border-radius: var(--st-vt-r0, 28px); } to { border-radius: var(--st-vt-r1); } }
@keyframes st-vt-shape-link {
  from { border-radius: var(--st-vt-r0, 10px); background-color: rgba(13, 13, 13, 0); }
  30% { background-color: #0d0d0d; }
  to { border-radius: var(--st-vt-r1); background-color: #0d0d0d; }
}
@keyframes st-vt-return { from { border-radius: var(--st-vt-r1); } to { border-radius: var(--st-vt-r0, 22px); } }
@keyframes st-vt-return-link {
  from { border-radius: var(--st-vt-r1); background-color: #0d0d0d; }
  70% { background-color: #0d0d0d; }
  to { border-radius: var(--st-vt-r0, 10px); background-color: rgba(13, 13, 13, 0); }
}
@keyframes st-vt-fade { to { opacity: 0; } }
@keyframes st-vt-show { from { opacity: 0; } }
@keyframes st-vt-close { to { opacity: 0; transform: scale(0.965); } }