/* ===========================================================
   WERK v2 — анимации переходов между экранами
   Только под флагом v2.transitions (html[data-v2-flags~="transitions"]).
   Движок: public/core/v2-transitions.js
   Старый экран трясётся → улетает влево; новый влетает справа,
   ВНАХЛЁСТ (оба position:absolute поверх друг друга — без разрыва).
   =========================================================== */

/* Гасим премиум-фейд v2-premium.css `.screen.active{animation:v2-section-fade-in}`
   (он включается при data-v2-active=1). Иначе он конкурирует с нашими анимациями
   и перезапускается при снятии класса. Тем самым анимациями экранов под флагом
   управляют ТОЛЬКО классы перехода ниже.
   Эта строка объявлена ВЫШЕ .v2-enter: при равной специфичности (0,3,1) во время
   перехода побеждает позже объявленный .v2-enter, а после снятия класса остаётся
   animation:none (без повторного фейда). */
html[data-v2-flags~="transitions"] .screen.active {
    animation: none;
}

/* Уходящий экран: держим видимым поверх и улетаем влево.
   У него уже снят .active (showScreen переключил), поэтому возвращаем display. */
html[data-v2-flags~="transitions"] .screen.v2-leaving {
    display: flex !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    animation: v2ScreenLeave 0.52s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}

/* Входящий экран: влетает справа с задержкой (пока старый трясётся) */
html[data-v2-flags~="transitions"] .screen.v2-enter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 7;
    animation: v2ScreenEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

@keyframes v2ScreenLeave {
    0%   { transform: none;                              opacity: 1; }
    10%  { transform: translateX(-9px) rotate(-0.5deg); }
    24%  { transform: translateX(9px)  rotate(0.5deg); }
    38%  { transform: translateX(-7px); }
    52%  { transform: translateX(7px); }
    66%  { transform: translateX(-4px);                 opacity: 1; }
    100% { transform: translateX(-115%) rotate(-2deg);  opacity: 0; }
}
@keyframes v2ScreenEnter {
    0%   { transform: translateX(70%);  opacity: 0; }
    100% { transform: none;             opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-v2-flags~="transitions"] .screen.v2-leaving,
    html[data-v2-flags~="transitions"] .screen.v2-enter {
        animation: none;
    }
    html[data-v2-flags~="transitions"] .screen.v2-leaving { display: none !important; }
}