1. Сохранить страницу не как mhtml, а как HTML с изображениями.
2. Открыть сохранённый файл .htm в текстовом редакторе, найти все вхождения <a href="сайт">текст</a>, заменить их на текст. Если трудно, можно открыть в визуальном редакторе HTML, но я бы не стал.
3. Открыть сохранённый файл в браузере, потом его сохранить как mhtml.

Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}

Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:

const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);

@keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}

Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.

Не сильно долго думая:

1. Рендерим чем-то типа https://github.com/niklasvh/html2canvas.

2. Выводим картинку в верхнем слое.

3. Снизу мгновенно меняем тему (через body.light).

4. При помощи mask-image делаем для картинки из п. 2 радиальные градиенты с несколькими частично пересекающимися кругами (как в макете). Изначально значения альфа-канала во всех опорных точках должно быть 1.0

5. Запускаем transition к таким значениям альфа-канала, чтобы был эффект распространения прозрачности по кругам от центра наружу. Круги при анимации начинают пересекаться, что даёт искомый эффект интерференции.

6. Чтобы transition сработал с градиентной заливкой, нужно задать градиент кастомными свойствами, а переход делать для них, как показано тут: https://stackoverflow.com/a/63848864/14400772

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

$('button[role="tab"]')
	.on('shown.bs.tab', function (e) { … } );

Из e достаёте таб (см. бутстраповскую документацию на событие), и для его содержимого уже делаете инициализацию.