RAX7

https://developer.mozilla.org/en-US/docs/Web/SVG/E...

Это называется "липкий хедер"
https://www.google.com/search?q=%D0%BB%D0%B8%D0%BF...
https://www.youtube.com/results?search_query=%D0%B...

Подобные эффекты делают на основе шума Перлина https://thebookofshaders.com/11/?lan=ru
А если установить расширение Spector.js, то можно посмотреть код шейдеров, которые создают такой эффект.

Плавное изменение z-index (даже если такое и было бы возможно) тебе ничем не поможет, т.к. z-index указывает лишь порядок отрисовки элементов. Пока один элемент выше остальных он отбрасывает тень на соседние элементы, а соседние элементы не оказывают на него никого влияния. Но как только он оказывается ниже (за счет изменения z-index или transform: traslatez) тень с соседних элементов пропадает и он сам оказывается затенен соседями. Чтобы избавится от этого резного перехода нужно разделить блок на слой с элементами и слой с тенями и анимировать изменение тени.

#navigation-top:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(-90deg);
}

#navigation-middle:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(0deg);
}

#navigation-bottom:checked ~ .show-experience {
  transform: translateZ(-150px) rotateX(90deg);
}

function createTable(el) {
	for (let i = 0, row; i < el.length; i++) {
    if (i % 7 === 0) {
      row = document.createElement('tr');
      thead.appendChild(row);
    }
		const cell = document.createElement('th');
		cell.innerHTML = el[i];
		row.appendChild(cell);
	}
}

и вдогонку https://stackoverflow.com/questions/222309/calcula...

main.css

/* Media Queries */

  /* Mobile Devices - Phones/Tablets */

@media only screen and (max-width: 991px) { 
  
  
  /* MOBILE NAVIGATION */
     
  .navbar ul.nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    justify-content: start;
    top: 15vh;
+   left: 0;
    background-color: #999;
    width: 100%;
    height: 100vh;
    transform: translate(100%);
    -webkit-transform: translate(100%);
    text-align: center;
    overflow: hidden;
    padding: 15px 30px;
  }

Убирай всю анимацию и фильтры из svg и переноси в css.
Примерно так:

Как вариант: https://codesandbox.io/s/sleepy-feistel-jhic7l

Первый вариант svg mask.
плюсы: не требует js
минусы: нельзя применить backdrop-filter


Второй вариант svg clip-path.
плюсы: можно применить backdrop-filter
минусы: требует js и желательно ResizeObserver

svg path {
  pointer-events: all;
}

Для полупрозрачного уголка можно css-masks использовать, либо просто вставить svg как data-url в background-image

.content {
    position: relative;
}

img {
    position: absolute;
}

У свайпера можно определить метод renderBullet который создаст элементы для навигации по слайдеру. Эти элементы можно стилизовать на css как угодно.

Как работает svg arc описано здесь https://svg-art.ru/?page_id=900#comm_a
Как посчитать радиус окружности зная высоту хорды - здесь https://en.wikipedia.org/wiki/Circular_segment