Анімований прелоадер з логотипом

📌 Завдання:

Розробити прелоадер для сайту з анімацією логотипу. Логотип надається у вкладенні (SVG/PNG). Анімація повинна імітувати розкриття та закриття коробки, створюючи ефект об’ємності (3D-відчуття).

🎬 Сценарій анімації:

• Логотип розташований по центру екрана, займає приблизно 30% від ширини вікна (адаптивно, ± не критично).

• Анімація починається з того, що логотип по частинах "розкривається" з центру, ніби ви дивитесь зверху на відкриваючуся коробку.

• Частини логотипу з’являються послідовно, з легкими 3D-поворотами.

• Після повної збірки — пауза 0.5–1 секунда.

• Далі логотип анімаційно "закривається" назад у центр — у тому ж порядку, як і розкривався.

• Анімація повторюється безкінечно, доки не завантажиться основна сторінка.

• Після завантаження — прелоадер плавно зникає (fade out) і видаляється з DOM.

💡 Технічні вимоги:

• HTML + CSS + JavaScript.

• Без використання сторонніх бібліотек (GSAP, jQuery тощо) — якщо можливо.

• Максимально легке та швидке завантаження (пріоритет — продуктивність).

• Логотип має бути реалізований як SVG, розбитий на окремі анімовані елементи.

• Усі кольори логотипу зберегти точно, як у оригіналі.

• Код має бути легко вбудовуваним у будь-яку сторінку (бажано у вигляді одного контейнера + скрипту/стилю).
  
  

🧩 Додатково:

Готовий надати додаткові деталі та пояснення логіки тим, хто зацікавиться проектом.