/* ── Маршрут замовлення на першому екрані ─────────────────────────
 *
 * Одна сцена на чотири сторінки: об'єкт рухається зліва направо крізь
 * вузли бізнес-процесу. Малює її assets/hero-flow.js, тут — тільки
 * вигляд і місце.
 *
 * Правила місця:
 *   – на широких екранах сцена лежить під текстом першого екрану
 *     (absolute, нижче тексту за z-index) і висоти секції не додає;
 *   – текстовий блок позначено data-flow-text: він піднятий над сценою,
 *     а скрипт вимірює його межі й не ставить у них жодного вузла;
 *   – на телефоні та в занадто вузьких коридорах сцена стає компактною
 *     статичною схемою під текстом (клас is-compact).
 *
 * Кольори — лише токени сайту: чорний текст, сірі лінії, один синій.
 * Анімується тільки transform, opacity і stroke/fill — жодних фільтрів.
 */

[data-flow-host] { position: relative; }
[data-flow-text] { position: relative; z-index: 2; }

.hero-flow {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  height: 0;                       /* висоту ставить скрипт */
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  /* Прозора, поки скрипт не зміряв текст і не побудував сцену: інакше
     на мить видно рейку не на своєму місці. Проявляється плавно. */
  opacity: 0;
  transition: opacity .45s ease;
}
.hero-flow.is-ready { opacity: 1; }
.hero-flow svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: inherit;
}

/* Рейка процесу: дві лінії по коридорах, під текстом лінії немає. */
.hero-flow__rail {
  fill: none;
  stroke: rgba(29, 29, 31, .16);
  stroke-width: 1;
}

/* Вузол: біле коло з тонким контуром, іконка, підпис. Активний —
   контур і іконка синіють, підпис темнішає, навколо коротко
   розходиться кільце. Кольори перемикає скрипт плавно. */
.hero-flow__node-dot {
  fill: #fff;
  stroke: rgba(29, 29, 31, .22);
  stroke-width: 1;
}
.hero-flow__node-ring {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.25;
  opacity: 0;
}
.hero-flow__ico {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--ink-soft);
}
.hero-flow__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  fill: var(--ink-soft);
  text-anchor: middle;
}

/* Картка замовлення: біла, з синім контуром, синьою міткою, назвою і
   поточним станом. Рухається вздовж рейки. */
.hero-flow__card-box {
  fill: #fff;
  stroke: var(--blue);
  stroke-width: 1;
}
.hero-flow__card-mark { fill: var(--blue); }
.hero-flow__card-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -.01em;
  fill: var(--ink);
}
.hero-flow__card-note {
  font-size: 11px;
  fill: var(--ink-soft);
}

/* Склад: залишок, резерв, вільно — три смужки біля вузла «Вільно». */
.hero-flow__bar-track { fill: rgba(29, 29, 31, .10); }
.hero-flow__bar-fill { fill: var(--blue); }
.hero-flow__bar-free { fill: none; stroke: var(--blue); stroke-width: 1; }
.hero-flow__bar-text {
  font-size: 10.5px;
  font-weight: 600;
  fill: var(--ink-soft);
}

/* Компактна схема: статичний блок під текстом, свій потік документа. */
.hero-flow.is-compact {
  position: relative;
  inset: auto;
  z-index: 1;
  height: auto;
  width: min(100% - 40px, 560px);
  margin: 22px auto 0;
  overflow: visible;
}
.hero-flow.is-compact svg { height: auto; }
.hero-flow.is-compact .hero-flow__label { font-size: 10.5px; }

/* Планшет: менше допоміжних деталей — без поточного стану на картці,
   дрібніші підписи. Сенс сцени (вузли й рух) залишається. */
@media (max-width: 1099px) {
  .hero-flow:not(.is-compact) .hero-flow__card-note { display: none; }
  .hero-flow__label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Скрипт у цьому режимі не анімує, а малює підсумковий стан. */
  .hero-flow__node-ring { display: none; }
}

/* Показання вузла: рядки з точками-статусами. Зроблено — синя точка,
   ще ні — порожнє коло, факт — маленька сіра крапка. */
.hero-flow__row-mark--done { fill: var(--blue); }
.hero-flow__row-mark--todo { fill: none; stroke: rgba(29, 29, 31, .35); stroke-width: 1; }
.hero-flow__row-mark--fact { fill: rgba(29, 29, 31, .35); }