/* ==========================================================================
   Анимации и микро-взаимодействия. Без библиотек.
   Появление блоков включается только когда JS доступен (класс html.anim)
   и пользователь не просил уменьшить движение.
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --reveal-duration: .9s;
  --header-h: 97px;
}

/* ---------- Полоса прогресса прокрутки ---------- */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: linear-gradient(90deg, #FFB342, var(--accent) 60%, #EF5A18);
  transform-origin: 0 50%;
  transform: scaleX(0);
  box-shadow: 0 0 12px rgba(245, 130, 32, .55);
}

/* ---------- Шапка: фиксируется, при прокрутке — стекло с размытием ---------- */
html.header-fixed .hero { padding-top: var(--header-h); }
html.header-fixed .hero .site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform .5s var(--ease-out), background-color .4s var(--ease-soft),
              border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}
html.header-fixed .site-header.is-scrolled {
  background: rgba(250, 247, 241, .82);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: rgba(22, 32, 46, .08);
  box-shadow: 0 10px 30px -18px rgba(70, 50, 20, .25);
}
/* Служебный класс: мгновенный замер высоты шапки без анимаций */
.site-header.is-measuring, .site-header.is-measuring * { transition: none !important; }

/* Телефоны и планшеты: меню переносится на вторую строку — при прокрутке сворачиваем его,
   чтобы шапка занимала меньше места. Логотип и кнопка звонка остаются. */
@media (max-width: 1000px) {
  html.header-fixed .header-inner { row-gap: 0; transition: padding .4s var(--ease-out); }
  html.header-fixed .navigation {
    margin-top: 16px;
    max-height: 120px;
    overflow: hidden;
    transition: max-height .45s var(--ease-out), margin-top .45s var(--ease-out), opacity .3s var(--ease-soft), visibility .45s;
  }
  html.header-fixed .site-header.is-scrolled .header-inner { padding: 12px 0; }
  html.header-fixed .site-header.is-scrolled .navigation { max-height: 0; margin-top: 0; opacity: 0; visibility: hidden; }
}

/* Пункты меню: тонкая линия-подчёркивание */
.navigation a { position: relative; padding: 6px 0; transition: color .3s var(--ease-soft); }
.navigation a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.navigation a:hover::after,
.navigation a.is-active::after { transform: scaleX(1); transform-origin: left; }
.navigation a.is-active { color: var(--accent); }

/* ---------- Кнопки ---------- */
.button, .selection-fields button, .plan-tabs button, .social-profile,
.slider-arrows button, .circle-link, .plan-select {
  transition: background-color .3s var(--ease-soft), color .3s var(--ease-soft),
              border-color .3s var(--ease-soft), transform .35s var(--ease-out),
              box-shadow .35s var(--ease-soft);
}
.button:hover, .selection-fields button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(245, 130, 32, .55);
}
.button:active, .selection-fields button:active { transform: translateY(0); }
.button span, .plan-select span { display: inline-block; transition: transform .4s var(--ease-out); }
.button:hover span, .plan-select:hover span { transform: translate(3px, -3px); }
.plan-select:hover { color: var(--accent-ink); }
.selection-fields button:hover { background: #FF9A3C; }
.social-profile:hover { border-color: var(--accent); color: var(--accent); }
.slider-arrows button:not(:disabled):hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.circle-link:hover { transform: rotate(-45deg); }
.plan-tabs button:not([aria-selected=true]):hover { border-color: var(--accent); }
.selection-fields input { transition: border-color .3s var(--ease-soft), box-shadow .3s var(--ease-soft); }
.selection-fields input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(245, 130, 32, .18); }
.contact-socials a, .contact-email, .contact-phone, .footer-bottom > a:last-child { transition: color .3s var(--ease-soft), opacity .3s; }
.contact-email:hover, .contact-phone:hover, .footer-bottom > a:last-child:hover { color: var(--accent); }
.contact-socials a:hover { opacity: .75; }

/* ---------- Карточки: подъём, акцентная рамка, мягкая тень ---------- */
.card, .infra-card, .payment-card, .plan-card, .video-card, .spec-card,
.advantage-item, .company-facts, .social-card {
  transition: transform .5s var(--ease-out), border-color .4s var(--ease-soft),
              box-shadow .5s var(--ease-out);
}
@media (hover: hover) {
  .card:hover, .infra-card:hover, .payment-card:hover, .plan-card:hover,
  .video-card:hover, .spec-card:hover, .advantage-item:hover, .social-card:hover {
    transform: translateY(-6px);
    border-color: rgba(245, 130, 32, .45);
    box-shadow: 0 28px 50px -28px rgba(90, 60, 20, .35), 0 0 0 1px rgba(245, 130, 32, .06),
                0 18px 40px -30px rgba(245, 130, 32, .55);
  }
  .social-card:hover { border-color: #dbdbdb; }
}

/* Иконки в карточках слегка «оживают» */
.icon svg, .spec-card svg, .advantage-item svg { transition: transform .6s var(--ease-out); }
/* Анимация иконок — см. раздел «SVG-иконки» ниже. */

/* Плавный зум фотографий */
.video img, .social-photo img, .plan-image img, .gallery-preview img {
  transition: transform 1.1s var(--ease-out);
}
.video:hover img, .social-photo:hover img, .gallery-preview:hover img { transform: scale(1.05); }
.plan-card:hover .plan-image img { transform: scale(1.04); }

/* Кнопки «play»: пульсирующее кольцо */
.play, .gallery-play, .instagram-play { transition: transform .5s var(--ease-out), background-color .3s; }
.video:hover .play { transform: translate(-50%, -50%) scale(1.08); background: rgba(245, 130, 32, .9); border-color: var(--accent); }
.gallery-preview:hover .gallery-play { transform: translate(-50%, -50%) scale(1.1); }
.social-photo:hover .instagram-play { transform: translate(-50%, -50%) scale(1.1); }
.play::before, .gallery-play::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .6);
  animation: play-ring 2.6s var(--ease-soft) infinite;
  pointer-events: none;
}
.gallery-play::before { border-color: rgba(245, 130, 32, .8); }
@keyframes play-ring {
  0%   { transform: scale(1);   opacity: .8; }
  80%, 100% { transform: scale(1.6); opacity: 0; }
}

/* Стрелка в карточке видео */
.gallery-copy > span { transition: transform .4s var(--ease-out); }
.video-card:hover .gallery-copy > span { transform: translate(3px, -3px); }

/* Контурный мотив 50/50 медленно «дышит» на ховере */
.payment-motif { transition: opacity .6s var(--ease-soft), letter-spacing .8s var(--ease-out); }
.payment-featured:hover .payment-motif { opacity: .9; letter-spacing: 4px; }

/* ---------- Первый экран: мягкое появление при загрузке ---------- */
html.anim .hero .site-header { animation: hero-down 1s var(--ease-out) backwards; }
html.anim .hero-slide:first-of-type { animation: hero-image 1.8s var(--ease-out) backwards; }
html.anim .slider-controls > * { animation: hero-up 1s var(--ease-out) backwards; }
html.anim .slider-cta { animation-delay: .45s; }
html.anim .slider-arrows { animation-delay: .6s; }
@keyframes hero-down  { from { opacity: 0; transform: translateY(-16px); } }
@keyframes hero-up    { from { opacity: 0; transform: translateY(24px); } }
@keyframes hero-image { from { opacity: 0; transform: scale(1.04); filter: blur(8px); } }

/* ---------- Появление элементов при прокрутке ---------- */
html.anim [data-reveal] {
  opacity: 0;
  translate: 0 32px;
  filter: blur(6px);
  transition-property: opacity, translate, filter, transform, border-color, box-shadow, background-color, color;
  transition-duration: var(--reveal-duration), var(--reveal-duration), var(--reveal-duration), .5s, .4s, .5s, .3s, .3s;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms, 0ms;
  will-change: opacity, translate;
}
/* Мелкие подписи двигаются меньше */
html.anim [data-reveal="soft"] { translate: 0 16px; filter: blur(4px); }
/* Крупные фото: проявление с лёгким зумом внутри рамки */
html.anim [data-reveal="media"] { translate: 0 40px; filter: none; }
html.anim [data-reveal="media"] img { scale: 1.12; transition: scale 1.6s var(--ease-out) var(--reveal-delay, 0ms), transform 1.1s var(--ease-out); }
html.anim [data-reveal].is-visible { opacity: 1; translate: 0 0; filter: none; will-change: auto; }
html.anim [data-reveal="media"].is-visible img { scale: 1; }

/* Заголовок секции: акцентная часть проявляется чуть позже */
html.anim .section-title[data-reveal] span {
  display: inline-block;
  opacity: 0;
  translate: 0 .35em;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + 220ms);
}
html.anim .section-title[data-reveal].is-visible span { opacity: 1; translate: 0 0; }

/* Линия над инфраструктурой и над подвалом прорисовывается слева направо */
html.anim .infrastructure, html.anim .footer-bottom { position: relative; border-top-color: transparent; }
html.anim .infrastructure::before, html.anim .footer-bottom::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--border);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out);
}
html.anim .infrastructure.is-lined::before, html.anim .footer-bottom.is-lined::before { transform: scaleX(1); }

/* Переключение вкладок планировок */
html.anim .plans-grid:not([hidden]) .plan-card.tab-in,
html.anim .plans-empty:not([hidden]).tab-in { animation: tab-in .6s var(--ease-out) backwards; animation-delay: var(--tab-delay, 0ms); }
@keyframes tab-in { from { opacity: 0; transform: translateY(16px); } }

/* Сообщения после отправки форм */
#selection-result:not([hidden]), #contact-result:not([hidden]),
.demo-note:not([hidden]), .gallery-status:not([hidden]) { animation: hero-up .6s var(--ease-out) both; }

/* ---------- SVG-иконки: прорисовка контура ---------- */
/* JS разбивает контур на отдельные линии и задаёт каждой --len (длина) и --pd (задержка). */
html.anim svg.icon-draw path {
  stroke-dasharray: var(--len) var(--len);
  stroke-dashoffset: var(--len);
  transition: stroke-dashoffset 1.2s cubic-bezier(.65, 0, .35, 1) var(--pd, 0ms);
}
html.anim svg.icon-draw.is-drawn path { stroke-dashoffset: 0; }
/* Наведение: линия «пробегает» вперёд, стирается и рисуется заново */
@keyframes icon-redraw {
  0%     { stroke-dashoffset: 0; }
  38%    { stroke-dashoffset: calc(var(--len) * -1); }
  38.01% { stroke-dashoffset: var(--len); }
  100%   { stroke-dashoffset: 0; }
}
@media (hover: hover) {
  html.anim :is(.card, .infra-card, .spec-card, .advantage-item):hover svg.icon-draw.is-drawn path {
    animation: icon-redraw 1.1s cubic-bezier(.65, 0, .35, 1) var(--ph, 0ms) backwards;
  }
}

/* ---------- Логотип: квадраты выстраиваются друг за другом ---------- */
.logo path { transform-box: fill-box; transform-origin: 0 100%; }
html.anim .logo.logo-play path { animation: logo-build .75s var(--ease-out) backwards; }
html.anim .logo.logo-play path:nth-child(2) { animation-delay: .09s; }
html.anim .logo.logo-play path:nth-child(3) { animation-delay: .18s; }
html.anim .logo.logo-play path:nth-child(4) { animation-delay: .27s; }
html.anim .logo.logo-play path:nth-child(5) { animation-delay: .36s; }
@keyframes logo-build {
  from { transform: scale(0); opacity: 0; }
  60%  { opacity: 1; }
}

/* ---------- Счётчики цифр ---------- */
/* Число наследует оформление родителя: старые правила для span в этих блоках не должны его трогать. */
.payment-price .count-num, .plan-meta .count-num, .company-facts .count-num, .count-num {
  display: inline-block;
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
/* В Lora моноширинные цифры выглядят разреженно — оставляем обычные. */
.plan-meta .count-num, .company-facts .count-num { font-variant-numeric: normal; }
/* Короткая вспышка, когда счёт закончился */
html.anim .count-num.count-done { animation: count-glow 1.2s var(--ease-soft); }
@keyframes count-glow {
  0%   { text-shadow: 0 0 0 rgba(245, 130, 32, 0); }
  30%  { text-shadow: 0 0 18px rgba(245, 130, 32, .55); }
  100% { text-shadow: 0 0 0 rgba(245, 130, 32, 0); }
}

/* ---------- Уважение к настройке «уменьшить движение» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .play::before, .gallery-play::before { display: none; }
}