Merged in feat/LOY-198-dtmc-card-animation (pull request #2010)

feat(LOY-198): dtmc card animation when hovering

Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css

@@ -33,8 +33,22 @@
   color: var(--Text-Accent-Primary);
 }
 
-.card {
+.cardContainer {
   position: relative;
+  perspective: 1000px;
+  transform-style: preserve-3d;
+}
+
+.shimmer {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  mix-blend-mode: overlay;
+}
+
+.card {
   overflow: hidden;
   border-radius: var(--Corner-radius-lg);
   box-shadow: 0 2px 1px rgb(255 255 255 / 11%) inset;
@@ -44,6 +58,10 @@
   max-width: 100%;
   color: var(--Text-Brand-OnPrimary-3-Accent);
   background-color: var(--Surface-Brand-Primary-1-OnSurface-Default);
+  box-shadow: 0 4px 44px rgb(0 0 0 / 25%);
+  transition: transform 0.3s ease-out;
+  will-change: transform;
+  user-select: none;
 
   &::before {
     content: "";
@@ -54,7 +72,7 @@
     width: 360px;
     height: 360px;
     opacity: 0.3;
-    background: #e9aba3;
+    background-color: var(--Scandic-Peach-40);
     box-shadow: 192px 192px 192px;
     border-radius: 9999px;
     filter: blur(96px);
@@ -76,7 +94,7 @@
 
 .content {
   position: relative;
-  z-index: 3;
+  z-index: 4;
   height: 100%;
   display: flex;
   flex-direction: column;