/* Анимации ТВК. Кладётся поверх main.css, существующую сетку и AOS не трогает.
   Принцип во всех блоках: БЕЗ JS и при «уменьшить движение» всё видно в готовом
   виде — цифры конечные, шаги подсвечены, слои разведены, форма на месте.
   JS сначала «взводит» блок классом is-armed и только потом проигрывает. */

/* ================= 1. Счётчики: «Наше производство обеспечит» ================= */
.tvk-kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:#e3e0dd;border:1px solid #e3e0dd;border-radius:6px;overflow:hidden;
  margin:0 0 42px;
}
.tvk-kpi{background:#fff;padding:20px 14px;text-align:center}
.tvk-kpi__val{
  font-size:34px;font-weight:700;line-height:1;color:#212529;
  font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;justify-content:center;gap:5px;flex-wrap:wrap;
}
.tvk-kpi__val i{font-style:normal;font-size:.4em;font-weight:600;color:#8b8d92}
.tvk-kpi__cap{font-size:13px;color:#4a4d52;margin-top:8px;line-height:1.35}
@media(max-width:620px){
  .tvk-kpis{grid-template-columns:repeat(2,1fr)}
  .tvk-kpi__val{font-size:27px}
}

/* ================= 2. Путь заказа: «Условия работы» ================= */
.tvk-flow{margin:0 0 10px}
.tvk-flow__track{position:relative;height:2px;background:#e3e0dd;border-radius:2px;margin-bottom:-9px}
.tvk-flow__fill{
  position:absolute;top:0;left:0;bottom:0;width:100%;
  background:#EB3223;border-radius:2px;
  transition:width 3s cubic-bezier(.4,.05,.25,1);
}
.tvk-flow__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;list-style:none;padding:0;margin:0}
.tvk-flow__step{padding-right:8px}
.tvk-flow__dot{
  width:16px;height:16px;border-radius:50%;
  background:#EB3223;border:2px solid #EB3223;margin-bottom:12px;
  transition:border-color .3s ease,background .3s ease,transform .3s ease;
}
.tvk-flow__num{font-size:11px;letter-spacing:.12em;color:#8b8d92;font-weight:600}
.tvk-flow__step p{font-size:14px;color:#212529;line-height:1.45;margin:4px 0 0}
.tvk-flow.is-armed .tvk-flow__fill{width:0}
.tvk-flow.is-armed.is-run .tvk-flow__fill{width:100%}
.tvk-flow.is-armed .tvk-flow__dot{background:#fff;border-color:#cfcbc7;transform:none}
.tvk-flow.is-armed .tvk-flow__step.is-on .tvk-flow__dot{background:#EB3223;border-color:#EB3223;transform:scale(1.12)}
@media(max-width:900px){
  .tvk-flow__steps{grid-template-columns:repeat(2,1fr);gap:22px 16px}
  .tvk-flow__track{display:none}
}

/* ================= 3. Разбор сэндвича ================= */
.tvk-sand{
  border:1px solid #e3e0dd;border-radius:6px;background:#fff;
  padding:8px 8px 4px;margin:0 0 28px;
}
.tvk-sand svg{display:block;width:100%;height:auto}
.tvk-sand__ring{transition:transform .85s cubic-bezier(.22,.7,.2,1)}
.tvk-sand__lbl,.tvk-sand__dim{opacity:1;transition:opacity .4s ease .35s}
/* взведён — слои сведены, подписи спрятаны */
.tvk-sand.is-armed .tvk-sand__lbl,
.tvk-sand.is-armed .tvk-sand__dim{opacity:0}
.tvk-sand.is-armed.is-apart .tvk-sand__lbl,
.tvk-sand.is-armed.is-apart .tvk-sand__dim{opacity:1}
.tvk-sand.is-armed.is-apart .tvk-sand__in{transform:translateX(-196px)}
.tvk-sand.is-armed.is-apart .tvk-sand__out{transform:translateX(196px)}
/* без JS слои сразу разведены, чтобы картинка читалась */
.tvk-sand:not(.is-armed) .tvk-sand__in{transform:translateX(-196px)}
.tvk-sand:not(.is-armed) .tvk-sand__out{transform:translateX(196px)}
.tvk-sand__cap{font-size:12.5px;color:#8b8d92;text-align:center;margin:2px 0 6px}

/* ================= 4. Плитка каталога ================= */
.tvk-tiles{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:#e3e0dd;border:1px solid #e3e0dd;border-radius:6px;overflow:hidden;
  margin:0 0 6px;
}
.tvk-tile{
  background:#fff;padding:22px 18px 20px;position:relative;overflow:hidden;
  text-decoration:none;color:inherit;display:block;
  transition:background .3s ease;
}
.tvk-tile:hover,.tvk-tile.is-open{background:#f5f7f9;text-decoration:none;color:inherit}
.tvk-tile__sec{width:54px;height:54px;display:block;margin-bottom:14px;transition:transform .5s cubic-bezier(.22,.7,.2,1)}
.tvk-tile:hover .tvk-tile__sec,.tvk-tile.is-open .tvk-tile__sec{transform:rotate(-8deg) scale(1.1)}
.tvk-tile__name{display:block;font-size:15px;font-weight:600;color:#212529}
.tvk-tile__steel{font-size:12px;color:#8b8d92;margin-top:3px}
.tvk-tile__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,.7,.2,1)}
.tvk-tile:hover .tvk-tile__more,.tvk-tile.is-open .tvk-tile__more{grid-template-rows:1fr}
.tvk-tile__more > div{overflow:hidden}
.tvk-tile__more p{margin:11px 0 0;font-size:12.5px;color:#4a4d52;line-height:1.45}
.tvk-tile::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#EB3223;
  transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,.7,.2,1);
}
.tvk-tile:hover::after,.tvk-tile.is-open::after{transform:scaleX(1)}
@media(max-width:700px){.tvk-tiles{grid-template-columns:repeat(2,1fr)}}

/* ================= 5. Появление формы и отклик кнопки ================= */
/* Базово форма ВИДНА. Скрытие существует только внутри самой анимации,
   поэтому если класс is-play не появится, форма останется на месте. */
[data-tvk-reveal].is-play > *{animation:tvkRise .7s cubic-bezier(.2,.7,.2,1) both}
[data-tvk-reveal].is-play > *:nth-child(2){animation-delay:.1s}
[data-tvk-reveal].is-play > *:nth-child(3){animation-delay:.2s}
[data-tvk-reveal].is-play > *:nth-child(4){animation-delay:.3s}
@keyframes tvkRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* волна по нажатию — работает на любой кнопке отправки формы */
.tvk-rp{
  position:absolute;border-radius:50%;background:rgba(255,255,255,.35);
  transform:translate(-50%,-50%) scale(0);animation:tvkRp .6s ease-out forwards;
  pointer-events:none;
}
@keyframes tvkRp{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ================= Уважение к «уменьшить движение» ================= */
@media(prefers-reduced-motion:reduce){
  .tvk-flow__fill,.tvk-flow__dot,.tvk-sand__ring,.tvk-sand__lbl,
  .tvk-sand__dim,.tvk-tile,.tvk-tile__sec,.tvk-tile__more{
    transition:none !important;animation:none !important;
  }
  .tvk-flow.is-armed .tvk-flow__fill{width:100%}
  .tvk-flow.is-armed .tvk-flow__dot{background:#EB3223;border-color:#EB3223}
  .tvk-sand.is-armed .tvk-sand__lbl,.tvk-sand.is-armed .tvk-sand__dim{opacity:1}
  .tvk-sand.is-armed .tvk-sand__in{transform:translateX(-196px)}
  .tvk-sand.is-armed .tvk-sand__out{transform:translateX(196px)}
  [data-tvk-reveal].is-play > *{animation:none !important;opacity:1;transform:none}
}