/* «Живе місто» — перший екран головної послуг (/3d-druk-na-zamovlennya/, redesign/parts/city-live.php) — частина .ws-* з
   redesign-2026-10/workshop/workshop.css (варіант E, сесія artempronin-be): сцена на весь екран, текст героя — на картці зліва.
   Сцена закріплена на екрані, її хід задає скрол; увесь текст — звичайний HTML поверх полотна (читається пошуком і без 3D). */
.ws-skip { display: inline-block; margin-top: 1rem; font: 600 .875rem/1.4 var(--display); color: var(--muted); }
.ws-skip:focus-visible { color: var(--ink); }
.ws-pin { --len: 8; position: relative; height: calc(var(--len) * 100vh); width: 100vw; margin-inline: calc(50% - 50vw); }
/* Перший екран: сцена від самого верху, шапка (.top, sticky, напівпрозора) — поверх неї. Перекриває відступ секцій services.css (main > section) */
main > .ws-pin { margin-top: calc(-4.5rem - 1px); }
.ws-stick { position: sticky; top: 0; height: 100vh; overflow: clip; }
html.is-still .ws-pin { height: 100vh; margin-top: -72px; }
/* Зупинки скролу (redesign/parts/city-live.php): proximity + snap-stop always — інерційний свайп чи жест трекпада не проскакує кроки.
   +6rem — scroll-padding-top сторінки (prices.css): так зупинка припадає рівно на t у вікні кроку */
html.ws-js { scroll-snap-type: y proximity; }
.ws-snap { position: absolute; left: 0; top: calc(var(--t) * (var(--len) - 1) * 100vh + 6rem); width: 1px; height: 1px; scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; } /* кадр ?t= — сцена під шапкою, як під час скролу */

.ws-stage { position: absolute; inset: 0; z-index: 1; background: #EFE8DC; clip-path: inset(var(--ct, 0) var(--cr, 0) var(--cb, 0) var(--cl, 0) round var(--crad, 0)); }
:root[data-theme="dark"] .ws-stage { background: #1D1A16; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ws-stage { background: #1D1A16; } }
.ws-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .5s; }
.gl-on .ws-gl { opacity: 1; }
/* Картинка-заміна: поки 3D не завантажилось, з «економією трафіку» і без WebGL */
.ws-poster { position: absolute; z-index: 1; top: var(--pt, 0); left: var(--pl, 0); width: var(--pw, 100%); height: var(--ph, 100%); object-fit: cover; border-radius: var(--crad, 0); transition: opacity .5s; }
.gl-on .ws-poster { opacity: 0; }

/* Картка героя (крихти, h1, лід, кнопки): зникає на початку скролу (--h з WORLD.ui, вікно open у e.js) */
.ws-herocard { position: absolute; z-index: 3; left: max(var(--gutter), calc((100% - 1360px) / 2)); top: calc(50% + 36px); translate: 0 calc(-50% + (1 - var(--h, 1)) * -40px); width: min(540px, 100% - var(--gutter) * 2);
  padding: clamp(24px, 3vw, 40px); border-radius: 28px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -40px rgba(20, 18, 16, .6); opacity: var(--h, 1); visibility: var(--hvis, visible); }
.ws-herocard h1 { margin: 12px 0 14px; font: 900 clamp(38px, 4.6vw, 72px)/.94 var(--display); letter-spacing: -.05em; text-wrap: balance; }
.ws-herocard .lead { font-size: 17px; }

/* Кроки — картка ліворуч унизу, змінюється на місці (без накладання текстів) */
.ws-steps-h { position: absolute; z-index: 4; left: max(var(--gutter), calc((100% - 1360px) / 2)); top: 96px; margin: 0; padding: 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font: 700 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); opacity: var(--sh, 0); }
.ws-steps { position: absolute; z-index: 4; left: max(var(--gutter), calc((100% - 1360px) / 2)); bottom: clamp(24px, 6vh, 64px); width: min(420px, 100% - var(--gutter) * 2); margin: 0; padding: 0; list-style: none; }
.ws-step { position: absolute; left: 0; bottom: 0; width: 100%; padding: 22px 24px 24px; border-radius: 24px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -36px rgba(20, 18, 16, .55); opacity: var(--v, 0); translate: 0 calc((1 - var(--v, 0)) * 18px); visibility: var(--vis, hidden); }
.ws-step__k { display: block; margin-bottom: 10px; font: 700 12px/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
.ws-step h3 { margin: 0 0 8px; font: 900 clamp(24px, 2.4vw, 32px)/1.05 var(--display); letter-spacing: -.035em; }
.ws-step p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* Прогрес кроків — тонкі риски праворуч */
.ws-ticks { position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - 1360px) / 2)); bottom: clamp(24px, 6vh, 64px); display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; opacity: var(--sh, 0); }
.ws-ticks li { width: 34px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.ws-ticks li i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--ink); }

/* Фінал: заклик поверх загального плану */
.ws-final { position: absolute; z-index: 4; left: 50%; bottom: clamp(24px, 7vh, 72px); translate: -50% calc((1 - var(--f, 0)) * 20px); display: grid; justify-items: center; gap: 16px; width: min(560px, 100% - var(--gutter) * 2); padding: 24px 24px 26px; border-radius: 28px; text-align: center;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 60px -36px rgba(20, 18, 16, .55); opacity: var(--f, 0); visibility: var(--fvis, hidden); }
.ws-final p { margin: 0; font: 900 clamp(26px, 3.2vw, 44px)/1 var(--display); letter-spacing: -.04em; }
.ws-final div { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ws-final .btn--ghost { background: transparent; }

/* Пауза (WCAG 2.2.2): угорі праворуч. Плаваючі кнопки месенджерів на час сцени ховаються — свій клас, бо .is-away перемикає калькулятор */
.rd-services .msg-float.is-scene { opacity: 0; visibility: hidden; pointer-events: none; }
.ws-play { position: absolute; z-index: 5; right: max(var(--gutter), calc((100% - 1360px) / 2)); top: 92px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--ink); font: 600 14px/1 var(--display); cursor: pointer; }
.ws-play::before { content: ""; width: 10px; height: 12px; border-inline: 3.5px solid currentColor; box-sizing: border-box; }
.ws-play[aria-pressed="true"]::before { border: 0; width: 0; height: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.no-gl .ws-play { display: none; }

@media (max-width: 900px) {
  .ws-steps-h { top: 88px; right: calc(var(--gutter) + 9.5rem); } /* довгий h2 переноситься, а не ховається під «Пауза» */
  .ws-steps { bottom: 76px; }
  .ws-step { padding: 18px 18px 20px; }
  .ws-step h3 { font-size: 24px; }
  .ws-step p { font-size: 15px; }
  .ws-ticks { left: var(--gutter); right: auto; bottom: 36px; }
  .ws-final { bottom: 28px; }
  .ws-play { top: 84px; }
  .ws-herocard { top: auto; bottom: 20px; translate: 0 calc((1 - var(--h, 1)) * 30px); padding: 20px; }
  .ws-herocard h1 { font-size: clamp(34px, 10vw, 52px); }
  .ws-herocard .lead { font-size: 15px; }
  .ws-herocard .hero__b .btn { min-height: 44px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .ws-gl, .ws-poster { transition: none; } }

/* Без JavaScript (чи з помилкою скрипта) сцени немає: кроки — звичайним списком, нічого не закріплено */
html:not(.ws-js) .ws-pin { height: auto; width: auto; margin-inline: 0; }
html:not(.ws-js) main > .ws-pin { margin-top: 0; }
html:not(.ws-js) .ws-stick { position: relative; height: auto; overflow: visible; display: grid; gap: 16px; padding: 40px 0 64px; }
html:not(.ws-js) .ws-stage, html:not(.ws-js) .ws-ticks, html:not(.ws-js) .ws-play, html:not(.ws-js) .ws-snap { display: none; }
html:not(.ws-js) :is(.ws-herocard, .ws-steps-h, .ws-steps, .ws-final, .ws-poster) { position: static; inset: auto; translate: none; opacity: 1; visibility: visible; width: auto; height: auto; }
html:not(.ws-js) .ws-steps { display: grid; gap: 10px; }
html:not(.ws-js) .ws-step { position: static; opacity: 1; visibility: visible; translate: none; }
html:not(.ws-js) .ws-poster { border-radius: 28px; max-height: 70vh; }