some performance improvements

public/css/cards/base.css

@@ -44,10 +44,12 @@
 
   /* place the card on a new transform layer and
   make sure it has hardward acceleration... we gun'need that! */
-  transform: translate3d(0, 0, 0.1px);
-  -webkit-transform: translate3d(0, 0, 0.1px);
+  transform: translate3d(0px, 0px, 0.01px);
+  -webkit-transform: translate3d(0px, 0px, 0.01px);
   transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
+  pointer-events: none;
+  isolation: isolate;
 
   /* make sure the card is above others if it's scaled up */
   z-index: calc(var(--card-scale) * 2);
@@ -137,11 +139,16 @@
   transform-style: preserve-3d;
   -webkit-transform: rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
   -webkit-transform-style: preserve-3d;
+
+  /* performance */
+  pointer-events: auto;
+  overflow: hidden;
+  isolation: isolate;
 }
 
 button.card__rotator {
   /* because the card is a button, there's some default
-    browser styles which need to be sudued */
+    browser styles which need to be subdued */
   border: none;
   background: transparent;
   padding: 0;
@@ -164,12 +171,12 @@ button.card__rotator {
 .card.active .card__rotator,
 .card__rotator:focus {
   box-shadow: 
-  0 0 3px -1px white, 
-  0 0 3px 1px var(--card-edge), 
-  0 0 12px 2px var(--card-glow), 
-  0px 10px 20px -5px black, 
-  0 0 40px -30px var(--card-glow), 
-  0 0 50px -20px var(--card-glow)
+    0 0 3px -1px white, 
+    0 0 3px 1px var(--card-edge), 
+    0 0 12px 2px var(--card-glow), 
+    0px 10px 20px -5px black, 
+    0 0 40px -30px var(--card-glow), 
+    0 0 50px -20px var(--card-glow)
 }
 
 .card__rotator * {
@@ -178,20 +185,23 @@ button.card__rotator {
   grid-area: 1/1;
   border-radius: var(--card-radius);
   image-rendering: optimizeQuality;
-  transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  pointer-events: none;
 }
 
 .card__rotator img {
   /* outline is a little trick to anti-alias */
   outline: 1px solid transparent;
   height: auto;
+  -webkit-transform: translate3d(0px, 0px, 0.01px);
+  transform: translate3d(0px, 0px, 0.01px);
 }
 
 .card__back {
   background-color: var(--card-back);
-  transform: rotateY(180deg) translateZ(1px);
   -webkit-transform: rotateY(180deg) translateZ(1px);
+  transform: rotateY(180deg) translateZ(1px);
   backface-visibility: visible;
 }
 
@@ -203,6 +213,8 @@ button.card__rotator {
 .card__front {
   opacity: 1;
   transition: opacity 0.33s ease-out;
+  -webkit-transform: translate3d(0px, 0px, 0.01px);
+  transform: translate3d(0px, 0px, 0.01px);
 }
 
 .loading .card__front {

src/App.svelte

@@ -209,8 +209,7 @@
 		</a>
 	</h2>
 	<p>
-		Similar to the Holofoil, but this uses a special image <mark>background of a galaxy effect</mark
-		>
+		Similar to the Holofoil, but this uses a special image <mark>background of a galaxy effect</mark>
 		with a <mark>gradient rainbow set to color-dodge &amp; color-burn</mark> on top.
 	</p>
 	<h3>An instant classic for any PTCG fan!</h3>

src/lib/components/card.svelte

@@ -238,16 +238,19 @@
       ) / 50, 0, 1) };
     --pointer-from-top: ${$springGlare.y / 100};
     --pointer-from-left: ${$springGlare.x / 100};
-    --translate-x: ${$springTranslate.x}px;
-    --translate-y: ${$springTranslate.y}px;
-    --card-scale: ${$springScale};
     --card-opacity: ${$springGlare.o};
     --rotate-x: ${$springRotate.x + $springRotateDelta.x}deg;
     --rotate-y: ${$springRotate.y + $springRotateDelta.y}deg;
     --background-x: ${$springBackground.x}%;
     --background-y: ${$springBackground.y}%;
 	`;
 
+  $: translateStyles = `
+    --card-scale: ${$springScale};
+    --translate-x: ${$springTranslate.x}px;
+    --translate-y: ${$springTranslate.y}px;
+  `;
+
   $: {
     rarity = rarity.toLowerCase();
     supertype = supertype.toLowerCase();
@@ -391,7 +394,9 @@
   style={dynamicStyles}
   bind:this={thisCard}
 >
-  <div class="card__translater">
+  <div 
+    class="card__translater" 
+    style={translateStyles}>
     <button
       class="card__rotator"
       on:click={activate}