.animated-link {
    position: relative; /* Устанавливаем относительное позиционирование */
    color: #000; /* Цвет текста */
    text-decoration: none; /* Убираем стандартное подчеркивание */
}

.animated-link::after {
    content: ''; /* Создаем псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Начинаем с левого края */
    bottom: -4px; /* Устанавливаем отступ в 4 пикселя от нижнего края текста */
    width: 100%; /* Ширина псевдоэлемента равна ширине текста */
    height: 1px; /* Высота линии */
    background-color: #fff; /* Цвет линии (белый) */
    transform: scaleX(0); /* Начальное состояние - линия скрыта */
    transition: transform 0.3s ease; /* Анимация при изменении состояния */
}

.animated-link:hover::after {
    transform: scaleX(1); /* При наведении линия появляется */
}




.animated-link-2 {
    position: relative; /* Устанавливаем относительное позиционирование */
    color: #000; /* Цвет текста */
    text-decoration: none; /* Убираем стандартное подчеркивание */
}

.animated-link-2::after {
    content: ''; /* Создаем псевдоэлемент */
    position: absolute; /* Абсолютное позиционирование */
    left: 0; /* Начинаем с левого края */
    bottom: -4px; /* Устанавливаем отступ в 4 пикселя от нижнего края текста */
    width: 100%; /* Ширина псевдоэлемента равна ширине текста */
    height: 1px; /* Высота линии */
    background-color: #596771; /* Цвет линии (белый) */
    transform: scaleX(0); /* Начальное состояние - линия скрыта */
    transition: transform 0.3s ease; /* Анимация при изменении состояния */
}

.animated-link-2:hover::after {
    transform: scaleX(1); /* При наведении линия появляется */
}



/* Эффект зума для картинки/фона */
.hover-zoom .tn-atom {
  overflow: hidden;
}

.hover-zoom img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
  height: auto;
}

.hover-zoom:hover img {
  transform: scale(1.05);
}

/* Верхний слой пропускает hover к нижнему */
.upper-layer {
  pointer-events: none; /* отключаем перехват событий */
}

/* Но на интерактивных элементах события остаются */
.upper-layer a,
.upper-layer button {
  pointer-events: auto;
}

