/*
 * Страница «О нас» — история бренда, которую листают.
 * Каждая глава: номер на линии времени, рисунок и короткий текст.
 * Рисунки прочерчиваются линией, когда глава доезжает до экрана
 * (класс .is-visible ставит js/reveal.js).
 *
 * Движение — transform и opacity, плюс прочерчивание контура через
 * stroke-dashoffset: оно идёт один раз и только на видимых главах,
 * поэтому прокрутка не тормозит.
 */

/* ---------- ЛЕНТА ГЛАВ ---------- */
.story { position: relative; display: grid; gap: clamp(26px, 4vw, 48px); margin-top: clamp(20px, 4vw, 36px); }

/* Одна сплошная линия на всю историю. Раньше линия рисовалась внутри каждой
   главы и в промежутках между ними пропадала — лента распадалась. */
.story::before {
  content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 8px, transparent 8px 17px);
}

.chapter {
  --ch: var(--accent);
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(14px, 2.5vw, 30px);
  align-items: start;
}
/* Колонки расставляем явно. С order раскладка «через одну» ломалась:
   картинка занимала колонку линии времени, и точки съезжали в середину. */
/* Строку задаём явно вместе с колонкой. Только с колонками автоматика
   раскладки не возвращается назад: у перевёрнутых глав текст занимал третью
   колонку, а картинке приходилось уезжать во вторую строку — она проваливалась
   на треть экрана ниже текста. */
.chapter__rail { grid-column: 1; grid-row: 1; position: relative; align-self: start; display: grid; justify-items: center; }
.chapter__body { grid-column: 2; grid-row: 1; }
.chapter__art  { grid-column: 3; grid-row: 1; }
.chapter--flip .chapter__body { grid-column: 3; grid-row: 1; }
.chapter--flip .chapter__art  { grid-column: 2; grid-row: 1; }

.chapter__mark {
  position: relative; z-index: 1;
  width: 46px; height: 46px; margin-top: 4px;
  display: grid; place-items: center;
  font-family: var(--head); font-weight: 600; font-size: 17px;
  color: var(--ch);
  background: #0D0D10;
  border: 2px solid var(--ch); border-radius: 50%;
}
.chapter.is-visible .chapter__mark { animation: markPop .5s cubic-bezier(.2,1.3,.4,1) backwards; }
@keyframes markPop { from { transform: scale(.5); opacity: 0; } }

/* тонкое кольцо расходится от точки — глава «зажигается» */
.chapter__mark::after {
  content: ''; position: absolute; inset: -6px;
  border: 1px solid var(--ch); border-radius: 50%; opacity: 0;
}
.chapter.is-visible .chapter__mark::after { animation: markRing 2.6s ease-out .35s infinite; }
@keyframes markRing {
  0%   { transform: scale(.75); opacity: .7; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { opacity: 0; }
}

/* ---------- ТЕКСТ ГЛАВЫ ---------- */
.chapter__body { padding: 4px 0; }
.chapter__kicker {
  margin: 0 0 6px; font-family: var(--head); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ch);
}
.chapter__title {
  margin: 0 0 10px; font-family: var(--head); font-weight: 600;
  font-size: clamp(21px, 3vw, 32px); line-height: 1.08; text-transform: uppercase;
}
.chapter__text { margin: 0 0 10px; color: #D2D2D6; font-size: 15px; line-height: 1.6; }
.chapter__text:last-child { margin-bottom: 0; }
.chapter__text b { color: #fff; }

.chapter.is-visible .chapter__kicker { animation: chapterUp .55s cubic-bezier(.2,.7,.3,1) backwards; }
.chapter.is-visible .chapter__title  { animation: chapterUp .55s cubic-bezier(.2,.7,.3,1) .07s backwards; }
.chapter.is-visible .chapter__text   { animation: chapterUp .55s cubic-bezier(.2,.7,.3,1) .14s backwards; }
@keyframes chapterUp { from { opacity: 0; transform: translateY(12px); } }

/* ---------- РИСУНОК ГЛАВЫ ---------- */
.chapter__art {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  color: var(--ch);
  border: 1px solid color-mix(in srgb, var(--ch) 30%, transparent);
  border-radius: 4px;
  background:
    radial-gradient(90% 70% at 50% 115%, color-mix(in srgb, var(--ch) 12%, transparent), transparent 70%),
    #0E0E12;
  transition: transform .25s ease, border-color .25s ease, box-shadow .3s ease;
}
/* штриховка, чтобы кадр не был плоским */
.chapter__art::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(125deg, rgba(255,255,255,.04) 0 1px, transparent 1px 15px);
}
.chapter__art:hover { transform: translateY(-4px); border-color: var(--ch); box-shadow: 0 18px 44px -26px var(--ch); }
.chapter__art svg { position: relative; width: 82%; height: auto; }

.chapter.is-visible .chapter__art { animation: artSlide .65s cubic-bezier(.2,.7,.3,1) backwards; }
.chapter--flip.is-visible .chapter__art { animation-name: artSlideFlip; }
@keyframes artSlide     { from { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes artSlideFlip { from { opacity: 0; transform: translateX(-24px) scale(.97); } }

/* линия прочерчивается: pathLength="100" в разметке делает длину одинаковой */
.stroke { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.stroke--thin { stroke-width: 2; opacity: .55; }
.fill { fill: currentColor; }

.draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.chapter.is-visible .draw { animation: drawOn 1.1s ease .2s forwards; }
.draw--2 { animation-delay: .45s !important; }
.draw--3 { animation-delay: .7s  !important; }
@keyframes drawOn { to { stroke-dashoffset: 0; } }

.pop { opacity: 0; }
.chapter.is-visible .pop { animation: popIn .5s cubic-bezier(.2,1.3,.4,1) 1.1s forwards; }
@keyframes popIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Лупа во второй главе осматривает коробку: сдвиг по дуге плюс лёгкое
   приближение. Двигаем только transform — перерисовки нет. */
.lens { transform-box: view-box; transform-origin: 132px 52px; }
.chapter.is-visible .lens { animation: lensScan 6s ease-in-out 1.4s infinite; }
@keyframes lensScan {
  0%   { transform: translate(0, 0) scale(1); }
  18%  { transform: translate(-38px, 16px) scale(1.06); }
  36%  { transform: translate(-46px, 44px) scale(1); }
  54%  { transform: translate(-8px, 52px) scale(1.06); }
  72%  { transform: translate(6px, 22px) scale(1); }
  100% { transform: translate(0, 0) scale(1); }
}

/* блик на стекле пробегает, когда лупа останавливается */
.glint { opacity: 0; }
.chapter.is-visible .glint { animation: glintRun 6s ease-in-out 1.4s infinite; }
@keyframes glintRun {
  0%, 12%, 30%, 48%, 66%, 100% { opacity: 0; }
  20%, 38%, 56% { opacity: .8; }
}

/* мяч в главе про команду — живое движение */
.chapter.is-visible .bounce { animation: bounceBall 1.8s cubic-bezier(.35,0,.4,1) 1s infinite; }
@keyframes bounceBall { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-16px); } }

/* волны от точки на карте */
.chapter.is-visible .wave { animation: waveOut 3s ease-out infinite; opacity: 0; }
.wave--2 { animation-delay: 1s !important; }
.wave--3 { animation-delay: 2s !important; }
@keyframes waveOut { 0% { transform: scale(.3); opacity: .8; } 100% { transform: scale(1); opacity: 0; } }
.wave { transform-box: view-box; transform-origin: 100px 78px; }

/* цвет главы */
.chapter--lime    { --ch: #C6FF00; }
.chapter--cyan    { --ch: #16C8C0; }
.chapter--violet  { --ch: #8B5CFF; }
.chapter--orange  { --ch: #FF6A2B; }
.chapter--magenta { --ch: #FF2E7E; }
.chapter--blue    { --ch: #2E6BFF; }

/* ---------- ЦИФРЫ ---------- */
.abouts {
  list-style: none; margin: clamp(26px, 4vw, 44px) 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.abouts li {
  padding: 18px; border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--nc) 34%, transparent);
  background: color-mix(in srgb, var(--nc) 6%, var(--surface));
  transition: transform .18s ease, box-shadow .25s ease;
}
.abouts li:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -22px var(--nc); }
.abouts b {
  display: block; font-family: var(--head); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 34px); line-height: 1.05; color: var(--nc);
}
.abouts span { font-size: 13px; color: var(--muted); }
.abouts li:nth-child(1) { --nc: #C6FF00; }
.abouts li:nth-child(2) { --nc: #16C8C0; }
.abouts li:nth-child(3) { --nc: #8B5CFF; }
.abouts li:nth-child(4) { --nc: #FF6A2B; }

/* ---------- ПРАВИЛА ---------- */
.rules { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.rule {
  position: relative;
  padding: 18px 18px 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--rc, var(--accent));
  transition: transform .18s ease, border-color .2s ease;
}
.rule:hover { transform: translateX(4px); border-color: var(--rc); }
.rule b { display: block; margin-bottom: 5px; font-family: var(--head); font-size: 16px; text-transform: uppercase; color: #fff; }
.rule span { font-size: 14px; color: var(--muted); line-height: 1.5; }
.rule:nth-child(1) { --rc: #C6FF00; }
.rule:nth-child(2) { --rc: #16C8C0; }
.rule:nth-child(3) { --rc: #8B5CFF; }
.rule:nth-child(4) { --rc: #FF6A2B; }
.block.is-visible .rule { animation: chapterUp .5s cubic-bezier(.2,.7,.3,1) backwards; }
.block.is-visible .rule:nth-child(2) { animation-delay: .08s; }
.block.is-visible .rule:nth-child(3) { animation-delay: .16s; }
.block.is-visible .rule:nth-child(4) { animation-delay: .24s; }

/* ---------- ТЕЛЕФОН ---------- */
@media (max-width: 900px) {
  .chapter { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .chapter__rail { grid-column: 1; grid-row: 1 / span 2; }
  .chapter__art,
  .chapter--flip .chapter__art  { grid-column: 2; grid-row: 1; }
  .chapter__body,
  .chapter--flip .chapter__body { grid-column: 2; grid-row: 2; }
  .chapter__mark { width: 38px; height: 38px; font-size: 15px; }
  .story::before { left: 19px; }
  .story { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .draw { stroke-dashoffset: 0; }
  .pop, .chapter.is-visible .wave { opacity: 1; }
  .lens { transform: none !important; }
  .glint { opacity: .8; }
}