/* Tool Park: анимированный фон первого экрана — фирменные чёрный и красный.
   Подключается в public/index.php после hero-since.css. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #0b0b0d;
}

/* Подвижный слой с красными «свечениями» на тёмной основе */
.hero::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(36% 40% at 78% 32%, rgba(240, 25, 56, .58), transparent 70%),
    radial-gradient(34% 38% at 60% 86%, rgba(201, 15, 41, .48), transparent 70%),
    radial-gradient(30% 34% at 22% 88%, rgba(138, 15, 34, .42), transparent 72%),
    radial-gradient(42% 46% at 32% 14%, rgba(44, 44, 50, .9), transparent 70%),
    linear-gradient(120deg, #0b0b0d 0%, #17171a 48%, #2a0a10 100%);
  animation: tp-hero-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* Затемнение слева, чтобы заголовок и красная строка «Ваш инструмент.» читались */
.hero::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 11, 13, .74) 0%, rgba(11, 11, 13, .46) 42%, rgba(11, 11, 13, 0) 68%);
}

.hero .hero-inner { position: relative; z-index: 2; }

/* Карточка «Работаем для вас с 2001 года» — полупрозрачная, градиент виден сквозь неё */
.hero-brand.tp-since-card {
  --tp-since-bg: rgba(16, 16, 19, .7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

@keyframes tp-hero-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-6%, 4%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(5%, -3%, 0) rotate(-6deg) scale(1.04); }
}

/* На узких экранах текст идёт поверх всего фона — затемняем равномерно */
@media (max-width: 900px) {
  .hero::after { background: rgba(11, 11, 13, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
}