/* ===== КЕЙС «МАРШРУТ НА СПОРТ» (Яндекс Про × MVP × TOP DOG) =====
   Стиль самой кампании: жёлтый Яндекс Про, чёрный, белая пунктирная линия маршрута с такси.
   Макет шириной 1440: размеры — calc(N * var(--k)). Оживляет js/case-marshrut.js. */

.ms-page {
  /* — настройки — */
  --ms-yellow: #FFD83A;     /* жёлтый кампании */
  --ms-ink: #111111;        /* чёрный */
  --ms-dark: #141414;       /* тёмные блоки */
  --ms-dim: #8e8b85;        /* второстепенный текст на тёмном */
  --ms-route: #ffffff;      /* линия маршрута на жёлтом */

  background: var(--ms-dark);
  color: #fff;
}
.ms { container-type: inline-size; overflow-x: clip; }
.ms > section { --k: calc(100cqw / 1440); position: relative; }

/* — общие подписи и тексты — */
.ms-label {
  margin: 0;
  font-weight: 500;
  font-size: calc(12 * var(--k));
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ms-yellow);
}
.ms-text {
  max-width: calc(680 * var(--k));
  margin: 0;
  font-weight: 300;
  font-size: calc(15 * var(--k));
  line-height: 1.6;
  color: #e4e1db;
}
.ms-text--big { font-weight: 500; font-size: calc(26 * var(--k)); line-height: 1.35; color: #fff; }
.ms-text--big s { text-decoration-thickness: calc(3 * var(--k)); text-decoration-color: var(--ms-yellow); }
.ms-hint { margin: calc(12 * var(--k)) 0 0; font-size: calc(11 * var(--k)); color: var(--ms-dim); }
.ms-mark { padding: 0 0.15em; background: var(--ms-yellow); color: var(--ms-ink); font-weight: 600; }

/* — «Назад» — */
.ms-back {
  position: fixed;
  top: 20px; left: 20px;
  z-index: 60;
  padding: 8px 18px;
  border: 1px solid var(--ms-ink);
  background: var(--ms-yellow);
  color: var(--ms-ink);
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.ms-back:hover { background: var(--ms-ink); color: var(--ms-yellow); }

/* =====================================================================
   1. ОБЛОЖКА — жёлтая, как слайды кампании
   ===================================================================== */
.ms-hero {
  height: max(100vh, calc(760 * var(--k)));
  min-height: calc(700 * var(--k));
  overflow: hidden;
  background: var(--ms-yellow);
  color: var(--ms-ink);
}
.ms-hero__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.ms-hero__route path {
  fill: none;
  stroke: var(--ms-route);
  stroke-width: 6;
  stroke-dasharray: 18 14;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ms-hero__taxi {
  position: absolute;
  left: 0; top: 0;
  width: calc(190 * var(--k));
  translate: -50% -70%;
  z-index: 0; /* едет позади площадки */
  will-change: transform;
}
.ms-hero__text {
  position: absolute;
  left: calc(110 * var(--k));
  top: calc(150 * var(--k));
  z-index: 3;
}
.ms-kicker {
  margin: 0 0 calc(18 * var(--k));
  font-weight: 700;
  font-size: calc(16 * var(--k));
  letter-spacing: 0.04em;
}
.ms-hero__title {
  margin: 0;
  font-weight: 900;
  font-size: calc(88 * var(--k));
  line-height: 0.92;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.ms-hero__lead { margin: calc(26 * var(--k)) 0 0; max-width: calc(520 * var(--k)); font-weight: 400; font-size: calc(20 * var(--k)); line-height: 1.35; }
.ms-hero__lead b { font-weight: 800; }
.ms-hero__meta { margin: calc(14 * var(--k)) 0 0; font-weight: 400; font-size: calc(12 * var(--k)); opacity: 0.7; }
.ms-hero__art {
  position: absolute;
  right: calc(-10 * var(--k));
  top: calc(170 * var(--k));
  width: calc(640 * var(--k));
  z-index: 1; /* площадка — поверх машинки */
  filter: drop-shadow(0 calc(30 * var(--k)) calc(40 * var(--k)) rgba(0, 0, 0, 0.25));
}

/* — цифры под обложкой: чёрная полоса — */
.ms-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(20 * var(--k));
  padding: calc(46 * var(--k)) calc(110 * var(--k));
  background: var(--ms-ink);
}
.ms-stat b {
  display: block;
  font-weight: 900;
  font-size: calc(34 * var(--k));
  line-height: 1;
  color: var(--ms-yellow);
  white-space: nowrap;
}
.ms-stat i { font-style: normal; font-variant-numeric: tabular-nums; }
.ms-stat span { display: block; margin-top: calc(8 * var(--k)); font-size: calc(12 * var(--k)); color: var(--ms-dim); }

/* =====================================================================
   2. ЗАДАЧА → ИНСАЙТ → ИДЕЯ
   ===================================================================== */
.ms-brief { padding: calc(110 * var(--k)) calc(110 * var(--k)) calc(40 * var(--k)); }
.ms-row {
  display: grid;
  grid-template-columns: calc(250 * var(--k)) 1fr;
  gap: calc(40 * var(--k));
  padding: calc(36 * var(--k)) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ms-row .ms-label { margin-top: calc(6 * var(--k)); }
.ms-idea {
  margin: 0 0 calc(20 * var(--k));
  font-weight: 900;
  font-size: calc(64 * var(--k));
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ms-yellow);
}

/* =====================================================================
   2б. КОНКУРС — лейтмотив, жёлтый блок
   ===================================================================== */
.ms-contest { padding: calc(100 * var(--k)) calc(110 * var(--k)); background: var(--ms-yellow); color: var(--ms-ink); }
.ms-label--ink { color: var(--ms-ink); opacity: 0.7; }
.ms-contest__tag { margin: calc(10 * var(--k)) 0 calc(18 * var(--k)); font-weight: 900; font-size: calc(92 * var(--k)); line-height: 1; letter-spacing: -0.02em; }
.ms-contest__lead { max-width: calc(760 * var(--k)); margin: 0 0 calc(40 * var(--k)); font-weight: 500; font-size: calc(20 * var(--k)); line-height: 1.4; }
.ms-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--k)); margin: 0 0 calc(44 * var(--k)); padding: 0; list-style: none; }
.ms-steps li {
  padding: calc(20 * var(--k));
  border-radius: calc(14 * var(--k));
  background: var(--ms-ink);
  color: #fff;
  font-weight: 400;
  font-size: calc(14 * var(--k));
  line-height: 1.4;
}
.ms-steps b { display: block; margin-bottom: calc(10 * var(--k)); font-weight: 900; font-size: calc(30 * var(--k)); color: var(--ms-yellow); }
.ms-contest__row { display: grid; grid-template-columns: calc(520 * var(--k)) 1fr; gap: calc(40 * var(--k)); align-items: center; }
/* трек кампании: кнопка + «эквалайзер» */
.ms-track { display: flex; align-items: center; gap: calc(20 * var(--k)); padding: calc(20 * var(--k)) calc(24 * var(--k)); border-radius: calc(80 * var(--k)); background: var(--ms-ink); color: #fff; }
.ms-track__btn { position: relative; flex: none; width: calc(64 * var(--k)); height: calc(64 * var(--k)); border: 0; border-radius: 50%; background: var(--ms-yellow); cursor: pointer; transition: scale 0.25s cubic-bezier(.3, 1.6, .5, 1); }
.ms-track__btn:hover { scale: 1.08; }
.ms-track__btn span { position: absolute; left: 40%; top: 30%; border-left: calc(20 * var(--k)) solid var(--ms-ink); border-block: calc(13 * var(--k)) solid transparent; }
.ms-track.is-playing .ms-track__btn span { left: 34%; top: 32%; width: calc(8 * var(--k)); height: calc(24 * var(--k)); border: 0; border-left: calc(7 * var(--k)) solid var(--ms-ink); border-right: calc(7 * var(--k)) solid var(--ms-ink); box-sizing: content-box; }
.ms-track__info { display: grid; gap: calc(4 * var(--k)); }
.ms-track__info b { font-weight: 800; font-size: calc(16 * var(--k)); }
.ms-track__info > span { font-size: calc(12 * var(--k)); color: var(--ms-dim); }
.ms-track__wave { display: flex; align-items: flex-end; gap: calc(4 * var(--k)); height: calc(26 * var(--k)); margin-top: calc(4 * var(--k)); }
.ms-track__wave i { width: calc(5 * var(--k)); height: 30%; border-radius: calc(3 * var(--k)); background: var(--ms-yellow); }
.ms-track.is-playing .ms-track__wave i { animation: ms-eq 0.6s ease-in-out infinite alternate; }
.ms-track__wave i:nth-child(3n) { animation-delay: -0.2s !important; }
.ms-track__wave i:nth-child(3n+1) { animation-delay: -0.4s !important; }
.ms-track__wave i:nth-child(4n) { animation-duration: 0.45s !important; }
@keyframes ms-eq { from { height: 20%; } to { height: 100%; } }
.ms-contest__facts p { margin: 0 0 calc(10 * var(--k)); font-size: calc(15 * var(--k)); }
.ms-contest__facts b { font-weight: 900; }
/* стена публикаций по хештегу */
.ms-ugc-title { margin-top: calc(50 * var(--k)); }
.ms-ugc-wall { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); margin: calc(16 * var(--k)) 0 0; padding: 0; list-style: none; }
.ms-ugc-wall li { display: flex; align-items: center; gap: calc(10 * var(--k)); padding: calc(8 * var(--k)) calc(14 * var(--k)); border-radius: calc(30 * var(--k)); background: rgba(17, 17, 17, 0.08); font-size: calc(13 * var(--k)); }
.ms-ugc-wall b { padding: calc(2 * var(--k)) calc(8 * var(--k)); border-radius: calc(20 * var(--k)); background: var(--ms-ink); color: var(--ms-yellow); font-weight: 800; font-size: calc(12 * var(--k)); }
.ms-ugc-wall b::before { content: "▶ "; }
.ms-ugc-wall__more { background: none !important; font-weight: 600; }

/* =====================================================================
   3. МАРШРУТ КАМПАНИИ
   ===================================================================== */
.ms-route {
  /* — настройки — */
  --pad-x: 60;              /* отступ слева: даты начинаются здесь */
  --date-w: 150;            /* ширина колонки с датами */
  --line-x: 250;            /* где проходит линия маршрута (ед. макета) = отступ + даты + 40 */
  --text-gap: 140;          /* от линии до текста — место под машинку */
  --taxi-gap: 40;           /* машинка — правее линии на столько же, на сколько даты левее */
  padding: calc(100 * var(--k)) calc(110 * var(--k)) calc(80 * var(--k)) calc(var(--pad-x) * var(--k));
}
.ms-route__title {
  margin: 0 0 calc(70 * var(--k)) calc((var(--line-x) + var(--text-gap) - var(--pad-x)) * var(--k));
  font-weight: 900;
  font-size: calc(56 * var(--k));
  text-transform: uppercase;
}
/* линия маршрута: серая пунктирная, пройденная часть жёлтая, на конце — такси */
.ms-line {
  position: absolute;
  left: calc(var(--line-x) * var(--k));
  top: calc(250 * var(--k));
  bottom: calc(80 * var(--k));
  width: calc(6 * var(--k));
  translate: -50% 0;
  background: repeating-linear-gradient(rgba(255, 255, 255, 0.25) 0 calc(14 * var(--k)), transparent calc(14 * var(--k)) calc(26 * var(--k)));
}
.ms-line__done {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: var(--done, 0%);
  background: repeating-linear-gradient(var(--ms-yellow) 0 calc(14 * var(--k)), transparent calc(14 * var(--k)) calc(26 * var(--k)));
}
.ms-line__taxi {
  position: absolute;
  left: calc(50% + var(--taxi-gap) * var(--k) + 29 * var(--k)); /* справа от линии на том же расстоянии, что и даты слева */
  top: var(--done, 0%);
  width: calc(130 * var(--k));
  translate: -50% -50%;
  rotate: -90deg;            /* картинка смотрит влево → поворачиваем мордой вниз: едет вперёд */
  scale: 1 -1;               /* крышей вправо */
  z-index: 2;                /* поверх точек остановок */
  filter: drop-shadow(0 calc(6 * var(--k)) calc(10 * var(--k)) rgba(0, 0, 0, 0.5));
}
/* остановка: дата слева от линии, содержимое справа */
.ms-stop {
  display: grid;
  grid-template-columns: calc(var(--date-w) * var(--k)) 1fr;
  column-gap: calc((var(--line-x) - var(--pad-x) - var(--date-w) + var(--text-gap)) * var(--k));
  padding-bottom: calc(110 * var(--k));
}
.ms-stop__date {
  position: relative;
  margin: calc(8 * var(--k)) 0 0;
  font-weight: 800;
  font-size: calc(18 * var(--k));
  text-align: right;
  color: var(--ms-yellow);
  white-space: nowrap;
}
/* точка остановки на линии */
.ms-stop__date::after {
  content: "";
  position: absolute;
  right: calc(-40 * var(--k) - 11 * var(--k)); /* точка ровно на линии: линия = край дат + 40 */
  z-index: 1;
  top: calc(2 * var(--k));
  width: calc(22 * var(--k)); height: calc(22 * var(--k));
  border: calc(4 * var(--k)) solid var(--ms-yellow);
  border-radius: 50%;
  background: var(--ms-dark);
}
.ms-stop__body { min-width: 0; } /* колонка не растягивается под карусель — карусель листается внутри */
.ms-stop__name {
  margin: 0 0 calc(16 * var(--k));
  font-weight: 900;
  font-size: calc(34 * var(--k));
  text-transform: uppercase;
}

/* видео-кнопки (по клику — кинорежим) */
.ms-video, .ms-ep {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1);
}
.ms-video:hover, .ms-ep:hover { transform: scale(1.02); }
.ms-video img, .ms-ep img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ms-video--wide { width: 100%; aspect-ratio: 16 / 9; margin-top: calc(28 * var(--k)); }
.ms-video--45 { flex: none; width: calc(300 * var(--k)); aspect-ratio: 4 / 5; }
.ms-play {
  position: absolute;
  left: 50%; top: 50%;
  width: calc(70 * var(--k)); height: calc(70 * var(--k));
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--ms-yellow);
  transition: scale 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.ms-play::after {
  content: "";
  position: absolute;
  left: 40%; top: 30%;
  border-left: calc(22 * var(--k)) solid var(--ms-ink);
  border-block: calc(14 * var(--k)) solid transparent;
}
.ms-video:hover .ms-play, .ms-ep:hover .ms-play { scale: 1.15; }

/* анонс: видео + карусель слайдов */
.ms-announce { display: flex; gap: calc(20 * var(--k)); margin-top: calc(28 * var(--k)); }
.ms-slides {
  flex: 1;
  min-width: 0;              /* иначе карусель растягивается под все слайды и уходит за край экрана */
  display: flex;
  gap: calc(14 * var(--k));
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  outline: none;
}
.ms-slides::-webkit-scrollbar { display: none; }
.ms-slides.is-drag { cursor: grabbing; }
.ms-slides img { flex: none; width: calc(300 * var(--k)); aspect-ratio: 1050 / 1312; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* бегунок карусели */
.ms-scrub { display: flex; align-items: center; gap: calc(16 * var(--k)); margin-top: calc(16 * var(--k)); }
.ms-scrub span { font-size: calc(11 * var(--k)); color: var(--ms-dim); }
.ms-scrub input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: calc(320 * var(--k));
  height: calc(6 * var(--k));
  border-radius: calc(6 * var(--k));
  background: linear-gradient(var(--ms-yellow), var(--ms-yellow)) no-repeat 0 0 / var(--fill, 0%) 100%, rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
.ms-scrub input::-webkit-slider-thumb { -webkit-appearance: none; width: calc(22 * var(--k)); height: calc(22 * var(--k)); border-radius: 50%; background: var(--ms-yellow); border: calc(3 * var(--k)) solid var(--ms-ink); }
.ms-scrub input::-moz-range-thumb { width: calc(22 * var(--k)); height: calc(22 * var(--k)); border-radius: 50%; background: var(--ms-yellow); border: calc(3 * var(--k)) solid var(--ms-ink); }

/* «буст конкурса» на каждой остановке */
.ms-boost {
  display: inline-block;
  margin: calc(-6 * var(--k)) 0 calc(16 * var(--k));
  padding: calc(5 * var(--k)) calc(12 * var(--k));
  border: 1px solid var(--ms-yellow);
  border-radius: calc(20 * var(--k));
  font-weight: 500;
  font-size: calc(11 * var(--k));
  color: var(--ms-yellow);
}

/* тренировки: города и 4 вертикальных ролика */
.ms-cities { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); margin: calc(20 * var(--k)) 0 calc(26 * var(--k)); padding: 0; list-style: none; }
.ms-cities li { padding: calc(7 * var(--k)) calc(16 * var(--k)); border-radius: calc(30 * var(--k)); background: var(--ms-yellow); color: var(--ms-ink); font-weight: 600; font-size: calc(13 * var(--k)); }
.ms-reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(16 * var(--k)); }
.ms-reel { margin: 0; }
.ms-reel video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.ms-reel figcaption { margin-top: calc(8 * var(--k)); font-size: calc(11 * var(--k)); color: var(--ms-dim); }

/* сериал: 5 серий-постеров с просмотрами */
.ms-series { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(14 * var(--k)); margin-top: calc(28 * var(--k)); }
.ms-ep { aspect-ratio: 9 / 16; }
.ms-ep b, .ms-ep i {
  position: absolute;
  z-index: 1;
  padding: calc(4 * var(--k)) calc(9 * var(--k));
  font-size: calc(12 * var(--k));
}
.ms-ep b { left: 0; top: calc(10 * var(--k)); background: var(--ms-yellow); color: var(--ms-ink); font-weight: 900; }
.ms-ep b::after { content: " серия"; font-weight: 500; }
.ms-ep i { left: 0; bottom: calc(10 * var(--k)); background: rgba(0, 0, 0, 0.75); color: #fff; font-style: normal; }
.ms-ep i::before { content: "▶ "; color: var(--ms-yellow); }
.ms-ep .ms-play { width: calc(52 * var(--k)); height: calc(52 * var(--k)); }

/* открытая тренировка: фото + факты */
.ms-open { display: grid; grid-template-columns: 1.05fr 1fr; gap: calc(40 * var(--k)); align-items: start; margin-top: calc(10 * var(--k)); }
.ms-open__photo { display: block; width: 100%; height: auto; }
.ms-facts { display: grid; gap: calc(14 * var(--k)); margin: 0; padding: 0; list-style: none; }
.ms-facts li {
  padding-left: calc(18 * var(--k));
  border-left: calc(3 * var(--k)) solid var(--ms-yellow);
  font-weight: 300;
  font-size: calc(15 * var(--k));
  line-height: 1.45;
}
.ms-facts b { font-weight: 900; color: var(--ms-yellow); }
.ms-facts span { color: var(--ms-dim); }

/* =====================================================================
   5–6. РЕЗУЛЬТАТ И РОЛЬ
   ===================================================================== */
.ms-result { padding: calc(110 * var(--k)) calc(110 * var(--k)) calc(40 * var(--k)); }
.ms-result__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(30 * var(--k)); margin-top: calc(30 * var(--k)); }
.ms-result__grid b { display: block; font-weight: 900; font-size: calc(40 * var(--k)); white-space: nowrap; line-height: 1; color: var(--ms-yellow); }
.ms-result__grid span { display: block; margin-top: calc(10 * var(--k)); font-size: calc(13 * var(--k)); line-height: 1.45; color: #cfccc6; }
.ms-foot { margin: calc(26 * var(--k)) 0 0; font-size: calc(11 * var(--k)); color: var(--ms-dim); }

.ms-role { padding: calc(80 * var(--k)) calc(110 * var(--k)) calc(140 * var(--k)); }
.ms-role__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--k)); margin-top: calc(26 * var(--k)); }
.ms-role__grid div { padding: calc(26 * var(--k)); border-radius: calc(16 * var(--k)); background: #1d1d1d; border: 1px solid rgba(255, 216, 58, 0.18); }
.ms-role__grid div:first-child { grid-column: span 2; background: var(--ms-yellow); color: var(--ms-ink); }
.ms-role__grid b { display: block; margin-bottom: calc(10 * var(--k)); font-weight: 900; font-size: calc(26 * var(--k)); text-transform: uppercase; color: var(--ms-yellow); }
.ms-role__grid div:first-child b { color: var(--ms-ink); font-size: calc(34 * var(--k)); }
.ms-role__grid span { font-weight: 300; font-size: calc(15 * var(--k)); line-height: 1.45; }
.ms-role__grid div:first-child span { font-weight: 500; font-size: calc(18 * var(--k)); }
.ms-end { display: inline-block; margin-top: calc(50 * var(--k)); font-size: calc(13 * var(--k)); color: var(--ms-dim); text-decoration: none; transition: color 0.2s; }
.ms-end:hover { color: var(--ms-yellow); }

/* =====================================================================
   КИНОРЕЖИМ
   ===================================================================== */
.ms-cinema { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 0, 0, 0.9); }
.ms-cinema[hidden] { display: none; }
.ms-cinema__box { width: min(90vw, 160vh); }
.ms-cinema__box.is-vertical { width: min(90vw, 45vh); }
.ms-cinema__title { margin: 0 0 10px; color: var(--ms-yellow); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; }
.ms-cinema video { display: block; width: 100%; max-height: 82vh; background: #000; }
.ms-cinema__close { position: absolute; top: 20px; right: 24px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }

/* =====================================================================
   ПОЯВЛЕНИЕ
   ===================================================================== */
.ms-reveal { opacity: 0; transform: translateY(calc(26 * var(--k))); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(.2, .7, .3, 1); }
.ms-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ms-reveal { opacity: 1; transform: none; transition: none; }
}