<style>
/* Основные стили для элементов .tn-atom */
.tn-atom {
  transition: transform 200ms ease-in-out, filter 200ms ease-in-out, opacity 200ms ease-in-out;
}

/* Размытость для элементов вне фокуса */
.webdesign .tn-atom.blur,
.branding .tn-atom.blur,
.prototype .tn-atom.blur,
.backend .tn-atom.blur {
  filter: blur(5px);
  opacity: 0.5;
}

/* Удаление размытия для фокусированных элементов */
.webdesign:hover .tn-atom,
.branding:hover .tn-atom,
.prototype:hover .tn-atom,
.backend:hover .tn-atom {
  filter: none;
  opacity: 1;
}
</style>

<script>
// Получите все контейнеры с классами категорий
const categories = document.querySelectorAll('.webdesign, .branding, .prototype, .backend');

// Функция для добавления размытия
function applyBlur(currentCategory) {
  categories.forEach(category => {
    const tnAtoms = category.querySelectorAll('.tn-atom');
    tnAtoms.forEach(tnAtom => {
      if (category.classList.contains(currentCategory)) {
        tnAtom.classList.remove('blur');
      } else {
        tnAtom.classList.add('blur');
      }
    });
  });
}

// Функция для сброса размытия
function removeBlur() {
  categories.forEach(category => {
    const tnAtoms = category.querySelectorAll('.tn-atom');
    tnAtoms.forEach(tnAtom => {
      tnAtom.classList.remove('blur');
    });
  });
}

// Добавьте события наведения и ухода
categories.forEach(category => {
  category.addEventListener('mouseover', () => {
    const categoryClass = Array.from(category.classList).find(cls => ['webdesign', 'branding', 'prototype', 'backend'].includes(cls));
    applyBlur(categoryClass);
  });

  category.addEventListener('mouseout', removeBlur);
});
</script>