hover fx on project bg

Author: goldst

blocks/card/CardMouseShadowed.js

@@ -24,7 +24,7 @@ export default class CardMouseShadowed extends MC {
         super(
             document.body,
             ['card'],
-            `.card${modifier} > .card__inner`
+            `.card${modifier}`
         );
 
         /**

blocks/card/card--projects__background/card--projects__background.css

@@ -2,7 +2,21 @@
     --__bg-size: var(--_bg-size, var(--_w) auto);
     --_pos: var(--projects--scroll-top, 0) 0;
 
-    background-color: var(--c1);
+    background-image:
+        radial-gradient(
+            circle at
+            calc(
+                var(--card__inner--mouse-shadow-left, -100%)
+                / var(--_hover-scale)
+            )
+            calc(
+                var(--card__inner--mouse-shadow-top, -100%) /
+                var(--_hover-scale)
+            ),
+            var(--_c0) 0,
+            var(--_c1) calc(0.1 * var(--_w))
+        );
+
     -webkit-mask: 
         var(--_card-background) repeat 
         var(--_pos) /

blocks/projects/projects.css

@@ -37,10 +37,6 @@
     width: var(--h);
 }
 
-.projects__project-card .card--projects__background {
-    background-position: var(--projects--scroll-top) 0;
-}
-
 .projects__project-card:last-of-type {
     margin-bottom: 0;
 }
@@ -146,8 +142,4 @@
         margin-left: 0;
         width: auto;
     }
-
-    .projects__project-card .card--projects__background {
-        background-position: 0 var(--projects--scroll-top);
-    }
 }