/* ==========================================================================
   ПРОЦЕСС V3 — реальный таймлайн (#timeline)
   --------------------------------------------------------------------------
   Тёмное полотно, крупный заголовок, шкала на 15 дней. У каждого этапа
   своя колонка (вдвое шире прежней) и полоса работ разной длины; под ней —
   мини-таймлайн подэтапов: чипы идут по реальному порядку, в несколько
   рядов и с перекрытием. Этапы перекрываются между собой.
   ========================================================================== */

:root{
  --tl-yellow:#ffffff;
  --tl-ink:#101013;
  --tl-line:rgba(255,255,255,.1);
  --tl-label:320px;
}

.tl3{
  position:relative;isolation:isolate;overflow:hidden;
  background:#0b0b0e;color:#fff;
  padding:92px 0 88px;
}
.tl3 .container{position:relative;z-index:1;padding-inline:56px}
.tl3::before{
  content:"";position:absolute;left:50%;top:-260px;width:900px;height:620px;z-index:0;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.1),transparent 66%);
  filter:blur(20px);
}

/* ---------- крупный заголовок ---------- */
.tl3-title{
  max-width:16ch;
  font-family:var(--display);font-weight:600;
  font-size:clamp(46px,6.2vw,92px);line-height:.94;letter-spacing:-.05em;
}
.tl3-title em{font-style:normal;color:var(--tl-yellow)}

/* ---------- доска таймлайна ---------- */
.tl3-board{margin-top:52px}
.tl3-axis{
  display:grid;grid-template-columns:repeat(15,1fr);
  margin-left:var(--tl-label);padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.tl3-axis span{
  font:500 9.5px/1 var(--site-font);letter-spacing:.04em;
  color:rgba(255,255,255,.3);text-align:center;
}
.tl3-axis span:nth-child(1),
.tl3-axis span:nth-child(15){color:rgba(255,255,255,.55)}

.tl3-lane{
  position:relative;display:grid;grid-template-columns:var(--tl-label) minmax(0,1fr);
  padding:10px 0;
}

/* колонка этапа: вдвое шире, тексты вдвое крупнее */
.tl3-head{position:relative;z-index:2;padding-right:0}
.tl3-head b{
  display:block;font:600 22px/1 var(--site-font);letter-spacing:.06em;
  color:var(--tl-yellow);
}
.tl3-head h3{
  width:100%;margin-top:6px;
  font-family:var(--display);font-weight:600;
  font-size:clamp(44px,3.35vw,60px);line-height:1;letter-spacing:-.045em;
}
.tl3-range{
  display:inline-flex;margin-top:10px;padding:5px 9px;border-radius:7px;
  background:rgba(255,255,255,.06);
  font:500 18px/1 var(--site-font);letter-spacing:.04em;color:rgba(255,255,255,.6);
}

.tl3-track{
  position:relative;
  display:grid;grid-template-columns:repeat(15,1fr);
  row-gap:12px;align-content:start;
  background-image:linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:calc(100% / 15) 100%;
}
/* закрывающая вертикальная полоска после 15-го дня — в каждом из 4 этапов */
.tl3-track::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:1px;
  background:rgba(255,255,255,.2);pointer-events:none;
}

.tl3-bar{
  /* название и дни идут одной строкой, поэтому полоса — компактная плашка */
  grid-row:1;display:flex;align-items:stretch;min-width:0;min-height:0;overflow:hidden;
  border-radius:11px;background:#fff;color:var(--tl-ink);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.tl3-seg{
  display:flex;flex-direction:row;align-items:center;gap:6px;min-width:0;
  padding:8px 10px;border-left:1px solid rgba(16,16,19,.09);
}
.tl3-seg:first-child{border-left:0}
/* скруглённые концы полосы не должны съедать текст первого и последнего сегмента */
.tl3-seg:first-child{padding-left:14px}
.tl3-seg:last-child{padding-right:14px}
.tl3-seg b{
  /* одна строка: название тянется, дни прижаты к правому краю */
  flex:1 1 auto;min-width:0;
  font-size:clamp(11px,.86vw,12.5px);font-weight:600;line-height:1.2;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl3-seg i{
  flex:none;align-self:center;
  padding:2px 6px;border-radius:6px;background:rgba(16,16,19,.07);
  font:600 clamp(8.5px,.66vw,9.5px)/1.3 var(--site-font);letter-spacing:.02em;font-style:normal;
  color:rgba(16,16,19,.58);white-space:nowrap;
}

/* ---------- мини-таймлайн подэтапов: строки-ступеньки ---------- */
.tl3-chips{
  grid-row:2;display:flex;flex-direction:column;align-items:flex-start;
  gap:6px;width:100%;margin-top:10px;padding-left:8px;
  position:relative;z-index:2;
}
.tl3-chiprow{display:flex;align-items:center;gap:7px;margin-left:calc(var(--r,0) * 42px)}
.tl3-lane:nth-of-type(4) .tl3-chiprow{margin-left:calc(var(--r,0) * 14px)}
/* «Разработка» идёт в 4 строки: чипы того же размера, что и везде,
   поэтому ряды короче и шаг ступенек меньше, иначе они вылезают за доску */
/* «Запуск» идёт в 2 строки по 2 чипа: ступеньки почти без сдвига,
   чтобы пара чипов не выходила за 15-й день */
.tl3-lane:nth-of-type(5) .tl3-chiprow{margin-left:calc(var(--r,0) * 10px)}
/* единый размер чипов на всех этапах: 11.5px/7x11 на десктопе,
   на более узких экранах чипы сжимаются все вместе, чтобы ряды
   не вылезали за правый край доски */
.tl3-chip{
  position:relative;display:inline-flex;flex:none;align-items:center;
  gap:clamp(5px,.42vw,6px);white-space:nowrap;
  padding:clamp(6px,.49vw,7px) clamp(8px,.76vw,11px);border-radius:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  color:var(--tl-yellow);font:600 clamp(10px,.8vw,11.5px)/1.2 var(--site-font);
  /* гашение после волны — заметно быстрее разгорания */
  transition:
    background 1.2s ease,
    color 1.2s ease,
    border-color 1.2s ease,
    box-shadow 1.2s ease;
}
.tl3-chip em{
  font-style:normal;font-weight:600;
  /* наследует цвет чипа, поэтому текст плавно меняет тон вместе с заливкой */
  color:inherit;
}

/* подсветка поочерёдно, от первого чипа к последнему на всех этапах;
   очередь ведёт js/sections.js — после последнего все гаснут одновременно */
.tl3-chip.is-lit{
  z-index:3;
  background:var(--tl-yellow);border-color:var(--tl-yellow);color:var(--tl-ink);
  box-shadow:0 8px 20px rgba(255,255,255,.22);
  /* разгорание как у лампочки: от тусклого до полной яркости ~4 секунды,
     заливка и рамка доходят чуть раньше, свечение разгорается позже всех */
  transition:
    background 4s cubic-bezier(.33,.05,.3,1),
    color 3.6s cubic-bezier(.33,.05,.3,1),
    border-color 3.6s cubic-bezier(.33,.05,.3,1),
    box-shadow 4.6s cubic-bezier(.33,.05,.3,1);
}

/* ---------- адаптив ---------- */
/* узкие полосы: дни идут без плашки, название на шаг мельче — иначе
   в двухдневном блоке строка «название + дни» не помещается целиком */
@media (min-width:1181px) and (max-width:1340px){
  .tl3-seg{padding:8px 7px;gap:4px}
  .tl3-seg:first-child{padding-left:9px}
  .tl3-seg:last-child{padding-right:9px}
  .tl3-seg b{font-size:10.5px}
  .tl3-seg i{padding:0;background:none;font-size:9px;letter-spacing:0}
}
@media (max-width:1180px){
  .tl3 .container{padding-inline:28px}
  .tl3-axis{margin-left:0}
  .tl3-lane{grid-template-columns:1fr;gap:18px}
  .tl3-track{overflow-x:auto;grid-template-columns:repeat(15,72px)}
  .tl3-track::after{display:none}
  .tl3-axis{grid-template-columns:repeat(15,72px);overflow-x:auto}
  .tl3-head{padding-right:0}
}
@media (max-width:760px){
  .tl3{padding:56px 0}
  .tl3-title{font-size:40px}
  .tl3-head h3{font-size:30px}
  .tl3-head p{font-size:17px}
  .tl3-head b{font-size:18px}
  .tl3-range{font-size:14px}
  .tl3-chip{font-size:10.5px;padding:7px 10px}
  .tl3-seg{padding:7px 11px}
  .tl3-seg b{font-size:12px}
  .tl3-seg i{font-size:9px;padding:2px 6px}
}
@media (prefers-reduced-motion:reduce){
  .tl3-chip,
  .tl3-chip.is-lit{transition:none}
}