RAX7

Это называется "липкий хедер"
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...

Через Animations API можно посмотреть на свойство playState в какой-то конкретный момент времени, но какого-то события для этого нет.
Можно состряпать собственный костыль на основе Animations API и requestAnimationFrame.

Но проще и лучше будет запускать анимацию не по css hover, а из js - этот способ избавит от ненужных костылей.

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

g path {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

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


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

<div class="title"> заголовок заголовок заголовок </div>
<div class="description"> текст текст текст текст </div>
<button class="action"> кнопка </button>

body {
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
}

.title {
  grid-column: 1 / -1;
}

svg path {
  pointer-events: all;
}

Раздели змейку на отдельные сегменты и экспонируй их в svg. У svg есть аттрибут vector-effect, который в сочетании с preserveAspectRatio="none" позволит сделать сегменты кривой более адаптивными. Кривая будет всячески деформироваться, а толщина обводки и пунктирные точки будут фиксированного размера без искажений. Остается только посчитать размеры svg, но это сделать не сложно. Ну и на меньших разрешениях добавить медиа-запросы и пересчитать количество колонок, размеры, позицию svg.

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

.content {
    position: relative;
}

img {
    position: absolute;
}