/* Исходный цвет + плавность */
.hover-text.tn-atom,
.tn-elem.hover-text .tn-atom {
  color: #28292A !important;
  transition: color 0.3s ease;
}

/* Ховер по самому тексту */
.hover-text.tn-atom:hover {
  color: #4F4F4F !important;
}

/* Ховер, если класс висит на .tn-elem */
.tn-elem.hover-text:hover .tn-atom {
  color: #4F4F4F !important;
}

/* Для ссылок внутри текста */
.hover-text.tn-atom a,
.tn-elem.hover-text .tn-atom a {
  color: inherit !important;
}
.hover-text.tn-atom a:hover,
.tn-elem.hover-text .tn-atom a:hover {
  color: inherit !important;
}



/* ====== ПЛАВНЫЙ ЗУМ БЕЗ "ЩЕЛЧКА" + СКРУГЛЕНИЕ 32px ====== */

/* Общие рамки и срез краёв */
.tn-elem.hover-zoom {
  overflow: hidden;
  border-radius: 32px;
}
.tn-elem.hover-zoom .tn-atom {
  border-radius: 32px;
  overflow: hidden;
}

/* --- Вариант А: ВНУТРИ РЕАЛЬНОЕ  --- */
.tn-elem.hover-zoom .tn-atom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  transform: scale(1); /* важна стартовая точка */
  transition: transform 2.2s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

/* Наведение – зум на , НЕ трогаем .tn-atom (чтобы не затирать её transform) */
.tn-elem.hover-zoom:hover .tn-atom img {
  transform: scale(1.12); /* сильнее, но очень плавно */
}

/* --- Вариант Б: КАРТИНКА КАК ФОН У .tn-atom --- */
/* Если у элемента background-image, этот блок даст плавный зум фона */
.tn-elem.hover-zoom .tn-atom[style*="background"] {
  /* если у тебя нужен режим cover, оставь cover; если 100% — тоже ок */
  background-size: cover; 
  transition: background-size 2.2s cubic-bezier(.22,.61,.36,1);
  will-change: background-size;
}
.tn-elem.hover-zoom:hover .tn-atom[style*="background"] {
  /* зум фона (подбери процент под вкус) */
  background-size: 112%;
}

/* Микро-стабилизация */
.tn-elem.hover-zoom,
.tn-elem.hover-zoom .tn-atom,
.tn-elem.hover-zoom .tn-atom img {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}