/* Переход между разделами: сдвиг вбок одним слоем + полоска загрузки.

   Файл подключается последним, поэтому перекрывает правила styles.css.
   Ничего оттуда удалять не нужно. */

/* 1. Выключаем прежний каскад.
   Раньше блоки приезжали снизу по очереди, лесенка растягивалась почти на
   две секунды, и при быстром переключении волны накладывались друг на друга.
   Теперь раздел показывается целиком, одним движением. */
#dashContent.anim>*,
#ovTop .ov-mcard,
#dashHello,
#dashDate,
#schBody.sch-enter>*,
.sec-art.art-in,
.ov-hero.art-in .dash-hello,
.ov-hero.art-in .dash-date,
.ov-hero.art-in .ov-hero-pic{animation:none!important}

/* 2. Сам переход.
   Новый раздел въезжает со стороны, в которую вы пошли по меню: вперёд —
   слева направо, назад — наоборот. Шестнадцать пикселей и 0.22 секунды:
   движение читается, но не успевает надоесть. */
@keyframes sectSlideFwd{from{opacity:.55;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes sectSlideBack{from{opacity:.55;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes sectFade{from{opacity:.55}to{opacity:1}}

.dash{overflow-x:clip}                 /* сдвиг не должен давать боковую прокрутку */
/* backwards, а не both: после въезда на разделе не должно оставаться
   transform. Пока он есть, всё position:fixed внутри раздела встаёт не по
   экрану, а по верху страницы (урок на телефоне, переписка, окна). */
.dash-main.sect-in{animation:sectSlideFwd .22s cubic-bezier(.3,.8,.35,1) backwards}
.dash-main.sect-in[data-dir="back"]{animation-name:sectSlideBack}
/* Листают подряд — оставляем только проявление, чтобы экран стоял на месте. */
.dash-main.sect-in.sect-quick{animation-name:sectFade;animation-duration:.13s;animation-timing-function:linear}

/* 3. Карточки внутри разделов.
   У многих блоков есть собственное всплытие при появлении: плитки на сводке,
   карточки учеников и материалов, списки заданий и оплат. Раздел теперь
   въезжает целиком, и каждое такое всплытие запускается поверх него — со
   своей скоростью и своей задержкой. Именно это и читается как рассинхрон.
   Оставляем анимации взаимодействия (окна, меню, шторки), убираем анимации
   появления содержимого. */
.stats .stat,
.ov-grid>.ov-up,
.ov-grid>.ov-side>.ov-card:nth-child(1),
.ov-grid>.ov-side>.ov-card:nth-child(2),
.uc-grid.uc-anim .uc-card,
.uc-empty,
.ma-card,
.tk-empty,
.tk-tablist,
.py-pane,
.prog-pick,
.lz-tabbody,
.sch-weekfade{animation:none!important}

/* 4. Заголовок раздела — часть раздела, а не отдельный номер.
   Раньше заголовок прятался (opacity 0), пока догрузится иллюстрация, и
   всплывал сам по себе уже после того, как раздел встал на место. Два
   разных движения подряд читаются как глюк. Теперь заголовок появляется
   вместе со всем остальным. */
.header-enter-pending .editorial-text,
.header-enter-pending .sec-art img,
.header-enter-pending .ov-hero-pic img{opacity:1}

/* 5. Заглушка «Загрузка…».
   Разделы пишут это слово в контейнер, пока ждут ответ сервера. Показывать
   его незачем: о работе сообщает полоска сверху, а мигающая надпись на
   пол-экрана читается как рывок. */
#dashContent.sect-stub{opacity:0}

/* 6. Полоска загрузки.
   Разделу нужны данные с сервера. Без полоски это время читается как
   зависание: нажатие есть, отклика нет. Полоска отвечает мгновенно. */
.sect-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  pointer-events:none;opacity:0;transition:opacity .2s linear}
.sect-bar.on{opacity:1}
.sect-bar i{display:block;height:100%;width:8%;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,#5e8068,#3f5a48);transition:width .55s cubic-bezier(.1,.7,.3,1)}
.sect-bar.on i{width:78%}
.sect-bar.done i{width:100%;transition:width .15s linear}

@media (prefers-reduced-motion:reduce){
  .dash-main.sect-in{animation:none!important}
  .sect-bar i{transition:none}
}