ForSureN1

Потому что visible это равносильно display, есть 2 состояния, виден и невиден, промежуточных значений нет, соответственно transition работать не будет.
если хотите чтобы и при скрытии с задержкой работало нужно использовать animate

let animateBlock = blockEl.animate([
    {opacity: 1},
    {opacity: 0}
], {duration: 300, easing: 'ease-in-out', fill: 'forwards'});
animateBlock.addEventListener('finish', () => { blockEl.classList.add('hiddenBlock') })

width: 100%;
height: 100%;
for svg

Можно отключить контекстное меню на странице, этого вполне хватает для дефолтных ситуаций по типу запрета на скачивание картинки и т.д. Но более опытному челу, если ему это действительно нужно, не составит труда нажать F12, и сделать свои дела

https://yandex.ru/dev/share/

По сути это ошибка(?) дизайнера, что они рисуют на макете 1440px, т.к. так показывают в курсах, от сюда 2 варианта, делать по их размерам, либо же делать адаптив в 2 стороны, и для full HD и для мобилок, но это полный бред, займет куда больше времени чем в одну сторону адаптив. Если мне прилетает такой макет, то я делаю точно так же, как на нем, а если они начинают говорить что почему такое маленькое все, или большое на их мониторах, то объясняю что они сами скинули такой макет

local storage
session storage
request to backend

Нашел причину проблемы, на текст наложен градиент, из за этих свойств не работает анимация

-webkit-background-clip: text!important;
-webkit-text-fill-color: transparent!important;

Ну это ведь логично, что при новом рендере, ваша старая переменная которая содержит этот массив с элементами не пополнится новым элементом, вам нужно на моменте добавления нового элемента на странице, заново перезаписывать массив, + как вариант чтобы по новому не накидывался класс на элемент у которого уже есть, искать эти же элементы, которые не имеют 'active' класса
P.S.
пример
let array = document.querySelectorAll('.element:not(.active)');