I am trying to make a website where the scrolling animation between the first and second page is done by zooming in the logo (like going through it) which is at the center of the page.

But my problem is that I want to make the logo fully transparent (the logo is a text only logo but in png format), so that we can see the second page through it. The second page is only made of a video constantly playing and some svg shapes. When arriving on the website, only the video has to be seen through the logo.
There is also a background image present only on the first page and never again after scrolling.

Something like that :
The logo through which we can see a video constantly playing
the second page, the video being the grey rectangle

I tried making 3 layers by using absolute positionning (from lowest to highest) : 2nd page, 1st page and the logo but didn’t find any solution to see through the logo and the first page.

I then tried mix-blend-mode and adjusting the layers like that : 1st page, 2nd page and the logo. I succeeded in seeing through the logo with a white background all around but when I try to use mix-blend-mode to see through the 2nd page, I get something like this :
The background of the 1st page is ok but the whole video and svg on sides are showing, not only through the logo

This is all I tried and found about my problem.