modelair

лучше применить Intersection Observer API
и заменить код на этот

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 1.0
}
const svg = document.querySelector('svg')
const animation = document.getElementById('animate')
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      animation.beginElement()
      svg.style.display = 'block'
    }
  })
}, options)
observer.observe(document.querySelector('#anim1'))

<animate id="animate" .../>

посмотреть на codepen

Поставил font-weight: 300 но русские буквы не меняются, как исправить?

в данном случае спецификация HTML не позволяет вставлять тег address в p.
спецификация говорит, что тег привязан к определенному article или body для уточнения.
также она говорит, что не все что в p будет в p

если посмотреть в devtools (что я вам рекомендую делать всегда), то видно, что этот тег отрисован после p.
ну и в целом это освещено в поиске.
тут

const inputs = document.querySelectorAll('.block__input')

const check = event => console.log('check successful', event.target)

inputs.forEach(item => item.oninput = check)

<div class="buy_card">
  <div>
    <h1>До конца акции: </h1>
    <p id="tr_time"></p>
  </div>
  <button>Купить</button>
</div>

.buy_card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

дело в процентах margin.
а исходное положение это надо чтобы trasition был в общем классе, а не только в классе с :hover

в общем-то вот.

делаем блок на полную ширину с абсолютным позиционированием относительно родителя, выравниваем его содержимое с помощью justify-content. профит.

div {
  display: flex; 
}
.container {
  position: relative;
  justify-content: space-between;
  flex-direction: row;
  width: 100%;
}
.center {
  width: 100%;
  justify-content: center;
  position: absolute;
}

<div class="container">
   <div>left</div>
   <div class="center">
     <div>
       center block
     </div>
   </div>
   <div>right</div>
</div>

https://codepen.io/modelair/pen/MWzwPwY

есть такое свойство у flexbox - gap.

.flex {
  display: flex;
  flex-direction: row;
  gap: 1em;
}

там уж заверните во что хотите.

.container {
border-bottom:  2px solid grey;
}
.container a.active {
border-bottom: 2px solid lightgreen
}

<div class="container">
  <a class="active">ссылка</a>
  <a>ссылка</a>
  <a>ссылка</a>
  <a>ссылка</a>
</div>

потому что вы показываете .nav-list с помощью.drop:hover, поэтому оно и открывается
перенесите drop:hover в @media

Значит шрифт не поддерживает кириллицу в полном объеме.

Если вы качаете шрифт со спец-сервисов а-ля Google Fonts, не забудьте выбрать нужные параметры(кодировка, толщина итд) чтобы всё работало корректно

вы можете:
1. прописать hr в цикле и не рисовать его на последней итерации.
2. воспользоваться стилизацией без hr, для примера:

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>

p:not(:last-of-type) {
   border-bottom: 1px solid grey;
}

ответить на этот вопрос могут разработчики safari
а решить можно так:

<input type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="mytext"/>

<div style="position: relative">
  <div style="position: absolute; top: 200px; left: 200px"></div>
</div>

повторите изображение, а эффект тумана можно сделать с помощью gradient и mask