sewaca

Как сейчас реализована анимация:
У вас есть 50 срендереных картинок анимации вроде этой и каждые n милисекунд меняется номер картинки

В таком виде реализации вы ограничены по плавности анимации именно количеством таких кадров и в целом больше ничем

Как можно сделать лучше:
Вариант 1.
Анимация станет плавнее, если просто будете вопроизводить ее в 60 fps.
То есть просто поменяете код для смены аттрибута src на что-то такое:

let i = 0;
let a = setInterval(()=>{
    document.querySelector("body > div.page > div.places > div > div > div > div.places-map-wrap > div > div > img").src= "/assets/images/home_sequence/" + i + ".webp";
    i = (i + 1) % 49;
}, 1000/60) // 1000 / 60 означает что вы хотите вопроизводить 60 кадров в секунду

Минусы: из-зи увеличения fps таким способом увеличится и скорости анимации

Вариант 2.
Cделать не 50 типовых картинок, а 100 и менять их способом из варианта 1 c фпс в два раза выше чем сейчас
Тогда удастся сохранить и скорость анимации и сделать плавнее
Минусы: много работы (придется переделывать раскадровку всей анимации) + упадет скорость сайта из-за того что придется загружать в два раза больше картинок

Вариант 3.
ВОЗМОЖНО самый удачный, но ТОЧНО самый сложный и требующий много сил. Используйте вместо картинок вида

canvas и библиотеку three.js (тут уже как-то самому придется разбираться, советов дать не могу, потому что сам недостаточно работал с этой библиотекой
Минусы: вполне вероятно, что из-за того что на сайт добавится +1 библиотека, а также 3д модельки скорость сайта будет не сильно отличаться от второго варианта.
Плюс по сравнению с вариантом № 2: Вы получите полную свободу в управлении этой анимацией. Сможете когда надо замедлить, когда надо ускорить без лишней работы
В целом скорость сайта не должна стать большой проблемой, потому что это не первый экран и даже не самое важное в карте. Соответственно можно что-то подгрузить попозже, что-то пораньше, что-то вообще не подгружать если слабый инет
Иными словами, загружать эту анимацию только после того как загрузили все остальное

В общем я постарался понятно расписать минусы и плюсы. Плюс многое зависит от того, как сделана эта штука у ваших дизайнеров
Если что-то непонятно объяснил - спрашивайте

JS выполняется на стороне клиента. Он не меняет файлы на сервере (потому что насколько я понял из вашего вопроса, вам нужно именно это)
Если хотите менять классы в самом html файле то в vs code выделите слово element, нажпмите shift+ctrl+l вроде и напишите новый класс
Ну либо используйте сборщики + шаблонизаторы, чтобы сильно не страдать когда надо что-то поменять в коде

Если используется grid то пропишите для контейнера gap: 5px и padding 5px
Если используете table, то пропишите для контейнера border-spacing: 5px

Если честно, я бы лишний раз не шаманил и просто сделал бы рамочку с помощью before и background-image (экспортнуть рамочку в svg)
Вариант Mors Clamor с polygon в целом правильнее, но конкретно в случае border'a, насколько я помню, он просто обрежет рамку. В общем попробуйте сначала его вариант.
Если не получится, можете использовать мой вариант :)

Чтобы не прописывать !important - увеличьте вложенность стилей для активного a
В вашем случае, надо прописывать правила для
.facilities-block .sidebar li.clicked a

Как передавался запрос?
Если просто пробелами разделялись слова, то это плохо
Используй функцию js encodeURIComponent для текста, если он меняется
Если нет, просто закодируй текст вручную и допиши после ?text=
Думаю, поможет

Можно решить так:
Добавить body класс loading
Прописать в css
body.loading *{transition: 0s!important;}
Добавить :

<script>
 window.addEventListener('load', function(){document.body.classList.remove('loading')})
</script>