/* ============================================================
 * transitions.css — cross-document View Transitions API.
 *
 * Активирует плавные переходы между страницами без JS. Браузер
 * сам делает снимки старой/новой страницы и проигрывает наши
 * keyframes. Работает в Chrome 126+, Safari 18+, Firefox (флаг).
 * В неподдерживаемых браузерах — обычная навигация без анимации.
 *
 * Сценарий перехода:
 *   1. Старая страница: блюр + uplift + fade-out
 *   2. Новая страница: clip-curtain reveal сверху вниз + лёгкий
 *      slide-up + fade-in
 *   3. Брэнд-логотип (named) и nav-pill — плавный crossfade,
 *      не «прыгают» как остальной контент
 * ============================================================ */

@view-transition {
  navigation: auto;
}

/* Резервируем место под scrollbar, чтобы при смене страницы content
 * не сдвигался горизонтально — главная причина «прыжка». */
html { scrollbar-gutter: stable; }

/* ---------- Корневой переход ----------
 * Сценарий «stack-and-rise»:
 *   • Старая страница НЕ исчезает мгновенно — стоит на месте,
 *     медленно блюрится и слегка проседает в depth (scale + brightness)
 *   • Новая страница приезжает снизу как поднимающаяся карточка с
 *     border-radius и тенью под ней, накрывает старую сверху
 *   • Border-radius и тень распускаются в финальные 0, когда страница
 *     дошла до места — feel iOS sheet presentation
 *   • Общая длительность ~1.1с — медленнее, но без рывков
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  mix-blend-mode: normal;
}

/* IRIS REVEAL FROM CLICK POINT
 * Новая страница раскрывается через расширяющийся круг с эпицентром в
 * точке клика (--vt-x / --vt-y, заданы JS из sessionStorage).
 * Без клика (back/forward/address bar) — раскрытие из центра viewport.
 * По границе радужки — cyan halo через drop-shadow.
 *
 * Старая страница стоит на месте, лёгкий blur+brightness — пока её
 * физически не накроет новая. Никакого slide/jump. */

::view-transition-old(root) {
  animation-name: vt-old-stay;
  animation-duration: 1100ms;
  z-index: 1;
}

::view-transition-new(root) {
  animation-name: vt-iris-reveal;
  animation-duration: 1100ms;
  z-index: 2;
}

/* Старая: тихо «отодвигается в глубину» под радужкой новой */
@keyframes vt-old-stay {
  0%   { opacity: 1;    transform: scale(1);     filter: blur(0)  brightness(1); }
  50%  { opacity: 0.85; transform: scale(0.99);  filter: blur(3px) brightness(0.92); }
  100% { opacity: 0;    transform: scale(0.96);  filter: blur(14px) brightness(0.7); }
}

/* Новая: clip-path circle 0 → 150vmax из точки клика.
 * drop-shadow рисует cyan halo на видимой границе радужки. */
@keyframes vt-iris-reveal {
  0% {
    clip-path: circle(0px at var(--vt-x, 50vw) var(--vt-y, 50vh));
    transform: scale(1.04);
    filter: blur(4px) brightness(1.08)
            drop-shadow(0 0 40px rgba(34, 211, 238, 0.55))
            drop-shadow(0 0 80px rgba(34, 211, 238, 0.35));
  }
  50% {
    transform: scale(1.01);
    filter: blur(1px) brightness(1.03)
            drop-shadow(0 0 60px rgba(34, 211, 238, 0.4))
            drop-shadow(0 0 120px rgba(34, 211, 238, 0.2));
  }
  100% {
    clip-path: circle(150vmax at var(--vt-x, 50vw) var(--vt-y, 50vh));
    transform: scale(1);
    filter: blur(0) brightness(1)
            drop-shadow(0 0 0 transparent);
  }
}

/* ---------- Sticky nav-pill: НЕ анимируется ----------
 * Шапка одинаковая на всех страницах — пусть просто стоит на месте.
 * view-transition-name выделяет nav в отдельный snapshot-группу
 * (чтобы он не попадал в iris-reveal root'а), а animation: none
 * глушит UA-default-crossfade. Получаем мгновенную замену старого
 * snapshot'а нового — визуально шапка стоит как влитая. */
.site-nav {
  view-transition-name: site-nav;
}
::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- Reduced motion: отключаем анимации, переход мгновенный ---------- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(site-nav),
  ::view-transition-new(site-nav) {
    animation: none !important;
  }
}