Ivan Bogachev

Юрий Артюх уже рассказывал как подобные штуки делать, так что пересказывать не буду - просто посмотрите. Подход там универсальный - можно и на канвасе и на SVG все делать (хотя канвас по идее более производительным будет).

Скажите, насколько реально сделать эти два варианта с помощью CSS, или для этого нужно использовать другие какие-то технологии/программы?

На CSS только плоская карта получится. Надпись можно было бы соорудить с помощью большого количества элементов и 3d-трансформаций, но результат будет очень грубым. Так что WebGL в таких задачах - наше все.

Запустить крутиться планету

Все не так уж и сложно - одна сфера, одна текстура. Пример можно посмотреть в статье про трехмерные презентации на Three.js, там все то же самое, только в вашем случае сфера маленькая. Ну а поворачивать землю немного каждый кадр - это даже не задача.

запустить надпись "Мир принадлежит тебе", тоже с прокруткой в левую сторону вокруг планеты

Юрий Артюх в одном из стримов делал как раз такую вращающуюся надпись. Очень прикольно получилось, стоит посмотреть.

P.S.: А еще всегда есть ход сусликом (про которого все забывают, но он есть) - сделать гифку и использовать ее, а не приплетать кучу скриптов для одной маленькой анимированной штучки.

Изображения максимально сжаты вместе с видео, следил за утечкой памяти, т.к использую TweenMax, но всё равно без результатов

Беглый просмотр показал, что вы постоянно анимируете у элементов свойства top, left и height, что вызывает перестройку макета страницы и, соответственно, лаги. Имеет смысл переписать все это с помощью css transform. Более подробно можно почитать в статье про производительность анимаций на сайтах.

Ошибки там такие:

GET https://cdpn.io/boomboom/v2/slick/slick.min.js net::ERR_ABORTED 403
pen.js:3 Uncaught TypeError: $(...).slick is not a function

Разработчик подключал слик локально, а в вашей демке его, разумеется, нет (только pro-аккаунты на codepen могут загружать дополнительные локальные файлы). Так что подключайте его с какого-нибудь cdn, например так:

<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

или используйте NPM-пакет, если вы все это как-то по-своему собираете.

Смущает класс ".list__link"

Если вас смущает повторение list в названии класса, то можно воспользоваться сохранением имени в стиле that=this из javascript:

.list {
    $b: &;

    &__item {
        &:first-child {
            #{$b}__link {
                // . . .
            }
        }
    }
}

Но это сложно назвать более читаемым вариантом.

Если цель - все же сделать код более удобоваримым, то может иметь смысл просто ограничить вложенность при написании стилей (именно визуальную вложенность кода, а не каскад), как это делают в том же rscss:

.list {
    &__item {
        // . . .
    }

    &__link {
        // . . .
    }

    &__item:first-child &__link {
        // . . .
    }
}

Эта штука нынче затмила по популярности particles.js. Постоянно все о ней спрашивают, в том числе и на тостере:
Можно ли использовать чужой js код?
Как правильно вытащить код? с этой страницы...

А почему бы не использовать обычную feDropShadow?

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="2" flood-color="grey" />
    </filter>
  </defs>
  <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5"
           filter="url(#shadow)" fill="hsl(156,80%,50%)"></polygon>
</svg>

Блоки с классами man, woman и kid должны быть рядом с инпутами, в той же обертке. Вот так:

div
    input
    label
    input
    label
    .man
    .woman
    .kid

а не вот так:

div
    input
    label
    input
    label
.man
.woman
.kid

Попробуйте использовать одинаковые наборы функций, но с разными значениями:

.filters {
    filter: grayscale(0.85) sepia(0%) brightness(1);
}

.links-item:hover .filters {
    filter: grayscale(0) sepia(40%) brightness(0.55);
}

Вариантов может быть много. Один из них - большой-большой border-radius:

Задача разделяется на две:
1. Анимировать саму линию
2. Перемещать огонь по ней

Под первую задачу так и напрашивается SVG (статья про пунктирные вау-эффекты). Ну а решение второй вытекает из первой, достаточно загуглить "перемещение объекта по path" или еще что-то в этом духе. Получаем что-то такое (код немного странен, я другой пример перевернул вверх дном, но идея должна быть понятна):


Остается только приделать монитор нарисовать огонь, но это уже другой вопрос.

Что такое 1em? Это текущий размер шрифта. Когда вы задаете размер шрифта в единицах em, браузер считает этот размер относительно родительского размера шрифта. Но у html вы задаете font-size равный 0px. В данном случае это означает, что у всех потомков 1em будет равен нулю до тех пор, пока вы не зададите какое-то другое значение не в em/rem, тогда у потомков того элемента 1em будет равен заданному значению.

P.S.: Задавать font-size равный нулю для html - это не лучшая идея, она может приводить к самым разным багам, а также проблемам, когда у пользователей в браузере настроены ограничения на размер шрифта для html.

С первого взгляда видно:

1. Font-size в 1px для HTML, а потом все в REM? - интересное начало...
2. CSS-методология? - отсутствует.
3. Препроцессор для облегчения жизни? - отсутствует.
4. Все в одном файле? - да, так и есть.
5. Магические числа в CSS? - много.
6. Префиксы прямо в коде? - ага.
7. 21 брейкпоинт для такой простой страницы? - ежик...
8. Шрифты? - Fira отвалилась. Letter-spacing скачет.
9. Critical CSS? - отсутствует.
10. Бесполезные условные комментарии для IE6, гриды и флексы в одном флаконе? - о дааа.
11. HTML lang='ru' и контент на английском? - почему бы и нет.
12. Грузить весь FontAwesome ради пары иконок? - классика.
13. Асинхронная загрузка картинок? - отсутствует.

Продолжать можно долго. Рекомендации можно дать следующие:

1. Освойтесь с инструментами верстальщика. Откройте для себя препроцессоры и автопрефиксер. Почитайте про БЭМ. Используйте.
2. Добейтесь такого, чтобы вы понимали абсолютно все в своей верстке. Что? Зачем? Почему именно так? Избегайте копипасты. Не используйте какие-то "фишки" только потому, что кто-то их где-то поиспользовал - вполне вероятно, что там был другой контекст, а в вашей ситуации получится что-то странное. Разбирайтесь со всем.
3. Изучайте хорошие практики.
4. Ну и JS, без него никак.

Если есть похожие примеры или идеи... Посмотреть как работает...

На ваш вопрос уже ответили, но добавлю от себя еще один пример для изучения. Принцип тот же, но используется SVG. Часто это может быть удобнее, чем анимирование html-элементов, особенно если нужны какие-то еще эффекты, так что полезно знать, что и так тоже можно:

Ну а если таких элементов будет слишком много, то имеет смысл все рисовать на canvas. Не стоит забывать о производительности!

Все в одну картинку - не универсально, тем более, что сверстать не сложно.
Первый пример - один круг с градиентом, второй - белый, сверху.
Второй пример - тот же круг с градиентом, и перекрыть ему половину. На мой взгляд варианты с большим количеством бордер-радиусов могут ломать мозг, но тут на вкус и цвет...

Да, симпатичная штука. Как говорится, ябзаверстал. Да и показаться на первой странице CodePen с такой демкой тоже будет не лишним. Так что вот вам концепт для изучения по мотивам вашего видео:

В разных браузерах не тестировал, это скорее пример, чтобы показать подход к решению задачи. Рекомендую смотреть на большом экране - версия только для десктопа.

Большая часть ресурсов - ситуативные (в основном это документации к конкретным библиотекам). Из более-менее часто используемого могу вспомнить:
MDN, DevDocs и Schema.org, чтобы вспоминать забытое.
Can I use, чтобы смотреть поддержку браузерами (+ doiuse).
WAVE и regex101, чтобы проверять себя.
В Browserhacks иногда полезно заглянуть.
FontPair и Coolors - если нужно без дизайнера подобрать шрифты и цвета.
Snazzy Maps, чтобы брать готовые цветовые схемы для карт.
Cubic-bezier, чтобы наглядно делать кривые для простых анимаций.
Google - если затупил.
Noisli - для фонового шума.
Cross Browser Testing, чтобы тестировать результат.