chore(3d-hover-effect-glow): prevent flashing when a 3d element i jus…

…t loaded

Before this change, the component would be rendered before the styling applies.
It wouldn't be visible then, since it's unstyled, but it would have a default opacity of 1.
Then the styling applies, which set's the opacity to 0.1.
But due to the transition on the `Host` element, there would be an undesired effect of
"lightning flash" when the component is loaded.

src/components/3d-hover-effect-glow/3d-hover-effect-glow.scss

@@ -1,21 +1,28 @@
 :host(limel-3d-hover-effect-glow) {
-    transition: background, opacity;
-    transition-timing-function: ease-out; // Must be the same as the 3D Element itself
-    transition-duration: 0.8s; // Must be the same as the 3D Element itself
-
     display: block;
     pointer-events: none;
 
     position: absolute;
     inset: 0;
 
-    opacity: 0.1;
+    mix-blend-mode: plus-lighter;
+}
+
+div {
+    position: absolute;
+    inset: 0;
+
+    transition: background, opacity;
+    transition-timing-function: ease-out; // Must be the same as the 3D Element itself
+    transition-duration: 0.8s; // Must be the same as the 3D Element itself
+
+    border-radius: inherit;
+
+    opacity: var(--limel-3d-hover-effect-glow-opacity, 0.1);
 
     background-image: radial-gradient(
         circle at var(--limel-3d-hover-effect-glow-position, 50% -20%),
         rgb(var(--color-white), 0.3),
         rgb(var(--color-white), 0)
     );
-
-    mix-blend-mode: plus-lighter;
 }

src/components/3d-hover-effect-glow/3d-hover-effect-glow.tsx

@@ -1,4 +1,4 @@
-import { Component } from '@stencil/core';
+import { Component, h } from '@stencil/core';
 /**
  * This component enhances the visual effects, when the `tiltFollowingTheCursor`
  * utility function from `3d-tilt-hover-effect.ts` is implemented in a component.
@@ -21,6 +21,6 @@ import { Component } from '@stencil/core';
 })
 export class HoverEffectGlowComponent {
     public render() {
-        return null;
+        return <div />;
     }
 }

src/style/mixins.scss

@@ -512,9 +512,9 @@ $clickable-normal-state-transitions: (
 
     &:hover {
         limel-3d-hover-effect-glow {
-            opacity: 0.5;
+            --limel-3d-hover-effect-glow-opacity: 0.5;
             @media (prefers-reduced-motion) {
-                opacity: 0.2;
+                --limel-3d-hover-effect-glow-opacity: 0.2;
             }
         }
     }