/* Таймлайн резюме на телефоне: залипающая панель вместо длинной ленты.

   Приём тот же, что в блоке «What they said» на референсе: обёртка растянута
   на несколько экранов, внутри неё панель с position: sticky, а карточки
   сменяют друг друга по мере прокрутки. Высоту обёртки и смену активной
   карточки считает assets/js/timeline-sticky.js.

   Десктоп не затронут: пока у обёртки нет класса .tls-on, сцена объявлена
   display: contents — она исчезает из раскладки, и карточки остаются
   прямыми детьми .timelinewrapper, как было. */

/* Сцена без режима залипания — прозрачная для раскладки */
.tls__stage {
  display: contents;
}

/* Шкала прогресса нужна только в залипающем режиме */
.tls__rail {
  display: none;
}

.timelinewrapper.tls-on {
  /* высоту (N экранов) проставляет JS инлайном */
  align-items: stretch;
  position: relative;
  width: 100%;
}

.timelinewrapper.tls-on .tls__stage {
  display: block;
  /* сцена начинается под заголовком раздела: он приклеен сверху и остаётся
     на экране, поэтому панель замирает в виде «заголовок + шкала + карточка».
     Высоту заголовка меряет скрипт и кладёт в --head-h */
  height: calc(100svh - var(--head-h, 0px));
  overflow: hidden;
  position: sticky;
  top: var(--head-h, 0px);
}

/* старая полоса прогресса — фиксированная на весь экран, в залипающем
   режиме она висела бы поверх карточек; её роль берёт на себя .tls__rail */
.timelinewrapper.tls-on .timeline-progress {
  display: none;
}

/* --- шкала ---------------------------------------------------------------- */
.timelinewrapper.tls-on .tls__rail {
  align-items: center;
  display: flex;
  gap: 12px;
  left: 0;
  padding: 24px 20px 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.tls__line {
  background-color: #ffffff2e;
  flex: 1 1 auto;
  height: 1px;
  position: relative;
}

.tls__dot {
  background-color: var(--white, #fff);
  border-radius: 50%;
  height: 9px;
  left: 0;
  margin-left: -4.5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.25s ease-out;
  width: 9px;
}

.tls__count {
  color: #ffffff7a;
  flex: none;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}

.tls__count b {
  color: var(--white, #fff);
  font-weight: 400;
}

/* --- карточки ------------------------------------------------------------

   Карточки лежат друг на друге и сменяются проявлением: своей подложки
   у них нет, это просто текст на фоне раздела. Отступ сверху большой —
   между шкалой и датой нужен воздух. */
.timelinewrapper.tls-on .timeline-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  inset: 0;
  /* от верхней границы, а не по центру: карточки разной высоты, и при
     центровке дата с названием прыгали от слайда к слайду */
  justify-content: flex-start;
  opacity: 0;
  /* снизу больше: там висит закреплённая панель навигации — она занимает
     83px от нижнего края, плюс воздух. На коротком экране поле меньше:
     иначе самой длинной карточке не хватает места */
  padding: clamp(48px, 8svh, 96px) 20px clamp(92px, 13svh, 110px);
  position: absolute;
  transform: translateY(18px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  width: 100%;
}

.timelinewrapper.tls-on .timeline-item.is-active {
  opacity: 1;
  transform: none;
}

/* кружок на вертикальной линии — его работу делает точка на шкале */
.timelinewrapper.tls-on .timeline-center {
  display: none;
}

/* в ленте дата и кружок липли к середине экрана; внутри карточки
   залипать уже некуда, а position: sticky мешает выравниванию */
/* Даты набраны через <br> («2024 <br> - <br> 2026») — в ленте на десктопе
   это три строки по узкой колонке, а в карточке на телефоне место есть,
   и диапазон должен читаться одной строкой. display: none у <br> убирает
   сам перенос, строки склеиваются в «2024-2026». */
.timelinewrapper.tls-on .timeline-date-text br {
  display: none;
}

.timelinewrapper.tls-on .timeline-date-text {
  /* Кегль привязан к высоте экрана, а не к ширине: карточка должна
     уместиться целиком, а узкое место тут именно высота. На коротком
     телефоне текст сам становится мельче. */
  font-size: clamp(18px, 3.2svh, 28px);
  line-height: 1.1;
  position: static;
  text-align: left;
}

.timelinewrapper.tls-on .timeline-text {
  font-size: clamp(14px, 2.1svh, 18px);
  line-height: 1.35;
}

.timelinewrapper.tls-on .timeline-left,
.timelinewrapper.tls-on .timeline-right {
  width: 100%;
}

/* При выключенных анимациях карточки сменяются без проявления:
   залипание остаётся, движение — нет. */
/* При выключенных анимациях карточки сменяются без проявления:
   залипание остаётся, движение — нет. */
@media (prefers-reduced-motion: reduce) {
  .timelinewrapper.tls-on .timeline-item {
    transform: none;
    transition: none;
  }

  .tls__dot {
    transition: none;
  }
}

/* --- стопка разделов -----------------------------------------------------

   Три раздела резюме наезжают друг на друга: предыдущий стоит на месте,
   следующий выезжает снизу и накрывает его целиком.

   Как это держится. Внутри каждого раздела есть закреплённая панель
   (у Experience и Achievments это сцена таймлайна, у Education — сама
   секция). Раздел выше своей панели на один экран — этот «хвост» нужен,
   чтобы панель оставалась приклеенной, пока её накрывают. Следующий
   раздел начинается на экран раньше (отрицательный margin) и с большим
   z-index, поэтому и наезжает сверху.

   Высоту разделов с таймлайном ставит скрипт, высоту Education — правило
   ниже. Полная прокрутка раздела от этого не меняется: лишний экран
   хвоста съедается отрицательным отступом следующего. */
@media screen and (max-width: 767px) {
  .rstack {
    /* одно скругление на все панели: и на тёмные разделы, и на белую
       карточку Education. В общем CSS у карточки свои 72px — они заметно
       крупнее всего остального на странице */
    --panel-radius: 32px;

    position: relative;
  }

  .rstack__item {
    background-color: var(--resume-bg, #121212);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    position: relative;
  }

  .rstack__item:nth-child(1) {
    z-index: 1;
  }

  .rstack__item:nth-child(2) {
    /* экран под содержимое плюс экран хвоста */
    min-height: 200svh;
    z-index: 2;
  }

  .rstack__item:nth-child(3) {
    z-index: 3;
  }

  /* каждый следующий стартует на экран раньше — тем и накрывает.
     Ни скругления, ни тени: фон у разделов одинаковый, и наезд не должен
     читаться как отдельная тёмная плашка — видимой «плашкой» выезжает
     только белая карточка Education внутри своего раздела. */
  .rstack__item + .rstack__item {
    margin-top: -100svh;
  }

  /* Заголовок раздела приклеен сверху вместе со сценой. Скругление ему
     нужно своё: пока он приклеен, именно его верхний край виден на экране,
     а скруглённые углы самого раздела давно уехали вверх. */
  .rstack__item > .section-42 {
    background-color: var(--resume-bg, #121212);
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    padding: 28px 0 24px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  /* у Education своей закреплённой панели не было — делаем секцию ею.

     Верхнее поле секции (220px в общем CSS) убираем, а белую карточку
     растягиваем на весь экран: иначе над ней ехала полоса тёмного фона
     секции, и выглядело это как лишний чёрный кусок между разделами. */
  .rstack__item:nth-child(2) .section-44 {
    min-height: 100svh;
    padding-top: 0;
    position: sticky;
    top: 0;
  }

  /* фон у раздела убираем: белая карточка и есть его панель, а тёмная
     подложка торчала бы из-под её скруглённых углов */
  .rstack__item:nth-child(2) {
    background-color: transparent;
  }

  .rstack__item:nth-child(2) .div-block-77 {
    border-radius: var(--panel-radius) var(--panel-radius) 0 0;
    min-height: 100svh;
    padding-top: clamp(80px, 14svh, 160px);
  }
}