/* v5: движение и сравнение «до/после». Подключается после style.css */

/* Шапка: компактнее при прокрутке, активный раздел подчёркнут */
.nav { transition: padding 200ms var(--ease-out), background-color 200ms ease; }
.nav.scrolled { padding-top: 8px; padding-bottom: 8px; background: rgba(229, 225, 216, 0.96); }
.nav nav a { text-decoration: none; position: relative; padding: 4px 0; }
.nav nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out);
}
.nav nav a.active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav nav a:hover::after { transform: scaleX(1); } }

/* Первый экран: фото раскрывается снизу вверх, текст и калькулятор — следом */
.js .hero-photo { clip-path: inset(100% 0 0 0 round var(--r)); transition: clip-path 1100ms cubic-bezier(0.77, 0, 0.175, 1); }
.js.ready .hero-photo { clip-path: inset(0 0 0 0 round var(--r)); }
.hero-photo img { transform: scale(1.08); transition: transform 1600ms var(--ease-out); }
.ready .hero-photo img { transform: scale(1); }
.js .hero-main > * { opacity: 0; transform: translateY(12px); transition: opacity 500ms ease, transform 600ms var(--ease-out); }
.js.ready .hero-main > * { opacity: 1; transform: none; }
.js.ready .hero-main > :nth-child(2) { transition-delay: 90ms; }
.js.ready .hero-main > :nth-child(3) { transition-delay: 180ms; }

/* Калькулятор: разница в день и список, который меняется по очереди */
.sum-day { margin-top: 12px; font-size: var(--s-body); }
.sum-day b { color: var(--accent-deep); }
.sum-inc li { animation: inc-in 280ms var(--ease-out) both; }
.sum-inc li:nth-child(2) { animation-delay: 40ms; }
.sum-inc li:nth-child(3) { animation-delay: 80ms; }
.sum-inc li:nth-child(4) { animation-delay: 120ms; }
@keyframes inc-in { from { opacity: 0; transform: translateY(6px); } }

/* Таблица: подсветка колонки по наведению */
.compare td, .compare th { transition: background-color 160ms ease; }
.compare.hl-0 [data-c="0"], .compare.hl-1 [data-c="1"] { background: var(--surface); }

/* «До / после» */
.why { align-items: start; }
.compare-photo { margin: 0; }
.compare-photo { --pos: 50%; display: grid; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 5; max-height: 76svh; width: 100%; touch-action: pan-y; }
.compare-photo img, .compare-photo .ba-handle, .compare-photo .ba-tag, .compare-photo .ba-range { grid-area: 1 / 1; }
.compare-photo img { width: 100%; height: 100%; object-fit: cover; }
.ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-handle {
  align-self: stretch; justify-self: start; width: 3px; margin-left: calc(var(--pos) - 1.5px);
  background: var(--paper); pointer-events: none; position: relative;
}
.ba-handle::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: var(--paper); color: var(--ink);
  display: grid; place-items: center; font-weight: 600; letter-spacing: 0.1em;
  transition: transform 160ms var(--ease-out);
}
.compare-photo.dragging .ba-handle::after { transform: translate(-50%, -50%) scale(0.92); }
.ba-tag {
  align-self: end; margin: 14px; max-width: 46%; padding: 8px 12px; border-radius: 12px;
  background: rgba(42, 29, 23, 0.82); color: var(--paper); font-size: 0.875rem; line-height: 1.3; pointer-events: none;
}
.ba-tag-l { justify-self: start; }
.ba-tag-r { justify-self: end; background: var(--accent); }
.ba-range { width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ba-range:focus-visible ~ .ba-handle, .compare-photo:has(.ba-range:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.why-side { position: sticky; top: 96px; }

/* Полосы ставки: числа появляются вместе с полосой */
.bar i { justify-content: flex-start; }

/* Шаги: появляются по очереди, последний «загорается» */
.js .steps li { opacity: 0; transform: translateY(16px); transition: opacity 360ms ease, transform 420ms var(--ease-out), background-color 400ms ease; }
.js .steps.in li { opacity: 1; transform: none; }
.js .steps.in li:nth-child(2) { transition-delay: 90ms; }
.js .steps.in li:nth-child(3) { transition-delay: 180ms; }
.js .steps.in li:nth-child(4) { transition-delay: 270ms; }

/* Кнопки и карточки: отклик */
.actions a span { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .actions a:hover span { transform: translateX(4px); } }

/* Фото плавно «проявляются» при входе в экран и чуть смещаются при прокрутке (где браузер умеет) */
@supports (animation-timeline: view()) {
  .houses-photo img, .footer-bg {
    animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
  }
  @keyframes drift { from { transform: scale(1.1) translateY(-3%); } to { transform: scale(1.1) translateY(3%); } }
  .houses-photo { overflow: hidden; border-radius: var(--r); }
}
.js .houses-photo { clip-path: inset(0 0 100% 0 round var(--r)); transition: clip-path 900ms cubic-bezier(0.77, 0, 0.175, 1); }
.js .houses-photo.in { clip-path: inset(0 0 0 0 round var(--r)); }

@media (max-width: 1080px) {
  .why-side { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-photo, .js .houses-photo { clip-path: none; transition: none; }
  .hero-photo img { transform: none; transition: none; }
  .js .hero-main > *, .js .steps li { transform: none; transition: opacity 150ms ease; }
  .sum-inc li { animation: none; }
  .houses-photo img, .footer-bg { animation: none !important; }
}