Денис Инешин

CSS filter

С адаптацией будут большие проблемы. Проще скрывать одни блоки и показывать другие для мобил.
В остальном можете начать с
https://daneden.github.io/animate.css/
https://greensock.com/tweenmax

На вашем месте я бы переключился на D3.js. Эта библиотека специально создана для манипулирования SVG.
jQuery в этой схеме лишний.

D3.js
Введение в D3.js
Отличная бесплатная книга Interactive Data Visualization for the Web

Updates, Transitions, and Motion

Попробуйте этот плагин. Waypoints. Он позволяет запускать разный код по мере того, как вы пролистываете страницу до ключевых точек.

1. Открываем фотошоп
2. Создаем квадратную/прямоугольную белую картинку (размером с видео)
3. Вырезаем в ней дырку в центре нужной формы
4. Сохраняем как пнг с прозрачностью
5. В HTML вставляем div слоем выше видео.
6. Фоном для этого дива используем эту картинку
7. Profit!

-ms-transform ?)

Круг то можно и без SVG нарисовать!

.test {
    width: 100px;
    height: 100px;
    background: #000;
    border-radius: 50%; // вот так
}

Если всё же сильно надо, то лучше использовать спец. библиотеки. Самостоятельно path вычислять замаешься.
d3js.org
raphaeljs.com

2) Это совершенно нормально. При верстке невозможно обойтись без пустых тегов совсем.

SVG-masks. Вполне кроссбраузерно.

Но я бы так не заморачивался. Пальмы сверху вырежьте как png с прозрачностью, вот уже и маски не нужны.

По скольку фон сайта однородный белый, то проще всего это сделать прозрачной маской поверх фото.
Т.е. использовать прозрачный png без всяких CSS эффектов.

Например

Paper.js умеет это хорошо вычислять.

Если очень нужно.

Проверяем на старую оперу:

if (window.opera) {
    $("html").addClass("oldOpera");
}

Вместо svg для иконок используем например спрайт из png иконок только для старой оперы:

.oldOpera .icon {
    background: url(...);
}