/* ОБНОВЛЕННЫЙ CSS под схему:
   группы: btnpack1 / btnpack2 / btnpack3 ...
   элементы внутри:
   data-btn="a" | data-btn="b" | data-btn="c"
   data-text="a"
   скрипт добавляет .is-linked-hover на элементы текущего пакета
*/

/* 1) Убираем увеличение/смещение (если где-то есть) */
.t396 .t396__elem[data-btn="a"]:hover .tn-atom,
.t396 .t396__elem[data-btn="b"]:hover .tn-atom,
.t396 .t396__elem[data-btn="c"]:hover .tn-atom,
.t396 .t396__elem[data-btn="a"].is-linked-hover .tn-atom,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom,
.t396 .t396__elem[data-btn="c"].is-linked-hover .tn-atom{
  transform: none !important;
}

/* 2) Текстовые элементы: белые при срабатывании пакета (плавно) */
.t396 .t396__elem[data-text] .tn-atom,
.t396 .t396__elem[data-text] .tn-atom *{
  transition: color .18s ease, -webkit-text-fill-color .18s ease;
}

.t396 .t396__elem[data-text].is-linked-hover .tn-atom,
.t396 .t396__elem[data-text].is-linked-hover .tn-atom *{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* 3) Кнопка B: mesh градиент (бордовый + красный), белый текст/иконки, без тени */
.t396 .t396__elem[data-btn="b"] .tn-atom,
.t396 .t396__elem[data-btn="b"] .tn-atom span,
.t396 .t396__elem[data-btn="b"] .tn-atom div,
.t396 .t396__elem[data-btn="b"] .tn-atom p{
  transition: color .18s ease, -webkit-text-fill-color .18s ease, background-color .18s ease;
}

.t396 .t396__elem[data-btn="b"] .tn-atom svg,
.t396 .t396__elem[data-btn="b"] .tn-atom svg *{
  transition: fill .18s ease, stroke .18s ease;
}

.t396 .t396__elem[data-btn="b"]:hover .tn-atom,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom{
  box-shadow: none !important;
  background:
    radial-gradient(120% 140% at 15% 20%, rgba(225,17,13,.95) 0%, rgba(225,17,13,0) 55%),
    radial-gradient(120% 140% at 85% 30%, rgba(91,13,12,.95) 0%, rgba(91,13,12,0) 60%),
    radial-gradient(120% 140% at 40% 95%, rgba(225,17,13,.65) 0%, rgba(225,17,13,0) 60%),
    radial-gradient(120% 140% at 95% 85%, rgba(91,13,12,.80) 0%, rgba(91,13,12,0) 55%),
    #5B0D0C !important;
  background-size: 220% 220%;
  animation: btnbMesh 6s ease-in-out infinite;
  will-change: background-position;
}

/* белый текст внутри B */
.t396 .t396__elem[data-btn="b"]:hover .tn-atom,
.t396 .t396__elem[data-btn="b"]:hover .tn-atom span,
.t396 .t396__elem[data-btn="b"]:hover .tn-atom div,
.t396 .t396__elem[data-btn="b"]:hover .tn-atom p,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom span,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom div,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom p{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* белые SVG-иконки внутри B */
.t396 .t396__elem[data-btn="b"]:hover .tn-atom svg,
.t396 .t396__elem[data-btn="b"]:hover .tn-atom svg *,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom svg,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom svg *{
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

/* если иконка картинкой внутри B */
.t396 .t396__elem[data-btn="b"]:hover .tn-atom img,
.t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom img{
  filter: brightness(0) invert(1);
}

@keyframes btnbMesh{
  0%{
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0 0;
  }
  50%{
    background-position: 100% 40%, 0% 70%, 70% 0%, 20% 100%, 0 0;
  }
  100%{
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0 0;
  }
}

/* 4) Кнопка C (DESKTOP): мягкая заливка из угла (красный + тёмный), без тени */
.t396 .t396__elem[data-btn="c"] .tn-atom{
  position: relative;
  overflow: hidden;
}

.t396 .t396__elem[data-btn="c"] .tn-atom::before{
  content:"";
  position:absolute;
  inset:-35%;
  background:
    radial-gradient(120% 120% at 0% 0%,
      rgba(225,17,13,0.95) 0%,
      rgba(225,17,13,0.55) 28%,
      rgba(39,42,47,0.60) 62%,
      rgba(39,42,47,0.00) 78%);
  filter: blur(18px);
  transform: scale(0);
  transform-origin: 0% 0%;
  transition: transform .40s ease;
  z-index: 0;
  pointer-events: none;
}

.t396 .t396__elem[data-btn="c"]:hover .tn-atom::before,
.t396 .t396__elem[data-btn="c"].is-linked-hover .tn-atom::before{
  transform: scale(1);
}

.t396 .t396__elem[data-btn="c"] .tn-atom > *{
  position: relative;
  z-index: 1;
}

.t396 .t396__elem[data-btn="c"]:hover .tn-atom,
.t396 .t396__elem[data-btn="c"].is-linked-hover .tn-atom{
  box-shadow: none !important;
}

/* 5) MOBILE/TABLET: для C постоянный переливающийся градиент (красный ↔ тёмный) */
@media screen and (max-width: 1024px){
  .t396 .t396__elem[data-btn="c"] .tn-atom::before{
    content: none !important;
  }

  .t396 .t396__elem[data-btn="c"] .tn-atom{
    background: linear-gradient(135deg, #E1110D 0%, #272A2F 55%, #E1110D 100%) !important;
    background-size: 220% 220% !important;
    animation: btncMobileGradient 6s ease-in-out infinite !important;
  }
}

@keyframes btncMobileGradient{
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

@media screen and (max-width: 1024px){
  .t396 .t396__elem[data-btn="c"] .tn-atom{
    background: linear-gradient(135deg,
      #272A2F 0%,
      #272A2F 45%,
      #E1110D 70%,
      #272A2F 100%) !important;
    background-size: 240% 240% !important;
  }
}
/* MOBILE/TABLET (<=1024px)
   Цель:
   1) НИКАКИЕ десктоп-анимации (hover/is-linked-hover) не должны работать на мобиле
   2) Только кнопка C (data-btn="c") имеет автономный, очень мягкий переливающийся градиент
   Вставь этот блок В САМЫЙ НИЗ твоего CSS (последним). */

@media screen and (max-width: 1024px){

  /* На мобиле полностью выключаем все анимации/эффекты, завязанные на is-linked-hover и hover */
  .t396 .t396__elem[data-btn] .tn-atom,
  .t396 .t396__elem[data-text] .tn-atom,
  .t396 .t396__elem[data-text] .tn-atom *{
    animation: none !important;
    transition: none !important;
  }

  /* Кнопка B: убираем mesh-фон/движение, чтобы не было "десктопного" эффекта */
  .t396 .t396__elem[data-btn="b"] .tn-atom{
    background: transparent !important;
    background-image: none !important;
  }

  /* Текст не должен "заливаться" от is-linked-hover на мобиле */
  .t396 .t396__elem[data-text].is-linked-hover .tn-atom,
  .t396 .t396__elem[data-text].is-linked-hover .tn-atom *{
    color: inherit !important;
    -webkit-text-fill-color: initial !important;
  }

  /* Кнопка C: отключаем десктопный псевдо-слой */
  .t396 .t396__elem[data-btn="c"] .tn-atom::before{
    content: none !important;
  }

  /* Кнопка C: автономный мягкий градиент (больше тёмного, меньше красного) */
  .t396 .t396__elem[data-btn="c"] .tn-atom{
    background: linear-gradient(135deg,
      #272A2F 0%,
      #272A2F 62%,
      #E1110D 78%,
      #272A2F 100%) !important;
    background-size: 160% 160% !important;
    animation: btncMobileSubtle 12s ease-in-out infinite !important;
  }
}

/* очень мягкое движение (едва заметно) */
@keyframes btncMobileSubtle{
  0%   { background-position: 40% 40%; }
  50%  { background-position: 60% 60%; }
  100% { background-position: 40% 40%; }
}

/* уважение системной настройки уменьшения анимаций */
@media (prefers-reduced-motion: reduce){
  .t396 .t396__elem[data-btn="c"] .tn-atom{
    animation: none !important;
  }
}
@media screen and (min-width: 1025px){
  .t396 .t396__elem[data-btn="b"].is-linked-hover .tn-atom,
  .t396 .t396__elem[data-btn="b"]:hover .tn-atom{
    background: transparent !important;
    background-image: none !important;
    animation: none !important;
    box-shadow: none !important;

    border: 1px solid #ffffff !important;
    box-sizing: border-box !important;
  }
}