Animated preloader with logo

📌 Task:

Develop a preloader for the website with an animation of the logo. The logo is provided as an attachment (SVG/PNG). The animation should imitate opening and closing the box, creating a 3D effect (volume).

🎬 Animation Scenario:

• The logo is centered on the screen, occupying about 30% of the window width (responsive, ± not critical).

• The animation begins with the logo "opening" from the center in parts, as if you are looking down at an opening box.

• Parts of the logo appear sequentially, with slight 3D rotations.

• After full assembly — pause for 0.5–1 second.

• Then the logo animatedly "closes" back to the center — in the same order as it opened.

• The animation repeats infinitely until the main page loads.

• After loading — the preloader smoothly disappears (fade out) and is removed from the DOM.

💡 Technical Requirements:

• HTML + CSS + JavaScript.

• Without using third-party libraries (GSAP, jQuery, etc.) — if possible.

• Maximally lightweight and fast loading (priority — performance).

• The logo must be implemented as SVG, broken into separate animated elements.

• Keep all logo colors exactly as in the original.

• The code should be easily embeddable into any page (preferably as a single container + script/style).
  
  

🧩 Additional:

I am ready to provide additional details and explanations of the logic to those interested in the project.