Губернатор

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

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

Не забудь ставить на паузу видео слайдах которые не видны в данный момент.

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

https://9elements.github.io/fancy-border-radius/

1. Кривую проще нарисовать на js. Добавить в разметку элементов, которые будут служить опорными точками для кривой и построить сглаженную кривую, например этим способом
   
2. Перемещать точку по кривой можно с помощью метода getPointAtLength - он вернет координаты точки
   
3. Для того чтобы точка оставалась во вьюпорте и не уезжала за его границы нужно отключить нативный скрол и скролить страницу так, чтобы точка была вертикально по центру
   

на SVG вырез можно сделать хоть в форме котенка

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

Держи, немного поправил один из своих старых набросков.

Принцип работы примерно, как описал Максим Морев в своем ответе.

click

static init() // - make static method

async function bootstrap() {  // change main.ts
  if (!ConfigService.init()) {
    console.error('Invalid config');
    return;
  }
  const app = await NestFactory.create(AppModule);
  // тут как-то нужно запустить метод init из сервиса config модуля.
  await app.listen(3000);
}