All hover interactions trigger together the first time and then work normally?

Hi. I am running into 2 (what I believe to be) distinct issues in my home page.

First, I am struggling with an animation. The effect I am trying to achieve is working. I have a full screen tile menu with a background video. Each tile has a background div with opacity set to 0 initially. I would like the background to animate its opacity on hover. Everything seems to work fine except for the fact that the animation triggers on all elements the first time I hover on a button. I have tried splitting every single button into a combo class to animate separately but still no luck.

Secondly, on mobile, during the first animation stage, where the page has loaded and the buttons appear one by one, if I click on the screen before all the buttons are loaded the link doesn’t seem to go to the correct place. It opens one of the already loaded link blocks specified address instead of loading the address of the not yet loaded link block. Is there a way to only make the links active once the animations have completed?

Thanks in advance for everyone willing to take the time to check out my issue. You guys are champions!

Here is my public share link:

I did not manage to solve this, but came up with a different animation that I was able to implement. This is no longer relevant.