/* «Колодцы24» — общий слой оживления внутренних страниц (этап 2). Подключается @import из pages/<адрес>.css. Префикс .k-in- */

/* ---------- Первый экран услуги: фото мягко «наезжает», плашки поднимаются лесенкой ---------- */
.k-shero__pic img { animation: k-in-kb 1.6s var(--ease) both; }
.k-shero__chips li { animation: k-in-up .6s var(--ease) both; }
.k-shero__chips li:nth-child(1) { animation-delay: .35s; }
.k-shero__chips li:nth-child(2) { animation-delay: .5s; }
.k-shero__chips li:nth-child(3) { animation-delay: .65s; }
.k-price { position: relative; overflow: hidden; }
.k-price::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); transform: skewX(-18deg); animation: k-in-shine 1.4s .9s ease-out both; pointer-events: none; }
@keyframes k-in-kb { from { transform: scale(1.08); } to { transform: none; } }
@keyframes k-in-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes k-in-shine { from { left: -40%; } to { left: 120%; } }

/* ---------- Этапы: лёгкий подъём карточки и приближение кадра при наведении ---------- */
.k-steps__rail figure { transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out); }
.k-steps__rail figure > img { transition: transform var(--t-slow) var(--ease-out); }
.k-steps__rail figure:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--line), var(--sh); }
.k-steps__rail figure:hover > img { transform: scale(1.05); }
.k-steps__rail figure { position: relative; }
.k-steps__rail figcaption { background: var(--white); }
.k-steps__rail figcaption i { transition: transform var(--t) var(--ease-out); }
.k-steps__rail figure:hover figcaption i { transform: rotate(-8deg) scale(1.08); }

/* ---------- Прайс: строки лесенкой после появления таблицы ---------- */
.k-js .k-ptable__box[data-anim]:not(.is-in) tbody tr, .k-js [data-in-rows][data-anim]:not(.is-in) > * { opacity: 0; transform: translateX(-14px); }
.k-js .k-ptable__box[data-anim] tbody tr, .k-js [data-in-rows][data-anim] > * { transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), background-color var(--t-fast) var(--ease-out); transition-delay: calc(.15s + var(--ri, 0s)); }
.k-ptable__t tbody tr:hover { background: var(--g-ll); }
.k-ptable__t tbody tr:hover td { color: var(--g-dd); }

/* ---------- Живые схемы ---------- */
.k-in-build .k-in-part { transition: opacity .55s var(--ease-out); transition-delay: var(--pi, 0s); }
.k-in-build:not(.is-built) .k-in-part { opacity: 0; }
.k-in-build .k-scheme__pin { transition-delay: calc(var(--pi, 0s) + .3s); }
/* волна воды */
.k-in-wave path { animation: k-in-wave 3.2s linear infinite; animation-play-state: paused; }
.k-in-wave path + path { animation-duration: 2.4s; }
.k-in-glint { opacity: 0; animation: k-in-glint 2.7s ease-in-out infinite; animation-play-state: paused; }
@keyframes k-in-wave { from { transform: translateX(0); } to { transform: translateX(40px); } }
@keyframes k-in-glint { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
/* поток по трубе */
.k-in-flow { stroke-dasharray: 3 14; opacity: .9; animation: k-in-flow 1.1s linear infinite; animation-play-state: paused; }
@keyframes k-in-flow { to { stroke-dashoffset: -17; } }
/* капли */
.k-in-drops path { opacity: 0; animation: k-in-drop 1.8s ease-in infinite; animation-play-state: paused; }
@keyframes k-in-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--len, 40px)); } }
/* пузырьки */
.k-in-bub circle { opacity: 0; animation: k-in-bub 3s ease-out infinite; animation-play-state: paused; }
@keyframes k-in-bub { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(calc(var(--len, 60px) * -1)); } }
/* шнек: покачивание вверх-вниз и «вращение» витков */
.k-in-auger { transform-box: fill-box; transform-origin: 50% 0; animation: k-in-auger 2.6s ease-in-out infinite; animation-play-state: paused; }
@keyframes k-in-auger { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.k-in-turn { transform-box: fill-box; transform-origin: 50% 50%; animation: k-in-turn .9s linear infinite; animation-play-state: paused; }
@keyframes k-in-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
/* медленное вращение (вентилятор, крыльчатка насоса) */
.k-in-spin { transform-box: fill-box; transform-origin: 50% 50%; animation: k-in-spin 2.4s linear infinite; animation-play-state: paused; }
@keyframes k-in-spin { to { transform: rotate(360deg); } }
/* мягкое мерцание (тепло, лампа, свечение) */
.k-in-glow { animation: k-in-glow 2.4s ease-in-out infinite; animation-play-state: paused; }
@keyframes k-in-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* уровень: плавно поднимается и опускается (стоки в камере, вода в колодце) */
.k-in-level { transform-box: fill-box; transform-origin: 50% 100%; animation: k-in-level 5s ease-in-out infinite; animation-play-state: paused; }
@keyframes k-in-level { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9); } }
/* пульс выбранного узла */
.k-in-pulse { fill: none; stroke: var(--g); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; pointer-events: none; }
.k-scheme__pin.is-on .k-in-pulse { animation: k-in-pulse 1.8s ease-out infinite; animation-play-state: paused; }
@keyframes k-in-pulse { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
.k-scheme__pin:hover circle:not(.k-in-pulse) { stroke: var(--g); }
/* петли крутятся только пока схема на экране */
.is-live .k-in-wave path, .is-live .k-in-glint, .is-live .k-in-flow, .is-live .k-in-drops path, .is-live .k-in-bub circle, .is-live .k-in-auger, .is-live .k-in-turn, .is-live .k-in-spin, .is-live .k-in-glow, .is-live .k-in-level, .is-live .k-scheme__pin.is-on .k-in-pulse { animation-play-state: running; }

/* ---------- Декоративные изолированные объекты у краёв блоков ---------- */
.k-in-rel { position: relative; overflow: clip; isolation: isolate; }
.k-in-rel > .k-wrap { position: relative; z-index: 1; }
.k-in-deco { position: absolute; z-index: 0; width: var(--s, 220px); pointer-events: none; display: none; }
.k-in-deco img { width: 100%; height: auto; filter: drop-shadow(0 22px 24px rgba(23, 19, 18, .28)); animation: k-in-sway 7s ease-in-out infinite; }
.k-js .k-in-deco[data-anim] { transition: opacity var(--t-slow) var(--ease-out); }
.k-in-deco--tr { top: var(--t, 40px); right: var(--x, -60px); }
.k-in-deco--br { bottom: var(--t, 30px); right: var(--x, -60px); }
.k-in-deco--tl { top: var(--t, 40px); left: var(--x, -60px); }
.k-in-deco--bl { bottom: var(--t, 30px); left: var(--x, -60px); }
.k-in-deco--flip img { transform: scaleX(-1); animation-name: k-in-sway-f; }
@keyframes k-in-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-6px); } }
@keyframes k-in-sway-f { 0%, 100% { transform: scaleX(-1) rotate(-2deg); } 50% { transform: scaleX(-1) rotate(2deg) translateY(-6px); } }
@media (min-width: 1100px) { .k-in-deco { display: block; } }
/* На телефоне — только объекты с пометкой --m: маленькие, в углу заголовка, не заходят на текст */
@media (max-width: 1099px) {
	.k-in-deco--m { display: block; width: var(--sm, 96px); top: 18px; right: -18px; bottom: auto; left: auto; opacity: .95; }
	.k-in-deco--m img { filter: drop-shadow(0 10px 12px rgba(23, 19, 18, .25)); }
}

/* ---------- Итог калькулятора: короткий «толчок» при пересчёте ---------- */
.k-in-bump { animation: k-in-bump .45s var(--ease); }
@keyframes k-in-bump { 0% { transform: scale(1); } 35% { transform: scale(1.06); color: var(--g-d); } 100% { transform: scale(1); } }
.k-bill__sum b { display: inline-block; transform-origin: 0 50%; }

/* ---------- Смежные услуги: стрелка-подсказка на карточке ---------- */
.k-related .k-card__body b { transition: transform var(--t) var(--ease-out); }
.k-related .k-card:hover .k-card__body b { transform: translateX(4px); }

/* ---------- «Условия работы»: талон с перфорацией после прайса ---------- */
.k-in-terms { padding: 0 0 clamp(48px, 6vw, 80px); background: var(--stone); }
.k-in-terms__ticket { position: relative; padding: 22px 18px 18px; border-radius: var(--r); background: var(--ink); color: var(--white); overflow: hidden; }
.k-in-terms__ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(90deg, var(--g-btn) 0 22px, transparent 22px 30px); }
.k-in-terms__h { margin-bottom: 14px; font: 700 14px/1 var(--f-h); letter-spacing: .1em; text-transform: uppercase; color: #9fe3c2; }
.k-in-terms__list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 14px; overflow: hidden; background: var(--ink-3); }
.k-in-terms__list li { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px; background: var(--ink-2); }
.k-in-terms__list b { font: 800 clamp(24px, 3vw, 34px)/1 var(--f-h); color: var(--g); white-space: nowrap; }
.k-in-terms__list li > span { font-size: 15px; line-height: 1.4; color: #e3dcd8; }
.k-in-terms__foot { margin-top: 14px; font-size: 15px; color: #cfc6c2; }
@media (min-width: 900px) {
	.k-in-terms__ticket { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 26px; align-items: center; padding: 28px 28px 22px; }
	.k-in-terms__h { margin: 0; font-size: 22px; line-height: 1.15; letter-spacing: .04em; color: var(--white); }
	.k-in-terms__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.k-in-terms__list li { padding: 20px 18px; }
	.k-in-terms__foot { grid-column: 2; }
}

/* ---------- Уменьшить движение: всё статично ---------- */
@media (prefers-reduced-motion: reduce) {
	.k-shero__pic img, .k-shero__chips li, .k-price::after, .k-in-deco img, .k-in-bump { animation: none; }
	.k-in-wave path, .k-in-glint, .k-in-flow, .k-in-drops path, .k-in-bub circle, .k-in-auger, .k-in-turn, .k-in-spin, .k-in-glow, .k-in-level, .k-in-pulse { animation: none !important; }
	.k-in-drops, .k-in-bub, .k-in-glint { display: none; }
	.k-steps__rail figure, .k-steps__rail figure > img { transition: none; }
}