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

   Файл подключается последним, поэтому перекрывает правила 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}to{opacity:1}}
@keyframes sectSlideBack{from{opacity:.55}to{opacity:1}}
@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}
.dash-main.sect-loading{opacity:0}

/* Progress uses its own renderer, but its heading follows the same size and
   reserved illustration geometry as the other cabinet headers. Never let a
   decoded image or flex-wrap push the title onto a later row. */
#dashContent .pgr-heading{flex-wrap:nowrap!important;align-items:center!important}
#dashContent .pgr-heading-copy{min-width:0;flex:1}
#dashContent .pgr-heading h2{font-family:var(--serif);font-size:36px;line-height:1.15;letter-spacing:-.025em}
#dashContent .pgr-heading .sec-art{aspect-ratio:3/2;flex:0 0 30%;width:30%;max-width:300px}
#dashContent .pgr-heading .sec-art img{aspect-ratio:3/2;object-fit:contain;width:100%;height:100%}
@media(max-width:600px){
  #dashContent .pgr-heading{gap:12px;min-height:158px;margin:0 0 14px;padding:12px 0 14px;border-bottom:1px solid var(--line2)}
  #dashContent .pgr-heading h2{font-size:28px!important;line-height:1.15;margin:8px 0;overflow-wrap:anywhere}
  #dashContent .pgr-heading-copy>p:not(.pgr-eyebrow){font-size:11px;line-height:1.6;margin:8px 0 0}
  #dashContent .pgr-heading .sec-art{flex:0 0 34%;width:34%;max-width:130px;align-self:center}
  #dashContent .pgr-heading .pgr-back{font-size:11px;min-height:32px;padding:5px 8px}
}

/* 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}
}