/* Дом у Леса — базовые стили и анимации (вариант C «Глубина») */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f1f3ee; }
a { color: #1f4d3a; }
a:hover { color: #10291f; }
img { max-width: 100%; }
section[id] { scroll-margin-top: 104px; }
input::placeholder { color: #55635b; opacity: 1; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #1f4d3a; outline-offset: 2px; }
#booking a:focus-visible { outline-color: #eaa63e; }
button:disabled { opacity: .6; cursor: default; }

/* Фото и карта заполняют свою рамку */
[data-m="photo"], [data-m="map"] { position: relative; overflow: hidden; }
[data-m="photo"] > img, [data-m="map"] > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
[data-m="photo"] > img { object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
[data-m="photo"]:hover > img { transform: scale(1.04); }

/* Форма: ошибки и статус */
input[aria-invalid="true"] { border-color: #b3261e !important; border-width: 2px !important; }
.form-status { grid-column: 1 / -1; margin: 0; min-height: 21px; font-size: 14px; line-height: 21px; color: #55635b; }
.form-status[data-type="error"] { color: #b3261e; }
.form-status[data-type="success"] { color: #1f4d3a; font-weight: 500; }

/* Шапка: липкая, прячется при прокрутке вниз */
[data-motion] div:has(> header) { position: sticky; top: 0; z-index: 20; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
[data-motion] div[data-hide]:has(> header) { transform: translateY(-120%); }
[data-motion] header { transition: box-shadow .3s ease; }
[data-motion] header[data-stuck] { box-shadow: 0 12px 40px rgba(20,32,27,.18) !important; }

/* Наведение */
[data-motion] [data-b] { transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
[data-motion] [data-b]:hover { transform: scale(1.04); }
[data-motion] article[data-m="card"][data-in]:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(20,32,27,.18); }

/* Появление при прокрутке. Скрытое состояние включается только когда JS поставил data-ready */
@media (prefers-reduced-motion: no-preference) {
  [data-motion] [data-r="1"] { transition: opacity .7s ease var(--d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms), filter .7s ease var(--d,0ms), box-shadow .3s ease; }
  [data-motion][data-ready] [data-r="1"]:not([data-in]) { opacity: 0; filter: blur(8px); transform: scale(.98); }
  [data-motion] [data-r="1"][data-m="photo"] { transition: opacity .9s ease var(--d,0ms), translate .2s linear; }
  [data-motion][data-ready] [data-r="1"][data-m="photo"]:not([data-in]) { opacity: 0; filter: none; transform: none; }
  [data-motion][data-ready] [data-r="1"][data-m="photo"]:not([data-in]) > img { transform: scale(1.08); }
  [data-motion] [data-r="1"][data-m="photo"] > img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
  [data-motion] [data-r="1"][data-m="card"] { transition: opacity .5s ease var(--d,0ms), transform .7s cubic-bezier(.34,1.4,.64,1) var(--d,0ms), box-shadow .3s ease; }
  [data-motion][data-ready] [data-r="1"][data-m="card"]:not([data-in]) { opacity: 0; filter: none; transform: translateY(40px); }
  [data-motion][data-ready] [data-r="1"][data-m="stat"]:not([data-in]) { opacity: 0; filter: none; transform: translateY(16px); }
  [data-motion] [data-r="1"][data-m="title"] { transition-duration: 1s; }
  [data-motion][data-ready] [data-r="1"][data-m="title"]:not([data-in]) { opacity: 0; filter: blur(14px); transform: scale(.96); }
  [data-motion][data-ready] [data-r="1"][data-m="header"]:not([data-in]) { opacity: 0; filter: none; transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
  [data-motion] *, [data-motion] *::before, [data-motion] *::after { transition: none !important; }
}

/* Телефон */
@media (max-width: 720px) {
  header nav { display: none !important; }
  section[id] { scroll-margin-top: 88px; }
}