/* ============================================================
   CITY VILLA CLUB — редизайн: шар ефектів
   Адаптації з 21st.dev у vanilla (без React/framer-motion).
   Zoom Parallax (@sshahaider) винесено в demo.css — на home.php блоку немає,
   а 80+ рядків CSS вантажились на кожен показ головної намарно (2026-08-23).
   Scroll Reveal Content A (@abui, таймлайн .rd-tl) видалено 2026-08-24 —
   «Хід будівництва» став горизонтальною горталкою (.rd-gslider, home-v2.css).
   Прогрес скролу героя веде JS: елементу ставиться CSS-змінна --p (0..1).
   ============================================================ */

/* ---------- Hero: Ken Burns + паралакс + маска-reveal рядків ---------- */
.rd-hero__img img {
  animation: rd-kenburns 14s ease-out forwards;
  will-change: transform;
}
@keyframes rd-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
/* паралакс: JS ставить --p (0..1 у межах видимості hero) */
.rd-hero[style*='--p'] .rd-hero__img { transform: translateY(calc(var(--p) * 12vh)); will-change: transform; }

/* рядки заголовка виїжджають з маски */
.rd-mask { display: block; overflow: hidden; }
.rd-mask > span { display: block; transform: translateY(110%); transition: transform .9s var(--rd-ease); }
.is-loaded .rd-mask > span { transform: none; }
.rd-mask:nth-child(2) > span { transition-delay: .12s; }
.rd-mask:nth-child(3) > span { transition-delay: .24s; }

/* ротатор реальних слоганів сайту */
.rd-rotator {
  position: relative;
  height: 1.6em;
  overflow: hidden;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.05rem, .9rem + .9vw, 1.5rem);
  color: var(--rd-amber);
}
.rd-rotator span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity .5s var(--rd-ease), transform .5s var(--rd-ease);
}
@media (max-width: 759px) { .rd-rotator { height: 2.9em; } .rd-rotator span { line-height: 1.25; } }
.rd-rotator span.is-cur { opacity: 1; transform: none; }
.rd-rotator span.is-out { opacity: 0; transform: translateY(-100%); }

/* ---------- Hero-слайдер: кросфейд реальних кадрів ---------- */
.rd-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--rd-ease);
}
.rd-hero__slide.is-cur { opacity: 1; }
.rd-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.rd-hero__slide.is-cur img { animation: rd-kenburns 9s ease-out forwards; }

/* ---------- Marquee-стрічка фактів (чиста CSS-анімація) ---------- */
.rd-marquee {
  overflow: hidden;
  border-block: 1px solid var(--rd-hairline);
  background: var(--rd-white);
  padding-block: .95rem;
}
/* Тривалість задає ШВИДКІСТЬ, а не темп появи фактів: трек тепер утричі
   довший (18 фактів × 2 копії проти 6 × 1), тож і час пропорційно більший —
   інакше стрічка полетіла б утричі швидше й стала нечитабельною.
   140s на 5726px половини треку ≈ 41 px/с — швидкість, на якій напис
   встигаєш прочитати, поки він проходить повз. */
.rd-marquee__track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: rd-marquee 140s linear infinite;
}
.rd-marquee:hover .rd-marquee__track { animation-play-state: paused; }
@keyframes rd-marquee { to { transform: translateX(-50%); } }
.rd-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--rd-navy);
  white-space: nowrap;
}
.rd-marquee__item::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--rd-amber); }

/* ---------- Floating hover-preview на прайс-листі (з лендінга) ---------- */
.rd-float {
  position: fixed;
  z-index: 60;
  width: 300px;
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--rd-shadow-lift);
  pointer-events: none;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .25s var(--rd-ease), transform .25s var(--rd-ease);
}
.rd-float img { width: 100%; height: 100%; object-fit: cover; }
.rd-float.is-on { opacity: 1; transform: none; }
.rd-float__tag {
  position: absolute;
  left: .6rem; bottom: .6rem;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rd-plate);
  padding: .4em .8em;
  border-radius: 4px;
}
@media (hover: none), (max-width: 899px) { .rd-float { display: none; } }
/* Мініатюра фасаду в рядку типу.
   Умова показу — дзеркальна до вимкнення floating-прев'ю вище: там `(hover: none),
   (max-width: 899px)`. Раніше тут стояло тільки `max-width: 899px`, і планшет
   в альбомній орієнтації (900-1199 px, тач) провалювався між двома правилами:
   hover-прев'ю недоступне, мініатюра прихована — фасад не було видно взагалі.
   Тепер будь-який тач-пристрій показує фото в самому рядку. */
.rd-trow__mph { display: none; }
@media (hover: none), (max-width: 899px) {
  /* Фото типу. Було aspect-ratio 16/9 при object-fit:cover, а рендери фасадів
     вертикальні (0,73-0,84) — з будинку лишалася смуга, видно було 41% кадру:
     ні даху, ні входу. Тепер висоту диктує саме фото. */
  .rd-trow__mph { display: block; grid-area: mph; border-radius: 10px; overflow: hidden; }
  .rd-trow__mph img { width: 100%; height: auto; display: block; }
}
/* Телефони: фото окремим рядком під ціною, на всю ширину картки.
   Поріг 760, а не 899 — на 820 px (планшет у портреті) фото на всю ширину дало б
   близько 900 px висоти на один тип, тобто цілий екран на кожен рядок. */
@media (max-width: 759px) {
  .rd-trow__mph { margin-top: .7rem; }
  .rd-trow {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'num name' 'num spec' 'num price' 'mph mph';
  }
}
/* Усе, ширше за телефон, де мініатюра видима: фото окремою колонкою в рядку.
   Дві умови, бо мініатюру показують дві різні причини - тач-екран будь-якої
   ширини і вузьке вікно на десктопі (там floating-прев'ю теж вимкнене).
   Об'єднати в `min-width: 760px` не можна: на великому десктопі мініатюра
   прихована, і колонка під неї лишилася б порожньою дірою в рядку. */
@media (hover: none) and (min-width: 760px),
       (min-width: 760px) and (max-width: 899px) {
  .rd-trow {
    grid-template-columns: auto clamp(150px, 17vw, 210px) 1fr auto;
    grid-template-areas: 'num mph name price' 'num mph spec price';
  }
}

/* ---------- Image reveal: clip-path wipe знизу ---------- */
.rd-wipe { clip-path: inset(14% 0 0 0); transition: clip-path 1s var(--rd-ease); }
.rd-wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- Особливості: список із hairline-розграфленням ---------- */
.rd-feat { border-top: 1px solid var(--rd-hairline); }
.rd-feat__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .4rem 3rem;
  padding-block: clamp(1.3rem, 1rem + 1.5vw, 2.1rem);
  border-bottom: 1px solid var(--rd-hairline);
}
@media (min-width: 760px) { .rd-feat__row { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
.rd-feat__row h3 { margin: 0; }
.rd-feat__row p { margin: 0; color: var(--rd-muted); }

/* ---------- Переваги: пункти з дужковим маркером ---------- */
.rd-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .rd-perks { grid-template-columns: 1fr 1fr; gap: 1.2rem 2.6rem; } }
.rd-perks li { position: relative; padding-left: 1.7em; }
.rd-perks li::before {
  content: '\203A';
  position: absolute;
  left: .2em;
  top: -.08em;
  color: var(--rd-amber);
  font-weight: 900;
  font-style: italic;
  font-size: 1.25em;
}
.rd-perks b { color: var(--rd-navy); font-weight: 500; }

/* reduced-motion: глобальний кілер у tokens.css вимикає transition/animation.
   Тут страхуємо стани, що ховають контент. */

/* Текст, який має сенс лише за наявності курсора («наведіть», «hover»).
   На тач-екранах він обіцяє жест, якого там немає. */
@media (hover: none) { .rd-hoveronly { display: none; } }