/* ACODC — плавные переходы.
   1) Между страницами: View Transitions API (Chrome, Edge, Safari 18+): старая страница уходит с размытием,
      новая проявляется; логотип остаётся на месте; нажатая кнопка «перетекает» в карточку формы,
      а карточки входа и регистрации перетекают друг в друга.
   2) Где API нет: мягкое затухание страницы перед переходом и проявление после (transitions.js).
   3) Внутри страницы: плавная прокрутка к разделам и «волна» от нажатия на кнопку. */

@view-transition { navigation: auto; }

:root { --vt-ease: cubic-bezier(.22, 1, .36, 1); }

/* вся страница */
::view-transition-old(root) { animation: vt-out .32s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .6s var(--vt-ease) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(8px); } }

/* логотип не мигает при переходе */
header .nav__logo, .auth__logo { view-transition-name: brand; }
::view-transition-group(brand) { animation-duration: .6s; animation-timing-function: var(--vt-ease); }

/* кнопка → карточка формы, карточка входа ↔ карточка регистрации */
.auth__card { view-transition-name: auth-card; }
.seg { view-transition-name: auth-seg; }
::view-transition-group(auth-card), ::view-transition-group(auth-seg) { animation-duration: .7s; animation-timing-function: var(--vt-ease); }
::view-transition-old(auth-card) { animation: vt-fade-out .25s ease both; }
::view-transition-new(auth-card) { animation: vt-fade-in .5s .12s var(--vt-ease) both; }
::view-transition-old(auth-card), ::view-transition-new(auth-card) { height: 100%; object-fit: cover; overflow: clip; border-radius: 32px; }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }

/* содержимое карточки и сцены — отдельными слоями, чтобы ехать по направлению перехода */
.auth__card h2 { view-transition-name: auth-title; }
.auth__card > p { view-transition-name: auth-lead; }
.auth__card .form { view-transition-name: auth-form; }
.auth__trust { view-transition-name: auth-trust; }
.auth__brand h1 { view-transition-name: brand-title; }
.auth__brand > p:not(.auth__foot) { view-transition-name: brand-lead; }
::view-transition-group(auth-title), ::view-transition-group(auth-lead), ::view-transition-group(auth-form),
::view-transition-group(auth-trust), ::view-transition-group(brand-title), ::view-transition-group(brand-lead) {
  animation-duration: .7s; animation-timing-function: var(--vt-ease);
}
::view-transition-image-pair(auth-form), ::view-transition-image-pair(auth-title), ::view-transition-image-pair(auth-lead) { overflow: clip; }

/* Вход → Регистрация: старое уезжает влево, новое приезжает справа */
html:active-view-transition-type(to-signup)::view-transition-old(auth-title),
html:active-view-transition-type(to-signup)::view-transition-old(auth-lead),
html:active-view-transition-type(to-signup)::view-transition-old(auth-form) { animation: slide-out-left .32s cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(to-signup)::view-transition-new(auth-title) { animation: slide-in-right .6s .06s var(--vt-ease) both; }
html:active-view-transition-type(to-signup)::view-transition-new(auth-lead)  { animation: slide-in-right .6s .1s var(--vt-ease) both; }
html:active-view-transition-type(to-signup)::view-transition-new(auth-form)  { animation: slide-in-right .65s .14s var(--vt-ease) both; }

/* Регистрация → Вход: зеркально */
html:active-view-transition-type(to-login)::view-transition-old(auth-title),
html:active-view-transition-type(to-login)::view-transition-old(auth-lead),
html:active-view-transition-type(to-login)::view-transition-old(auth-form) { animation: slide-out-right .32s cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(to-login)::view-transition-new(auth-title) { animation: slide-in-left .6s .06s var(--vt-ease) both; }
html:active-view-transition-type(to-login)::view-transition-new(auth-lead)  { animation: slide-in-left .6s .1s var(--vt-ease) both; }
html:active-view-transition-type(to-login)::view-transition-new(auth-form)  { animation: slide-in-left .65s .14s var(--vt-ease) both; }

/* заголовок сцены слева: старый уходит вверх, новый поднимается снизу */
html:active-view-transition-type(to-signup, to-login)::view-transition-old(brand-title),
html:active-view-transition-type(to-signup, to-login)::view-transition-old(brand-lead) { animation: rise-out .35s cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(to-signup, to-login)::view-transition-new(brand-title) { animation: rise-in .7s .1s var(--vt-ease) both; }
html:active-view-transition-type(to-signup, to-login)::view-transition-new(brand-lead)  { animation: rise-in .7s .18s var(--vt-ease) both; }

/* с главной: форма всплывает снизу */
html:active-view-transition-type(from-home)::view-transition-new(auth-form) { animation: rise-in .7s .18s var(--vt-ease) both; }
html:active-view-transition-type(from-home)::view-transition-new(auth-title) { animation: rise-in .6s .1s var(--vt-ease) both; }

@keyframes slide-out-left  { to   { opacity: 0; transform: translateX(-48px); filter: blur(4px); } }
@keyframes slide-out-right { to   { opacity: 0; transform: translateX(48px);  filter: blur(4px); } }
@keyframes slide-in-right  { from { opacity: 0; transform: translateX(56px);  filter: blur(6px); } }
@keyframes slide-in-left   { from { opacity: 0; transform: translateX(-56px); filter: blur(6px); } }
@keyframes rise-out { to   { opacity: 0; transform: translateY(-24px); filter: blur(6px); } }
@keyframes rise-in  { from { opacity: 0; transform: translateY(28px);  filter: blur(6px); } }

/* каскад полей после перехода: только сдвиг, текст виден всегда */
html.auth-arrived .auth__card .form > * { animation: field-in .6s var(--vt-ease) backwards; }
html.auth-arrived .auth__card .form > *:nth-child(2) { animation-delay: .05s; }
html.auth-arrived .auth__card .form > *:nth-child(3) { animation-delay: .1s; }
html.auth-arrived .auth__card .form > *:nth-child(4) { animation-delay: .15s; }
html.auth-arrived .auth__card .form > *:nth-child(5) { animation-delay: .2s; }
html.auth-arrived .auth__card .form > *:nth-child(6) { animation-delay: .25s; }
html.auth-arrived .auth__card .form > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes field-in { from { transform: translateY(12px); } }

/* запасной вариант без View Transitions */
html.pt-ready body { animation: pt-in .55s var(--vt-ease) both; }
html.pt-leave body { animation: pt-out .28s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes pt-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }
@keyframes pt-out { to { opacity: 0; transform: translateY(-6px); filter: blur(6px); } }

/* плавная прокрутка к разделам под фиксированной шапкой */
html { scroll-behavior: smooth; scroll-padding-top: 72px; }

/* «волна» от нажатия */
.btn, .seg a, .auth__top a { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); opacity: .55;
  background: radial-gradient(circle, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 70%);
  animation: ripple .7s var(--vt-ease) forwards; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* подсветка раздела, к которому прокрутили */
.section-arrive { animation: arrive 1.2s var(--vt-ease); }
@keyframes arrive { from { box-shadow: inset 0 0 0 9999px rgb(91 140 255 / .06); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  html.pt-ready body, html.pt-leave body, .ripple, .section-arrive { animation: none !important; }
}