fix: coachmark stack not showing stack (#4941)

* fix: error in animation between stacked and home components

* fix: added convert namespace for to-rem

packages/ibm-products-styles/src/components/CoachmarkStack/_coachmark-stack.scss

@@ -14,6 +14,7 @@
 @use '@carbon/react/scss/motion' as *;
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/react/scss/theme' as *;
+@use '@carbon/layout/scss/convert';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -43,7 +44,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &--is-mounted {
     bottom: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-    transition: transform $duration-moderate-02 motion(exit, productive);
+    transition: $duration-moderate-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -60,7 +61,8 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     bottom: 0;
     overflow: hidden;
     pointer-events: none;
-    transform: perspective(carbon--mini-units(18))
+    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+    transform: perspective(convert.to-rem(144px))
       translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
     transform-origin: top center;
     visibility: visible;