/* ==================== ПЕРЕХОДЫ КАТАЛОГ ⇄ ТОВАР ====================
   Подключается на index.html и product.html. Cross-document View Transitions:
   браузер сам анимирует переход между страницами, фото товара «перелетает»
   из карточки каталога на страницу товара и обратно (имя product-photo —
   у #productImg всегда, у фото карточки — только на время перехода, см.
   assets/js/transitions.js). Браузеры без поддержки (Firefox) переходят как
   обычно, без анимации. */

@view-transition {
    navigation: auto;
}

/* Место под полосу прокрутки зарезервировано всегда. Страница товара сначала
   короткая, а когда из API приходит описание — вырастает, и появляется
   скроллбар. Ширина окна при этом меняется, а на любое изменение размера
   браузер обрывает переход — перелёт «туда» не успевал проиграть */
html {
    scrollbar-gutter: stable;
}

/* Хедер одинаковый на обеих страницах — пусть стоит на месте, а не мигает */
header {
    view-transition-name: site-header;
}

#productImg {
    view-transition-name: product-photo;
}

@keyframes sleng-page-out {
    to {
        opacity: 0;
    }
}

@keyframes sleng-page-in {
    from {
        opacity: 0;
    }
}

@keyframes sleng-page-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

/* Обычный переход между страницами (меню, футер, «О нас»…): старая страница
   быстро гаснет, новая проявляется с лёгким подъёмом, хедер стоит на месте */
::view-transition-old(root) {
    animation: sleng-page-out 0.2s ease both;
}

::view-transition-new(root) {
    animation: sleng-page-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

/* Перелёт фото товара (класс vt-photo ставит transitions.js): старая
   страница уходит, фото летит по пустому экрану, новая страница
   проявляется, только когда фото почти долетело */
html.vt-photo::view-transition-old(root) {
    animation: sleng-page-out 0.25s ease both;
}

html.vt-photo::view-transition-new(root) {
    animation: sleng-page-in 0.4s ease 0.55s both;
}

/* Плавный разгон и плавное торможение — без рывка в начале */
::view-transition-group(product-photo) {
    animation-duration: 0.8s;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
}

/* Фото в каталоге квадратное, на странице товара — нет: без этого картинка
   растягивалась бы по пути, а так — плавно «докадрируется» */
::view-transition-old(product-photo),
::view-transition-new(product-photo) {
    height: 100%;
    object-fit: cover;
    mix-blend-mode: normal;
}

/* Старое фото (из карточки) держим непрозрачным весь перелёт, а новое
   проявляется поверх. Если на новой странице картинка ещё не успела
   загрузиться к первому кадру, новый снимок пустой — при обычном
   кросс-фейде фото растворялось бы на лету и перелёт «не срабатывал» */
::view-transition-old(product-photo) {
    animation: none;
}

@keyframes sleng-photo-in {
    from {
        opacity: 0;
    }
}

::view-transition-new(product-photo) {
    animation: sleng-photo-in 0.8s cubic-bezier(0.45, 0, 0.2, 1) both;
}

/* Режим «Модели»: в карточке фото модели, на странице товара — вырезанная
   вещь на прозрачном фоне. Если держать фото модели под ней, оно
   просвечивает рамкой вокруг вещи — поэтому здесь оно гаснет, пока вещь
   проявляется */
html.vt-photo-swap::view-transition-old(product-photo) {
    animation: sleng-page-out 0.8s cubic-bezier(0.45, 0, 0.2, 1) both;
}

/* EMO-режим, возврат в каталог: летит вся карточка (фон, рамка, наклон),
   поэтому её снимок не кадрируем, а остальные товары появляются почти сразу,
   не дожидаясь, пока карточка долетит */
html.vt-emo::view-transition-new(product-photo) {
    height: auto;
    object-fit: fill;
}

html.vt-emo::view-transition-old(root) {
    animation: sleng-page-out 0.2s ease both;
}

html.vt-emo::view-transition-new(root) {
    animation: sleng-page-in 0.3s ease 0.1s both;
}

/* Галерея товара: старое главное фото плавно перетекает в новое (showPhoto
   в product.js). Страница при этом не мигает — root не анимируем */
html.vt-gallery::view-transition-old(root),
html.vt-gallery::view-transition-new(root) {
    animation: none;
}

html.vt-gallery::view-transition-group(product-photo) {
    animation-duration: 0.35s;
}

html.vt-gallery::view-transition-old(product-photo),
html.vt-gallery::view-transition-new(product-photo) {
    mix-blend-mode: plus-lighter;
}

html.vt-gallery::view-transition-old(product-photo) {
    animation: sleng-page-out 0.35s ease both;
}

html.vt-gallery::view-transition-new(product-photo) {
    animation: sleng-page-in 0.35s ease both;
}

/* Кнопка «Модели / Товары» на главной: фото карточек плавно перетекают из
   одних в другие (script.js). Снимок root при этом НЕ анимируется: у него
   уже есть правила для переходов между страницами (выше), и вместе с
   plus-lighter он давал вспышку, а при быстрых кликах переход отменялся
   целиком. Анимируются только фото карточек (имя model-photo). */
html.vt-model::view-transition-old(root),
html.vt-model::view-transition-new(root) {
    animation: none;
}

/* Переключение «Модели / Товары» (script.js): фото карточек получают имя
   model-photo-N на время перехода, чтобы браузер анимировал именно их, а не
   снимок всей страницы. Имена уникальны — два элемента с одним
   view-transition-name отменяют переход целиком («Snapshot capture failed»),
   и снимаются в finished. */
html.vt-model::view-transition-old(model-photo-0),
html.vt-model::view-transition-new(model-photo-0),
html.vt-model::view-transition-old(model-photo-1),
html.vt-model::view-transition-new(model-photo-1),
html.vt-model::view-transition-old(model-photo-2),
html.vt-model::view-transition-new(model-photo-2),
html.vt-model::view-transition-old(model-photo-3),
html.vt-model::view-transition-new(model-photo-3),
html.vt-model::view-transition-old(model-photo-4),
html.vt-model::view-transition-new(model-photo-4),
html.vt-model::view-transition-old(model-photo-5),
html.vt-model::view-transition-new(model-photo-5),
html.vt-model::view-transition-old(model-photo-6),
html.vt-model::view-transition-new(model-photo-6),
html.vt-model::view-transition-old(model-photo-7),
html.vt-model::view-transition-new(model-photo-7),
html.vt-model::view-transition-old(model-photo-8),
html.vt-model::view-transition-new(model-photo-8),
html.vt-model::view-transition-old(model-photo-9),
html.vt-model::view-transition-new(model-photo-9),
html.vt-model::view-transition-old(model-photo-10),
html.vt-model::view-transition-new(model-photo-10),
html.vt-model::view-transition-old(model-photo-11),
html.vt-model::view-transition-new(model-photo-11) {
    animation-duration: 0.4s;
    animation-timing-function: ease;
    /* Фото товара и модели кадрированы по-разному: «перелёт» из точки в точку
       читался как дёргание. Кросс-фейд с лёгким наплывом — смена кадра. */
    mix-blend-mode: normal;
}

html.vt-model::view-transition-group(model-photo-0),
html.vt-model::view-transition-group(model-photo-1),
html.vt-model::view-transition-group(model-photo-2),
html.vt-model::view-transition-group(model-photo-3),
html.vt-model::view-transition-group(model-photo-4),
html.vt-model::view-transition-group(model-photo-5),
html.vt-model::view-transition-group(model-photo-6),
html.vt-model::view-transition-group(model-photo-7),
html.vt-model::view-transition-group(model-photo-8),
html.vt-model::view-transition-group(model-photo-9),
html.vt-model::view-transition-group(model-photo-10),
html.vt-model::view-transition-group(model-photo-11) {
    animation-duration: 0.4s;
    animation-timing-function: ease;
}

/* Старое фото гаснет, новое проявляется — без «перелёта» из точки в точку:
   фото товара и модели кадрированы по-разному, и морфинг выглядел как
   дёргание. Плавное перетекание по прозрачности читается как смена кадра.
   animation задаём целиком: у ::view-transition-new по умолчанию своя
   анимация браузера, и одно имя без длительности не применялось. */
html.vt-model::view-transition-old(model-photo-0),
html.vt-model::view-transition-old(model-photo-1),
html.vt-model::view-transition-old(model-photo-2),
html.vt-model::view-transition-old(model-photo-3),
html.vt-model::view-transition-old(model-photo-4),
html.vt-model::view-transition-old(model-photo-5),
html.vt-model::view-transition-old(model-photo-6),
html.vt-model::view-transition-old(model-photo-7),
html.vt-model::view-transition-old(model-photo-8),
html.vt-model::view-transition-old(model-photo-9),
html.vt-model::view-transition-old(model-photo-10),
html.vt-model::view-transition-old(model-photo-11) {
    animation: sleng-page-out 0.4s ease both;
}

html.vt-model::view-transition-new(model-photo-0),
html.vt-model::view-transition-new(model-photo-1),
html.vt-model::view-transition-new(model-photo-2),
html.vt-model::view-transition-new(model-photo-3),
html.vt-model::view-transition-new(model-photo-4),
html.vt-model::view-transition-new(model-photo-5),
html.vt-model::view-transition-new(model-photo-6),
html.vt-model::view-transition-new(model-photo-7),
html.vt-model::view-transition-new(model-photo-8),
html.vt-model::view-transition-new(model-photo-9),
html.vt-model::view-transition-new(model-photo-10),
html.vt-model::view-transition-new(model-photo-11) {
    animation: sleng-page-in 0.4s ease both;
}

/* Фото некуда лететь (на новой странице нет карточки этого товара, например
   каталог ещё грузится) — пусть просто быстро гаснет вместе со страницей,
   а не висит на месте весь перелёт */
::view-transition-old(product-photo):only-child {
    animation: sleng-page-out 0.25s ease both;
}

/* Отклик карточки на нажатие (на телефоне hover нет) */
.product-card:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

/* Информация о товаре появляется снизу вверх, по очереди, после фото */
@keyframes sleng-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* Только при переходе из каталога (класс ставит transitions.js) — при прямом
   открытии страницы текст не должен прятаться почти на секунду */
html.vt-arrival .product-info > * {
    animation: sleng-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
    animation-delay: 1.05s;
}
html.vt-arrival .product-info > :nth-child(1) { animation-delay: 0.75s; }
html.vt-arrival .product-info > :nth-child(2) { animation-delay: 0.81s; }
html.vt-arrival .product-info > :nth-child(3) { animation-delay: 0.87s; }
html.vt-arrival .product-info > :nth-child(4) { animation-delay: 0.93s; }
html.vt-arrival .product-info > :nth-child(5) { animation-delay: 0.99s; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
    html.vt-arrival .product-info > * {
        animation: none;
    }
    .product-card:active {
        transform: none;
    }
}