/* «Аквариус · motion» — выразительный слой движения поверх site.css.
   Правила (скилл animate, Эмиль Ковальски): только transform / opacity (+ clip-path и --p у слайдера), ease-out на появлении,
   ease-in-out на движении по экрану, интерфейсные отклики до 300 мс, «показ» на маркетинговых блоках до 1,5 с, один раз;
   hover только на устройствах с мышью; «уменьшить движение» = мягкое появление без сдвигов.
   Всё включается классом html.mo (его ставит маленький скрипт в <head>); без JS и при сбое сайт показывается как обычно. */

@property --p { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

/* ---------- 0. переходы между страницами (cross-document View Transitions): шапка стоит на месте, содержимое плавно подменяется ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }
::view-transition-old(root) { animation: vt-out 140ms var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in 280ms var(--ease-out) 40ms both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- 1. индикатор прокрутки страницы ---------- */
.progress { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 3px; background: var(--olive); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .mo .progress { display: block; animation: progress-grow linear both; animation-timeline: scroll(root); }
  @keyframes progress-grow { to { transform: scaleX(1); } }
}

/* ---------- 2. шапка: тень появляется при прокрутке, подчёркивание меню «выезжает» ---------- */
.site-header { transition: box-shadow 220ms var(--ease-out); }
.mo .site-header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(42, 41, 39, .35); }
.mo .nav a { position: relative; border-bottom-color: transparent !important; }
.mo .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--olive); transform: scaleX(0); transform-origin: 0 50%; transition: transform 240ms var(--ease-out); }
.mo .nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .mo .nav a:hover::after { transform: scaleX(1); } }

/* ---------- 3. первый экран: слова заголовка поднимаются из-под маски, фото открывается «шторкой», внутри оседает и едет при прокрутке ---------- */
.mo .words { animation: none; }
.mo .words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.mo .words .w__i { display: inline-block; animation: word-up 820ms var(--ease-out) backwards; animation-delay: calc(140ms + var(--wi, 0) * 55ms); }
@keyframes word-up { from { transform: translateY(108%); } }

.mo .hero__media { animation: none; }
.mo .hero__frame { overflow: hidden; border-radius: var(--radius); animation: curtain 1000ms var(--ease-in-out) 160ms backwards; }
.mo .hero__media img { border-radius: 0; scale: 1.1; animation: settle 1600ms var(--ease-out) 160ms backwards; }
@keyframes curtain { from { clip-path: inset(0 100% 0 0); } }
@keyframes settle { from { scale: 1.32; } }
@supports (animation-timeline: scroll()) {
  .mo .hero__media img { animation: settle 1600ms var(--ease-out) 160ms backwards, hero-par linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 75vh; }
  @keyframes hero-par { to { translate: 0 5%; } }
}

/* кнопки первого экрана: стрелка выезжает при наведении */
.mo .hero .btn { gap: 10px; }
.mo .hero .actions .btn::after { content: "→"; display: inline-block; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mo .hero .actions .btn:hover::after { transform: translateX(4px); } }

/* ---------- 4. появление блоков при прокрутке (один раз, с каскадом 70 мс) ---------- */
.mo :is(.section__head, .cards > .card, .project-grid > .project-card, .steps-list > li, .faq, .split > div, .callout, .price-overview > div, .compare__pair, .link-list li, .rooms > .room, .chips, .calc, .pkg-table-wrap, .pkg-note, .contact-list, .gallery--preview, .gallery--project, .section__more):not(.is-in) { opacity: 0; }
.mo :is(.section__head, .cards > .card, .project-grid > .project-card, .steps-list > li, .faq, .split > div, .callout, .price-overview > div, .compare__pair, .link-list li, .rooms > .room, .chips, .calc, .pkg-table-wrap, .pkg-note, .contact-list, .gallery--preview, .gallery--project, .section__more).is-in { animation: rv-in 720ms var(--ease-out) var(--d, 0ms) backwards; }
@keyframes rv-in { from { opacity: 0; transform: translateY(20px); } }

/* фото карточек проектов «оседают» при появлении */
.mo .project-card.is-in .project-card__img img { animation: img-settle 1100ms var(--ease-out) var(--d, 0ms) backwards; }
@keyframes img-settle { from { scale: 1.14; } }
/* кружок со стрелкой на фото проекта */
.mo .project-card__img::after { content: "→"; position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 1.15rem; opacity: 0; transform: translate(10px, 10px) scale(.85); transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .mo .project-card__link:hover .project-card__img::after { opacity: 1; transform: none; } }
.mo .project-card__link:focus-visible .project-card__img::after { opacity: 1; transform: none; }

/* линия шага «прорисовывается» */
.mo .steps-list li { border-top-color: transparent; position: relative; }
.mo .steps-list li::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease-in-out) var(--d, 0ms); }
.mo .steps-list li.is-in::after { transform: scaleX(1); }
.mo .steps-list li::before { transition: letter-spacing 400ms var(--ease-out); }

/* карточки выбора: лёгкий подъём (только мышь) */
.mo .card--choice, .mo .card--price { transition: transform 220ms var(--ease-out), border-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .mo .card--choice:hover, .mo .card--price:hover { transform: translateY(-4px); border-color: var(--olive); }
}

/* ---------- 5. сравнение «проект — реализация»: слайдер с подсказкой ---------- */
.cmp { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--tint); user-select: none; -webkit-user-select: none; }
.cmp__stage { position: relative; aspect-ratio: 16 / 9; --p: 50%; }
.cmp.is-hint .cmp__stage { animation: cmp-hint 2000ms var(--ease-in-out) 250ms 1; }
@keyframes cmp-hint { 0% { --p: 50%; } 30% { --p: 30%; } 70% { --p: 70%; } 100% { --p: 50%; } }
.cmp__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__b { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cmp__bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(42, 41, 39, .25); pointer-events: none; }
.cmp__knob { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 12px rgba(42, 41, 39, .35); transition: transform 180ms var(--ease-out); }
.cmp__knob::before, .cmp__knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.cmp__knob::before { left: 9px; border-right-color: var(--text); border-left-width: 0; }
.cmp__knob::after { right: 9px; border-left-color: var(--text); border-right-width: 0; }
.cmp:active .cmp__knob { transform: scale(1.1); }
.cmp__tag { position: absolute; bottom: 12px; padding: 4px 12px; background: rgba(42, 41, 39, .82); color: #fff; font-size: .9rem; font-weight: 500; border-radius: 3px; pointer-events: none; }
.cmp__tag--l { left: 12px; }
.cmp__tag--r { right: 12px; }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp:has(.cmp__range:focus-visible) { outline: 2px solid var(--olive); outline-offset: 3px; }
.cmp-on .compare__row { display: none; }
@media (max-width: 640px) { .cmp__stage { aspect-ratio: 4 / 3; } .cmp__tag { font-size: .85rem; bottom: 10px; } }

/* ---------- 6. формы: выбор вариантов отзывается ---------- */
.mo .choice { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.mo .choice:active { transform: scale(.98); }
.mo .field input[type="text"], .mo .field input[type="tel"], .mo .field textarea { transition: border-color 160ms ease, box-shadow 160ms ease; }
.mo .field input:focus, .mo .field textarea:focus { box-shadow: 0 0 0 4px var(--olive-tint); }

/* ---------- «уменьшить движение»: остаются мягкие появления, уходят сдвиги, масштаб, шторка, параллакс, полоса, слайдер-подсказка ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo .words .w__i { animation: none; }
  .mo .hero__frame { animation: fade-only 300ms ease backwards; }
  .mo .hero__media img { scale: 1; animation: none; }
  .mo :is(.section__head, .cards > .card, .project-grid > .project-card, .steps-list > li, .faq, .split > div, .callout, .price-overview > div, .compare__pair, .link-list li, .rooms > .room, .chips, .calc, .pkg-table-wrap, .pkg-note, .contact-list, .gallery--preview, .gallery--project, .section__more).is-in { animation: fade-only 300ms ease backwards; }
  .mo .project-card.is-in .project-card__img img { animation: none; }
  .mo .steps-list li::after { transform: scaleX(1); transition: none; }
  .mo .progress { display: none; }
  .cmp.is-hint .cmp__stage { animation: none; }
  .mo .card--choice:hover, .mo .card--price:hover { transform: none; }
  @keyframes fade-only { from { opacity: 0; } }
}