/*! GP RealEstate · 06-motion.css - УВЕСЬ РУХ САЙТУ В ОДНОМУ ФАЙЛІ.
 *
 *  Чому окремий файл: у GlapInvest анімації були розсіяні по 04-sections,
 *  99-overrides і 09-loader, тому reduced-motion доводилось глушити тричі,
 *  а hero-заголовок стартував з opacity:0 і псував LCP. Тут:
 *
 *    1. Кожна анімація описана один раз.
 *    2. Один блок prefers-reduced-motion вимикає ВСЕ.
 *    3. LCP-елементи (hero h1, перше фото) свідомо НЕ анімуються.
 */

/* ═══ 1. ПРЕЛОАДЕР ═══════════════════════════════════════════════════════
   Знімається на DOMContentLoaded (не на window.load) - саме через це
   в GlapInvest FCP/LCP тримався на 2,9-3,6 с. */
.loader{
  position:fixed;inset:0;z-index:var(--z-loader);
  display:grid;place-items:center;align-content:center;gap:var(--sp-6);
  background:var(--green-darker);
  transition:opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
}
.loader.is-done{opacity:0;visibility:hidden}
.loader-mark{width:76px;height:76px;padding:7px;border-radius:12px;background:#fff;object-fit:contain;animation:pulse 1.4s ease-in-out infinite}
.loader-bar{position:relative;width:120px;height:2px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.loader-bar::after{
  content:"";position:absolute;inset:0;width:40%;border-radius:2px;background:#9ADB84;
  animation:slide 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(350%)}}

/* Анти-FOUC: ховаємо ТІЛЬКИ вміст <main>, а не всю сторінку.
   Шапка й прелоадер малюються одразу - сторінка ніколи не виглядає «білою». */
html.is-loading main{visibility:hidden}

/* ═══ 2. ПОЯВА ПРИ СКРОЛІ ════════════════════════════════════════════════
   Клас .reveal ставить js/05-motion.js, .is-in - IntersectionObserver. */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
  transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-in{opacity:1;transform:none}

/* ═══ 3. ВХІД HERO ═══════════════════════════════════════════════════════
   ВАЖЛИВО: h1 тут НЕМАЄ - це LCP-елемент, він малюється миттєво. */
.hero .badge,
.hero .lede,
.hero .hero-cta,
.hero .trust,
.hero .re-search{
  animation:fade-up var(--dur-slow) var(--ease) both;
  animation-delay:var(--reveal-delay, 0ms);
}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ═══ 4. ПЛАВНА ПОЯВА ВІДКЛАДЕНИХ ЗОБРАЖЕНЬ ══════════════════════════════ */
img[loading="lazy"]{opacity:1;transition:transform var(--dur) var(--ease)}

/* ═══ 5. СКЕЛЕТОН (поки рендериться каталог) ═════════════════════════════ */
.skeleton{
  background:linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease-in-out infinite;
  border-radius:var(--radius-sm);
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}

/* ═══ 6. ЄДИНИЙ ВИМИКАЧ ══════════════════════════════════════════════════
   Один блок глушить усе. Не потребує !important, бо стоїть останнім
   у власному файлі й має ту саму специфічність. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms;
    animation-iteration-count:1;
    transition-duration:.01ms;
    scroll-behavior:auto;
  }
  .reveal{opacity:1;transform:none}
}