Степан Крапивин

с помощью псевдоэлемента и градиентной заливки

Посмотри как сделан аналогичный блок здесь:

Градиентом вот так:

pointer-events

.floating-block{
  pointer-events: none;
  ...
}

.floating-block__links{
  pointer-events: all;
  ...
}

https://alvarotrigo.com/fullPage/examples/navigati...
https://www.cssscript.com/demo/fullscreen-scrollin...
https://www.cssscript.com/demo/cross-platform-smoo...

.ff:last-of-type {
  margin-bottom: 0;
}

Не работают последние два .card потому, что где-то сломана вёрстка (скорее всего нет закрывающего тега или лишний тег </div>)

Использовать колонки с внутренним отступом вместо внешнего.
И не надо будет заморачиваться с calc()

уже был вопрос по анимации как на travelshift.com

Анимация на canvas/js?

сделать два блока: wheel и title-wrap одинаковые по размерам и позиционированию.
title-wrap будет содержать блок с заголовком и подзаголовком, с отрицательным позиционированием относительно title-wrap

Потому что такое поведение у элементов списка по умолчанию.
Это можно решить с помощью стиля list-style-position: inside (по умолчанию outside)

потому что используется display: inline, а надо inline-block или block

для класса .cd-main-search указать top: 100px