/* =====================================================================
   ОКСИТЕЛЬ — salt-motion-upgrade.css
   Доп. визуальный/motion-слой страницы /salt/ «Мобильная соляная пещера».
   Подключается ТОЛЬКО на /salt/ поверх style.css + salt-page.css (их НЕ меняем).
   ВЕСЬ контент здесь — ДЕКОР: aria-hidden, без видимого текста, pointer-events:none.
   Текст страницы не меняется. Уважает prefers-reduced-motion. Неймспейс: .sm-*.
   ===================================================================== */

/* Слой готов только когда отработал JS (иначе декор-элементов просто нет в DOM). */

/* ---------- HERO: световые лучи ---------- */
.salt .sm-shafts{ position:absolute; inset:-10% -5% 0 -5%; z-index:0; overflow:hidden; pointer-events:none; }
.salt .sm-shaft{
  position:absolute; top:-25%; width:16%; height:150%; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,236,184,0), rgba(255,236,184,.55) 45%, rgba(255,236,184,0));
  filter:blur(7px); transform:rotate(9deg); transform-origin:top center; mix-blend-mode:screen;
  animation:smShaft 8s ease-in-out infinite;
}
.salt .sm-shaft:nth-child(2){ left:18%; animation-duration:9.5s; animation-delay:-2s; opacity:.8; }
.salt .sm-shaft:nth-child(3){ left:52%; animation-duration:7s;   animation-delay:-4s; width:12%; }
.salt .sm-shaft:nth-child(1){ left:74%; animation-duration:10s;  animation-delay:-1s; }
@keyframes smShaft{ 0%,100%{ opacity:.18; transform:rotate(9deg) translateX(0); } 50%{ opacity:.5; transform:rotate(9deg) translateX(14px); } }

/* ---------- HERO: парящие соляные искры ---------- */
.salt .sm-spark{
  position:absolute; width:6px; height:6px; border-radius:1.5px; pointer-events:none; opacity:0;
  background:#fff; box-shadow:0 0 9px 1px rgba(255,240,200,.95); transform:rotate(45deg);
  animation:smFloat linear infinite;
}
@keyframes smFloat{
  0%{ transform:translateY(24px) rotate(0deg) scale(.5); opacity:0; }
  14%{ opacity:1; }
  100%{ transform:translateY(-240px) rotate(200deg) scale(1); opacity:0; }
}

/* ---------- HERO/сцена: воздушные потоки ---------- */
.salt .sm-air{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }
.salt .sm-air path{
  fill:none; stroke:rgba(52,182,230,.30); stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:13 24; animation:smAir 5.5s linear infinite;
}
.salt .sm-air path:nth-child(2){ stroke:rgba(124,194,67,.28); animation-duration:7s; animation-delay:-1.5s; }
.salt .sm-air path:nth-child(3){ stroke:rgba(255,210,122,.34); animation-duration:6.2s; animation-delay:-3s; }
@keyframes smAir{ to{ stroke-dashoffset:-74; } }

/* ---------- Параллакс-слои (двигает JS, разные скорости) ---------- */
.salt [data-sm-depth]{ will-change:transform; }

/* ---------- CTA: мягкая подсветка при появлении ---------- */
.salt .hero__actions.sm-lit .btn--primary{ animation:smCtaPulse 2.8s var(--ease) 1; }
@keyframes smCtaPulse{
  0%{ box-shadow:0 8px 22px rgba(14,143,214,.30); }
  30%{ box-shadow:0 10px 30px rgba(255,194,28,.55), 0 0 0 6px rgba(255,194,28,.12); }
  100%{ box-shadow:0 8px 22px rgba(14,143,214,.30); }
}

/* ---------- Ring charts вокруг цифр 10/1/40 ---------- */
.salt .course-fig{ position:relative; isolation:isolate; }
.salt .course-fig > *{ position:relative; z-index:1; }
.salt .sm-ring{
  position:absolute; top:8px; left:50%; width:128px; height:128px; z-index:0;
  transform:translateX(-50%); pointer-events:none; opacity:.6;
}
.salt .sm-ring circle{ fill:none; stroke-width:6; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }
.salt .sm-ring__bg{ stroke:rgba(14,143,214,.10); }
.salt .sm-ring__fg{
  stroke:var(--c-cyan); stroke-dasharray:var(--circ); stroke-dashoffset:var(--circ);
  transition:stroke-dashoffset 1.5s var(--ease);
}
.salt .course-fig--green .sm-ring__fg{ stroke:var(--c-green); }
.salt .course-fig.sm-on .sm-ring__fg{ stroke-dashoffset:var(--off, 0); }

/* fill-бар под цифрой */
.salt .sm-bar{ position:relative; height:6px; border-radius:99px; background:rgba(14,143,214,.10); margin:14px auto 0; max-width:140px; overflow:hidden; }
.salt .sm-bar > i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--c-cyan), var(--c-green)); transition:width 1.4s var(--ease); }
.salt .course-fig--green .sm-bar > i{ background:linear-gradient(90deg, var(--c-green), var(--c-green-deep)); }
.salt .course-fig.sm-on .sm-bar > i{ width:var(--barw, 80%); }

/* ---------- Декоративный line/area-график ---------- */
.salt .sm-chart{ display:block; width:100%; max-width:880px; height:70px; margin:6px auto 0; opacity:.8; pointer-events:none; overflow:visible; }
.salt .sm-chart .sm-chart__area{ fill:url(#smChartGrad); opacity:0; transition:opacity 1.2s var(--ease) .3s; }
.salt .sm-chart .sm-chart__line{
  fill:none; stroke:var(--c-cyan); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len, 900); stroke-dashoffset:var(--len, 900); transition:stroke-dashoffset 1.8s var(--ease);
}
.salt .sm-chart .sm-chart__dot{ fill:var(--c-green); opacity:0; transition:opacity .4s var(--ease); }
.salt .sm-chart.sm-on .sm-chart__line{ stroke-dashoffset:0; }
.salt .sm-chart.sm-on .sm-chart__area{ opacity:.5; }
.salt .sm-chart.sm-on .sm-chart__dot{ opacity:1; transition-delay:1.4s; }

/* ---------- Шаги: «маршрут» + пульс узлов ---------- */
.salt .steps{ position:relative; }
.salt .sm-route{ position:absolute; left:6%; right:6%; top:34px; height:3px; z-index:0; pointer-events:none;
  background:rgba(14,143,214,.12); border-radius:99px; overflow:hidden; }
.salt .sm-route > i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--c-yellow), var(--c-cyan), var(--c-green)); transition:width 1.8s var(--ease); }
.salt .steps.sm-on .sm-route > i{ width:100%; }
@media (max-width:760px){ .salt .sm-route{ display:none; } }
.salt .step .step__num{ position:relative; }
.salt .sm-node{ position:absolute; inset:-7px; border-radius:50%; border:2px solid var(--c-cyan); opacity:0; pointer-events:none; }
.salt .step.sm-on .sm-node{ animation:smNode 1.4s var(--ease) .2s 2; }
@keyframes smNode{ 0%{ transform:scale(.7); opacity:.7; } 100%{ transform:scale(1.5); opacity:0; } }

/* ---------- Pop-влёт иконок карточек ---------- */
.salt .card .icon-badge{ will-change:transform; }
.salt .card.sm-pop .icon-badge{ animation:smPop .65s var(--ease) both; }
@keyframes smPop{ 0%{ transform:scale(.35) rotate(-14deg); opacity:0; } 60%{ transform:scale(1.14) rotate(5deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } }

/* ---------- Scroll-linked декоративные рейлы у блоков шагов ---------- */
.salt .sm-host{ position:relative; }
.salt .sm-rail{ position:absolute; left:max(8px, 2%); top:8%; width:4px; height:84%; z-index:0; pointer-events:none;
  background:rgba(14,143,214,.10); border-radius:99px; overflow:hidden; }
.salt .sm-rail > i{ position:absolute; left:0; right:0; top:0; height:0;
  background:linear-gradient(180deg, var(--c-cyan), var(--c-green)); border-radius:99px; }
@media (max-width:760px){ .salt .sm-rail{ display:none; } }

/* ---------- «Плывущие» декоративные сепараторы (параллакс задаёт JS) ---------- */
.salt .sm-drift{ position:absolute; pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,241,207,.8), rgba(255,241,207,0) 70%); }

/* ---------- Уважение prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .salt .sm-shaft,
  .salt .sm-spark,
  .salt .sm-air path,
  .salt .hero__actions.sm-lit .btn--primary,
  .salt .step.sm-on .sm-node{ animation:none !important; }
  .salt .sm-spark,
  .salt .sm-air,
  .salt .sm-node{ display:none !important; }
  .salt .sm-ring__fg,
  .salt .sm-bar > i,
  .salt .sm-route > i,
  .salt .sm-chart__line,
  .salt .sm-chart__area,
  .salt .sm-chart__dot{ transition:none !important; }
  /* при reduced-motion декор сразу в финальном (статичном) состоянии — без движения */
  .salt .course-fig .sm-ring__fg{ stroke-dashoffset:var(--off, 0); }
  .salt .course-fig .sm-bar > i{ width:var(--barw, 80%); }
  .salt .steps .sm-route > i{ width:100%; }
  .salt .sm-chart .sm-chart__line{ stroke-dashoffset:0; }
  .salt .sm-chart .sm-chart__area{ opacity:.45; }
}