/* ====== БАННЕР SOTEX 495 (ДЕСКТОП) ====== */
.sotex-banner.open {
  animation: fadeInUp 0.4s ease forwards;
}
.sotex-banner {
  position: relative;
  width: 100%;
  min-width: 349px;
  max-width: 1420px;
  height: auto;
  margin: 0 auto;
  color: #fff;
  padding: 85px 30px 20px 50px; /* top right bottom left */
  text-shadow:
          -1px 0   #0d0d0d,
          1px 0   #0d0d0d,
          0   1px #0d0d0d,
          0  -1px #0d0d0d;
  opacity: .1;

  /* Фон: стена + пол + подсветка + полоски + виньетка */
  background:
    /* 0. Сильная виньетка по краям и внизу */
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 30px,
      rgba(0, 0, 0, 0.60) 60%,
      rgba(0, 0, 0, 0.90) 100%
    ) center / 130% 170% no-repeat,

    /* 1. Вертикальные полоски справа */
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.035) 0px,
      rgba(255, 255, 255, 0.035) 2px, /* ширина светлой полосы */
      transparent 2px,
      transparent 15px               /* шаг полос */
    ) right center / 40% 100% no-repeat,

    /* 2. Подсветка за аппаратом */
    radial-gradient(
      circle at 82% 32%,
      rgba(0, 120, 255, 0.80) 0%,
      rgba(0, 120, 255, 0.45) 25%,
      rgba(0, 120, 255, 0.25) 50%,
      rgba(0, 120, 255, 0.12) 70%,
      rgba(0, 120, 255, 0.04) 85%,
      transparent 100%
    ) right center / 60% 130% no-repeat,

    /* 3. Стена + пол */
    linear-gradient(
      to bottom,
      #050005 0%,
      #090006 45%,
      #140007 60%,  /* линия раздела стена/пол */
      #3a0607 80%,
      #61100a 100%
    );
}
.sotex-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0.3),
    transparent 55%
  );
  z-index: 0;
  pointer-events: none;
}
.sotex-banner__content {
  position: relative;
  z-index: 2;             /* текст над аппаратом и фоном */
  max-width: 1080px;
  padding-right: 0;
  display: flex;
  flex-direction: column;
}
.sotex-banner__title .sotex-reg {
  font-size: 0.55em;
  line-height: 0;
  position: relative;
  top: -0.2em;
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sotex-banner.open .sotex-banner__tag {
  animation: fadeInLeft 0.6s ease-in-out forwards;
}
.sotex-banner__tag {
  display: inline-block;
  align-self: flex-start;
  padding: 11px 35px;
  background: #5e0516;
  text-transform: uppercase;
  font-size: 2.25rem;  /* ≈36px */
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.1;
  opacity: 0;
}

.sotex-banner.open .sotex-banner__title {
  animation: fadeInLeft 0.7s ease forwards;
}
.sotex-banner__title {
  font-size: 3.75rem;       /* ~60px */
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  padding-top: 3rem;
  opacity: 0;
}

.sotex-banner__title span {
  display: inline-block;
  position: relative;
}

/* Текстовый блок под заголовком */
.sotex-banner.open .sotex-banner__text {
  animation: fadeInUp 0.7s ease forwards;
}
.sotex-banner__text {
  padding-top: 3rem;
  font-size: 2.125rem;      /* ~34px */
  line-height: 1.35;
  opacity: 0;
}

/* Отступы между строками текста (второй и третий абзац) */
.sotex-banner__text p + p {
  margin-top: 6px;
}

.sotex-banner__text strong {
  font-weight: 900;
}

/* ===== Аппарат справа ===== */
.sotex-banner.open .sotex-banner__image-wrap {
  animation: fadeInRight 0.8s ease forwards;
}
.sotex-banner__image-wrap {
  position: absolute;
  right: 30px;
  bottom: 50px;
  z-index: 1;  /* ниже текста, выше фона */
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  opacity: 0;
}

#homeBanner .attachment-full.size-full  {
  height: 390px;
  width: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.9));
}

/* ===== Адаптивность ===== */

/* Ноутбуки / экраны поменьше */
@media (max-width: 1200px) {
  .sotex-banner {
    padding: 32px 40px 26px 40px;
  }

  .sotex-banner__content {
    max-width: 640px;
  }

  .sotex-banner__tag {
    font-size: 1.25rem;
    padding: 8px 20px;
  }

  .sotex-banner__title {
    font-size: 3.375rem;
  }

  .sotex-banner__text {
    font-size: 1.75rem;
  }

  #homeBanner .attachment-full.size-full {
    width: auto;
    max-height: 24.375rem;
  }

  .sotex-banner__image-wrap {
    right: 30px;
    bottom: 50px;
  }
}

/* Планшеты / телефоны */
@media (max-width: 768px) {
  .sotex-banner {
    padding: 18px 16px 32px;
    min-height: 0;
    max-width: 100%;
    background:
      /* 0. Виньетка по краям и внизу */
      radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 30px,
        rgba(0, 0, 0, 0.60) 60%,
        rgba(0, 0, 0, 0.90) 100%
      ) center / 110% 150% no-repeat,
      repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 2px,
        transparent 2px,
        transparent 15px
      ) center / 100% 100% no-repeat,
      radial-gradient(
        circle at 50% 70%,
        rgba(0, 120, 255, 0.80) 0%,
        rgba(0, 120, 255, 0.45) 25%,
        rgba(0, 120, 255, 0.35) 45%,
        rgba(0, 120, 255, 0.18) 65%,
        rgba(0, 120, 255, 0.05) 85%,
        transparent 100%
      ) center / 130% 150% no-repeat,
      linear-gradient(
        to bottom,
        #050005 0%,
        #090006 45%,
        #140007 60%,
        #3a0607 80%,
        #61100a 100%
      );
  }

  /* Чуть мягче затемнение на мобиле — чтобы подсветка играла */
  .sotex-banner::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.2) 50%,
      transparent 100%
    );
  }

  .sotex-banner__content {
    max-width: 100%;
    align-items: center;
    text-align: center;
  }

  .sotex-banner__tag {
    font-size: 1rem;
    padding: 6px 14px;
    align-self: center;
  }

  .sotex-banner__title {
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 18px;
  }

  .sotex-banner__text {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-top: 18px;
  }

  .sotex-banner__image-wrap {
    position: static;
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }

  #homeBanner .attachment-full.size-full {
    height: 280px;
    /* дополнительная голубая подсветка вокруг аппарата */
    filter:
      drop-shadow(0 8px 20px rgba(0, 100, 255, 0.3))
      drop-shadow(0 18px 30px rgba(0, 0, 0, 0.9));
  }
}

/* Если в системе отключены анимации — отключаем и здесь */
@media (prefers-reduced-motion: reduce) {
  .sotex-banner__tag,
  .sotex-banner__title,
  .sotex-banner__text,
  .sotex-banner__image-wrap {
    animation: none !important;
    opacity: 1 !important;
  }
}