/* =========================================================
   ЖИВОЙ ТЕХНО-ФОН ДЛЯ СЕКЦИЙ САЙТА
   используется в блоках:
   О компании
   Услуги
   Подход
   Серверы
   Кейсы
   ========================================================= */


/* =========================================================
   ОСНОВНОЙ КОНТЕЙНЕР ФОНА
   оборачивает все секции где нужен техно-фон
   ========================================================= */

.tech-bg-section {
  position: relative;     /* позволяет позиционировать фон внутри */
  overflow: hidden;       /* скрывает лишние части анимации */
  isolation: isolate;     /* отдельный слой для эффектов */
}



/* =========================================================
   КОНТЕЙНЕР ДЛЯ ВСЕХ ФОНОВЫХ ЭФФЕКТОВ
   (картинка, сетка, световые пятна)
   ========================================================= */

.tech-bg-media {
  position: absolute;
  inset: 0;
  z-index: 0;              /* фон находится под контентом */
  pointer-events: none;    /* чтобы мышь не цеплялась за фон */
}



/* =========================================================
   ОСНОВНАЯ КАРТИНКА ФОНА
   здесь была проблема — фон был сильно увеличен
   я уменьшил scale и убрал сильный inset
   ========================================================= */

.tech-bg-image {

  position: absolute;
  inset: 0;                 /* фон занимает ровно размер блока */

  background-image: url("tech-overlay.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.18;

  /* уменьшили увеличение */
  transform: scale(1.01);

  filter: saturate(1.04) contrast(1.02);

  animation:
    techBgFloat 25s ease-in-out infinite alternate;
}



/* =========================================================
   ТЕХНО СЕТКА
   создаёт ощущение цифровой сетевой инфраструктуры
   ========================================================= */

.tech-bg-grid {

  position: absolute;
  inset: 0;

  opacity: 0.12;

  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);

  background-size: 40px 40px;
}



/* =========================================================
   СВЕТОВЫЕ ПЯТНА
   создают мягкий IT-glow эффект
   ========================================================= */

.tech-bg-glow {

  position: absolute;
  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.25;

  animation: techGlowMove 20s ease-in-out infinite alternate;
}



/* левый свет */

.tech-bg-glow-1 {

  width: 420px;
  height: 420px;

  top: 10%;
  left: -100px;

  background:
  radial-gradient(circle,
  rgba(64,183,255,0.35),
  transparent 70%);
}



/* правый свет */

.tech-bg-glow-2 {

  width: 420px;
  height: 420px;

  right: -100px;
  bottom: 5%;

  background:
  radial-gradient(circle,
  rgba(127,92,255,0.25),
  transparent 70%);
}



/* =========================================================
   ГРАДИЕНТНЫЙ ФИЛЬТР
   делает фон мягче и читаемее
   ========================================================= */

.tech-bg-section::before {

  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}



/* тёмная тема */

body[data-theme="dark"] .tech-bg-section::before {

  background:

    linear-gradient(
      180deg,
      rgba(7,17,31,0.8),
      rgba(7,17,31,0.55),
      rgba(7,17,31,0.8)
    );
}



/* светлая тема */

body[data-theme="light"] .tech-bg-section::before {

  background:

    linear-gradient(
      180deg,
      rgba(238,245,251,0.85),
      rgba(238,245,251,0.55),
      rgba(238,245,251,0.85)
    );
}



/* =========================================================
   КОНТЕНТ СЕКЦИЙ
   поднимаем выше фона
   ========================================================= */

.tech-bg-section > section {

  position: relative;
  z-index: 2;
}



/* =========================================================
   СТЕКЛЯННЫЙ ЭФФЕКТ ДЛЯ КАРТОЧЕК
   ========================================================= */

.tech-bg-section .about-card,
.tech-bg-section .service-card,
.tech-bg-section .server-card,
.tech-bg-section .approach-card,
.tech-bg-section .case-feature,
.tech-bg-section .case-mini {

  backdrop-filter: blur(6px);
}



/* =========================================================
   ПЕПЕЛ В БЛОКЕ ПРАЙС
   canvas эффект частиц
   ========================================================= */

.pricing-section {

  position: relative;
  overflow: hidden;
}



/* canvas слой */

#ashCanvas {

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 1;
  pointer-events: none;
}



/* =========================================================
   АНИМАЦИЯ ДВИЖЕНИЯ ФОНА
   ========================================================= */

@keyframes techBgFloat {

  0% {

    transform:
    scale(1.01)
    translateY(0px);

  }

  100% {

    transform:
    scale(1.02)
    translateY(-12px);

  }

}



/* =========================================================
   АНИМАЦИЯ СВЕТОВЫХ ПЯТЕН
   ========================================================= */

@keyframes techGlowMove {

  0% {

    transform:
    translate(0,0);

  }

  100% {

    transform:
    translate(20px,-15px);

  }

}



/* =========================================================
   АДАПТАЦИЯ ПОД МОБИЛЬНЫЕ
   ========================================================= */

@media (max-width:768px){

  .tech-bg-glow-1,
  .tech-bg-glow-2{

    width:220px;
    height:220px;

  }

  .tech-bg-grid{

    background-size:28px 28px;

  }

}