src/shared/styles/theme.css

@@ -255,37 +255,23 @@
   transition: transform 130ms var(--ease-micro);
 }
 
-/* Offset "shadow" as a pseudo-block, not box-shadow: box-shadow repaints on
+/* Hard offset block via box-shadow, so it sits outside the border box and never
- * the main thread while the button's translate runs on the compositor, so the
+ * tints a light fill. Shadow rides the element's own transform, so it can't
- * two desync per frame. Animating both as transforms keeps them frame-synced. */
+ * desync from the button's translate the way a separate pseudo-element could.
+ * Offsets are net of the translate: shadow lands at translate + shadow-offset. */
 .btn-shadow {
-  position: relative;
+  box-shadow: 3px 3px 0 var(--shadow-color);
-  z-index: 0;
+  transition:
-  transition: transform 130ms var(--ease-micro);
+    transform 130ms var(--ease-micro),
-}
+    box-shadow 130ms var(--ease-micro);
-.btn-shadow::before {
-  content: "";
-  position: absolute;
-  /* ponytail: inset:0 tracks the padding box, ~1.5px shy of the border box;
-   * imperceptible on a hard offset block. Widen with negative inset if it shows. */
-  inset: 0;
-  z-index: -1;
-  border-radius: inherit;
-  background: var(--shadow-color);
-  transform: translate(3px, 3px);
-  transition: transform 130ms var(--ease-micro);
 }
 .btn-shadow:hover {
   transform: translate(-2px, -2px);
-}
+  box-shadow: 7px 7px 0 var(--shadow-color);
-.btn-shadow:hover::before {
-  transform: translate(5px, 5px);
 }
 .btn-shadow:active {
   transform: translate(2px, 2px);
-}
+  box-shadow: -1px -1px 0 var(--shadow-color);
-.btn-shadow:active::before {
-  transform: translate(1px, 1px);
 }
 
 /* Brutalist utility classes */