/* Кастомные дополнения поверх исходной вёрстки (дизайн-раскладка не меняется).
   Анимация появления первого экрана: левый блок выезжает из-за левого края
   экрана, правый — из-за правого. */

@keyframes section1-slide-in-left {
  from { opacity: 0; transform: translateX(-100vw); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes section1-slide-in-right {
  from { opacity: 0; transform: translateX(100vw); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Прячем горизонтальное переполнение, пока блоки едут из-за края экрана. */
.section-1 {
  overflow-x: hidden;
}

.section-1 .col-left {
  animation: section1-slide-in-left 1s ease-out both;
}

.section-1 .col-right {
  animation: section1-slide-in-right 1s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .section-1 .col-left,
  .section-1 .col-right {
    animation: none;
  }
}

/* Section 2: выравниваем текст первого пункта по верху левой картинки —
   убираем верхний паддинг у первой ячейки списка. */
.section-2 .col-right .item:first-child {
  padding-top: 0;
}

/* Стрелка (SVG) должна перекрашиваться синхронно с текстом кнопки. У кнопок
   transition: .5s анимирует их собственные свойства (color/background), но не
   fill вложенного SVG — задаём ему такой же переход, иначе стрелка меняет цвет
   мгновенно, раньше текста. */
.btn-all-white svg path,
.btn-all-black svg path,
.btn-all-orange svg path {
  transition: fill .5s;
}

/* Ховеры на кнопках «Рассчитать стоимость». */

/* Hero: «стеклянный» эффект с прозрачностью. Фон становится полупрозрачным
   с размытием, текст и стрелка светлеют для читаемости поверх тёмного экрана.
   Рамку рисуем через inset box-shadow, чтобы не сдвигать содержимое. */
.section-1 .col-right .btn-all-white:hover {
  background: rgba(250, 249, 247, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(250, 249, 247, 0.45);
  color: #FAF9F7;
}
.section-1 .col-right .btn-all-white:hover svg path {
  fill: #FAF9F7;
}

/* «Выполненные работы» и «мы профессионалы своего дела»: фон #C2C2C2,
   текст и стрелка #FAF9F7. */
.section-3 .btn-all-black:hover,
.section-7 .btn-all-black:hover,
.section-13 .btn-all-black:hover {
  background: #C2C2C2;
  color: #FAF9F7 !important;
}
.section-3 .btn-all-black:hover svg path,
.section-7 .btn-all-black:hover svg path,
.section-13 .btn-all-black:hover svg path {
  fill: #FAF9F7;
}

/* «Как мы работаем…» (section-4), «Получить консультацию»: при наведении
   только текст и стрелка становятся #F0F0F0, фон остаётся прежним. */
.section-4 .btn-all-orange:hover {
  background: #C2C2C2;
  color: #F0F0F0;
}
.section-4 .btn-all-orange:hover svg path {
  fill: #F0F0F0;
}

/* Каталог (section-11): ховер карточки товара.
   Текстовая часть темнеет (фон #1F1F21, текст #F0F0F0), а фото подменяется
   на альтернативное (p.hoverImage), если оно задано в админке. */
.section-11 .item {
  transition: background .3s;
}
.section-11 .item:hover {
  background: #1F1F21;
}
.section-11 .item:hover .name,
.section-11 .item:hover .desc {
  color: #F0F0F0;
}

/* Подмена фото при наведении: hover-картинка лежит поверх основной и
   проявляется по opacity. Если hover-фото не задано — подмены нет. */
.section-11 .images {
  position: relative;
}
.section-11 .images .img-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s;
}
.section-11 .item:hover .images .img-hover {
  opacity: 1;
}