/* =========================================================================
   „НИКЕНА-21“ ЕООД — Скрол анимация „Отваряне на шахта с два крика“
   Зарежда се САМО на страницата „Как работи“ (bg/en/de).
   Разчита на токените от style.css: --navy, --orange, --nav-h, --ease и др.
   ========================================================================= */

/* ------------------------------------------------------------------ */
/* Пистата: висока секция, в която живее закаченият кадър.             */
/* Височината определя колко скрол трае анимацията.                    */
/* ------------------------------------------------------------------ */
.mh {
  position: relative;
  height: 360vh;
  background: var(--bg-light);
  border-bottom: 1px solid var(--line);
}

/* Закаченият кадър — стои неподвижен, докато пистата минава под него. */
.mh__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Малки екрани: svh изключва подвижната адресна лента на телефона. */
@supports (height: 100svh) {
  .mh__pin { height: calc(100svh - var(--nav-h)); }
}

/* ------------------------------------------------------------------ */
/* Заглавна лента на кадъра                                            */
/* ------------------------------------------------------------------ */
.mh__head { flex: none; padding: 20px 0 4px; }
.mh__head h2 {
  margin: 4px 0 0;
  font-size: clamp(1.35rem, 2.3vw, 2rem);
}
.mh__hint {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: .93rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mh__hint svg { width: 16px; height: 16px; color: var(--orange); flex: none; }
/* Подсказката „скролнете“ избледнява, щом анимацията тръгне. */
.mh__hint { transition: opacity .3s var(--ease); }
.mh.is-started .mh__hint { opacity: 0; }

/* ------------------------------------------------------------------ */
/* Сцената                                                             */
/* ------------------------------------------------------------------ */
.mh__stage { flex: 1 1 auto; min-height: 0; position: relative; }
.mh__svg { width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------------ */
/* Долен индикатор: релса + четирите фази                              */
/* ------------------------------------------------------------------ */
.mh__hud { flex: none; padding: 0 0 24px; }

.mh__rail {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.mh__rail i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
  border-radius: 2px;
}

.mh__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.mh__steps li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--text-2);
  font-size: .95rem;
  line-height: 1.3;
  border-top: 2px solid var(--line);
  padding-top: 10px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.mh__steps b {
  font-weight: 800;
  font-size: .8rem;
  color: var(--text-2);
  transition: color .25s var(--ease);
}
.mh__steps li.is-on { color: var(--navy); font-weight: 600; border-top-color: var(--orange); }
.mh__steps li.is-on b { color: var(--orange); }
.mh__steps li.is-done { border-top-color: #b9c3cd; }

/* ------------------------------------------------------------------ */
/* Адаптив                                                             */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .mh { height: 320vh; }
  .mh__steps { grid-template-columns: repeat(2, 1fr); gap: 10px 14px; }
  .mh__steps li { font-size: .88rem; padding-top: 8px; }
  /* Кадърът е широк, а тесните екрани са високи. Вместо сцената да остане
     залепена горе с огромни празни ленти, тя се свива до собствените си
     пропорции и целият кадър се центрира вертикално. */
  .mh__pin { justify-content: center; }
  .mh__stage { flex: 0 1 auto; }
  .mh__svg { height: auto; }
}

@media (max-width: 560px) {
  .mh { height: 300vh; }
  .mh__head { padding-top: 14px; }
  .mh__hint { display: none; }
  .mh__hud { padding-bottom: 18px; }
  /* На тесен екран показваме само текущата фаза, за да остане въздух. */
  .mh__steps { display: block; }
  .mh__steps li { display: none; border-top: 0; padding-top: 0; font-size: .95rem; }
  .mh__steps li.is-on { display: flex; }
}

/* ------------------------------------------------------------------ */
/* Намалено движение: без закачане, без писта — един представителен    */
/* кадър и стъпките като обикновен списък.                             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mh { height: auto; }
  .mh__pin { position: static; height: auto; }
  .mh__stage { height: min(62vh, 460px); }
  .mh__head { padding-top: 34px; }
  .mh__hint { display: none; }
  .mh__hud { padding-bottom: 34px; }
  .mh__rail { display: none; }
  .mh__steps { grid-template-columns: repeat(4, 1fr); display: grid; }
  .mh__steps li { display: flex; color: var(--text); border-top-color: var(--line); }
  .mh__steps li b { color: var(--orange); }
  .mh__svg * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ */
/* Цветове на сцената (държим ги на едно място, извън JS-а)            */
/* ------------------------------------------------------------------ */
.mh__svg {
  --pv-a: #e6ebef;   /* плоча — светъл тон  */
  --pv-b: #dde3e9;   /* плоча — среден тон  */
  --pv-c: #d3dae1;   /* плоча — тъмен тон   */
  --pv-j: #c3ccd4;   /* фуга между плочите  */
  --st-1: #a7b0b9;   /* стомана — светло    */
  --st-2: #838d97;   /* стомана — средно    */
  --st-3: #5f6973;   /* стомана — сянка     */
  --ci-1: #8b949d;   /* чугун — горна страна */
  --ci-2: #6b747d;   /* чугун — челна страна */
  --ci-3: #4e565e;   /* чугун — сянка       */
}

.mh-pv-a { fill: var(--pv-a); }
.mh-pv-b { fill: var(--pv-b); }
.mh-pv-c { fill: var(--pv-c); }
.mh-joint { fill: none; stroke: var(--pv-j); stroke-width: 1.2; }

.mh-st1 { fill: var(--st-1); }
.mh-st2 { fill: var(--st-2); }
.mh-st3 { fill: var(--st-3); }
.mh-ci1 { fill: var(--ci-1); }
.mh-ci2 { fill: var(--ci-2); }
.mh-ci3 { fill: var(--ci-3); }

.mh-tyre  { fill: #232c36; }
.mh-rim   { fill: #6c757e; }
.mh-grip  { fill: #1D2733; }

/* Колоната е тъмен квадратен профил с надлъжен прорез, капачката е светла. */
.mh-col1  { fill: #333d48; }
.mh-col2  { fill: #222b34; }
.mh-slot  { fill: #12181f; }
.mh-edge  { fill: #4d5763; }
.mh-cap   { fill: #e8ecef; }
.mh-cap2  { fill: #b6bec6; }

/* Каретката (гайката) е единственото оранжево тяло в кадъра — окото я следи
   как се качва по прореза. Затова жилетките минават на халогенно жълто. */
/* Каретката е сигнално жълта, за да не се бие с оранжевите жилетки —
   подвижната част трябва да се различава от хората в кадъра. */
.mh-carr  { fill: #f5b301; }

/* Товарното рамо е плосък черен профил с надлъжен прорез. */
.mh-arm1     { fill: #3b444e; }
.mh-arm2     { fill: #262d35; }
.mh-armslot  { fill: #12181f; }

/* Капакът е вана със стоманен кант, запълнена със същата настилка като
   тротоара — на място почти не се забелязва. */
.mh-rail  { fill: #7c858e; }
.mh-pav-a { fill: #dfe5eb; }
.mh-pav-b { fill: #d8ccae; }
.mh-pav-c { fill: #d3dae1; }
.mh-pav-j { stroke: #aab3bc; stroke-width: 1.1; fill: none; }
.mh-bolt  { fill: #59626b; }


/* Камерата под капака и кръглият шахтов капак на дъното ѝ. */
.mh-void   { fill: #10202f; }
.mh-wall1  { fill: #23364a; }
.mh-wall2  { fill: #182a3b; }
.mh-drum   { fill: #0a141d; }
.mh-drum2  { fill: #55606b; }
.mh-drum3  { fill: #2b333c; }

.mh-grass  { fill: #6f8a5b; }
.mh-grass2 { fill: #7d976a; }
.mh-curb   { fill: #ccd3d9; }
.mh-curb2  { fill: #a6afb8; }

.mh-vest    { fill: var(--orange); }
.mh-stripe  { fill: #f6f8fa; opacity: .9; }
.mh-cloth   { fill: #17324f; }
.mh-boot    { fill: #101b28; }
.mh-skin    { fill: #dfae8e; }
/* Каската е светла върху светла настилка — контурът я държи четлива. */
.mh-helmet  { fill: #f7f9fb; stroke: #17324f; stroke-width: 2.5; stroke-linejoin: round; }
.mh-arm {
  fill: none;
  stroke: #17324f;
  stroke-width: 15;
  stroke-linecap: round;
}
.mh-hand { fill: #dfae8e; stroke: none; }