Why scroll driven animation doesn't work on footer when build

[jcubic]

I have weird issue, I've created scroll driven animation based on this StackOverflow Q&A:
Is it possible to hide fixed element on scroll when it reaches the footer?. To hide Arrow that indicate that there is more content below the fold. To make it work I swizzled the Footer and added the icon to Layout.

The code works fine when run in dev mode, but when build and deploy, the animation is disabled in dev tools. I'm not able to find what is causing it.

Here is a simple reproduction of the issue:

https://codesandbox.io/p/devbox/zen-herschel-xww3qd

This is the code that doesn't work when build.

footer {
  animation: hide linear;
  animation-timeline: view(block);
  animation-range-start: entry 0%;
  --display: initial;
}
@keyframes hide {
  0.1%,
  100% {
    --display: none;
  }
}

[jcubic]

Ok, it seems this is sorting issue because of the CSS compiler used. The animation overwrite the long hand properties. You can't mix them in Docusaurs.