fix: replace transition: all with specific properties for GPU compositing

Fixes rendering glitches on Intel Macs where the UI fragments during
card animations due to GPU compositor overload.

- Replace transition: all with specific animated properties
- Add CSS custom properties for transition durations
- Add prefers-reduced-motion support
- Fix malformed CSS (missing 's' unit in two transitions)
- Remove unused .gameCard class

Resolves #1328

Author: seriouslysean

src/App.vue

@@ -62,6 +62,18 @@ export default {
 <style lang="scss">
 @use '@/sass/typography';
 
+:root {
+  --transition-duration: 1s;
+  --transition-duration-fast: 0.3s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-duration: 0s;
+    --transition-duration-fast: 0s;
+  }
+}
+
 .gradient-text {
   background: linear-gradient(268.89deg, rgba(98, 2, 238, 0.87) 73.76%, rgba(253, 98, 34, 0.87) 99.59%);
   background-clip: text;

src/components/PlayerReadyIndicator.vue

@@ -116,7 +116,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  transition: all 0.4s ease-in-out;
+  transition: rotate 0.4s ease-in-out;
   backface-visibility: hidden;
 }
 .card-back {

src/routes/game/GameView.vue

@@ -1060,7 +1060,7 @@ export default {
 // Transitions //
 /////////////////
 .transition-all {
-  transition: all 1s;
+  transition: opacity var(--transition-duration), transform var(--transition-duration);
 }
 // All list transitions leave with position absolute
 .slide-below-leave-active,
@@ -1107,11 +1107,6 @@ export default {
   opacity: 0;
   transform: translateY(-32px);
 }
-.gameCard {
-  position: absolute;
-  transition: all 1s ease-out;
-}
-
 ////////////
 // Styles //
 ////////////
@@ -1242,7 +1237,7 @@ export default {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: all 0.3 ease-in-out;
+    transition: width var(--transition-duration-fast) ease-in-out;
     background-image: url('/img/game/bg-deck.png');
 
     &.reveal-top-two {
@@ -1406,7 +1401,10 @@ export default {
     background: rgba(0, 0, 0, 0.46);
     overflow-y: hidden;
     border-radius: 4px;
-    transition: all 1s;
+    transition:
+      border-color var(--transition-duration),
+      box-shadow var(--transition-duration),
+      background var(--transition-duration);
     &.my-turn {
       border: 4px solid rgba(var(--v-theme-accent));
       box-shadow:

src/routes/game/components/GameCard.vue

@@ -221,7 +221,7 @@ export default {
   & .scuttled-by-card {
     height: 95%;
     left: 16px;
-    transition: all 1s ease;
+    transition: opacity var(--transition-duration) ease, transform var(--transition-duration) ease;
     position: absolute;
     z-index: 1;
     &.scuttled-by-opponent {
@@ -281,7 +281,7 @@ export default {
     right: 0;
     background: rgba(#00a5ff, 0.25);
     opacity: 1;
-    transition: all 0.3s linear;
+    transition: opacity var(--transition-duration-fast) linear;
   }
 
   &:hover:after {
@@ -307,8 +307,8 @@ export default {
   transform: translateY(-32px);
 }
 
-.card-flip-enter-active{
-  transition: all 1s;
+.card-flip-enter-active {
+  transition: transform var(--transition-duration);
 }
 .card-flip-enter-from{
   transform: rotateY(-90deg);

src/routes/game/components/MoveChoiceCard.vue

@@ -94,7 +94,7 @@ export default {
   background-color: rgba(var(--v-theme-surface-1));
   color: rgba(var(--v-theme-surface-2)) !important;
   border: 2px solid rgba(var(--v-theme-surface-2));;
-  transition: all 0.5s ease;
+  transition: background-color .5s ease, color .5s ease;
   opacity: .95;
 }
 .move-choice-card:hover {

src/routes/game/components/ScrapPile.vue

@@ -186,7 +186,7 @@ function openDialog(e) {
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: all 0.3 ease-in-out; // for tidying/messing up pile
+    transition: transform var(--transition-duration-fast) ease-in-out;
     cursor: pointer;
     user-select: none;
     
@@ -234,7 +234,7 @@ function openDialog(e) {
 // Entering Scrap Transition //
 ///////////////////////////////
 #scrap .scrap-card.scrap-enter-active {
-  transition: all .8s ease-out;
+  transition: opacity .8s ease-out, transform .8s ease-out;
 }
 
 #scrap .scrap-card.scrap-enter-from {
@@ -247,7 +247,7 @@ function openDialog(e) {
 //////////////////////
 #scrap .threes-player-enter-active,
 #scrap .threes-opponent-enter-active {
-  transition: all .5s ease-in;
+  transition: opacity .5s ease-in, transform .5s ease-in, rotate .5s ease-in;
 }
 
 #scrap .threes-player-enter-from,
@@ -259,7 +259,7 @@ function openDialog(e) {
 
 #scrap .threes-player-leave-active,
 #scrap .threes-opponent-leave-active {
-  transition: all 1.2s ease-out;
+  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
 }
 
 // Leaving towards player hand
@@ -278,7 +278,7 @@ function openDialog(e) {
 ////////////////////////////////////////
 #scrap .scrap-empty-enter-active,
 #scrap .scrap-empty-leave-active {
-  transition: all .5s ease-in;
+  transition: opacity .5s ease-in, rotate .5s ease-in;
 }
 
 #scrap .scrap-empty-leave-to {