diff --git a/app/assets/stylesheets/_global.css b/app/assets/stylesheets/_global.css
index 1b2b9ba36..63a99ab94 100644
--- a/app/assets/stylesheets/_global.css
+++ b/app/assets/stylesheets/_global.css
@@ -53,6 +53,9 @@
   --focus-ring-offset: 1px;
   --focus-ring-size: 2px;
 
+  /* Dialogs */
+  --dialog-duration: 150ms;
+
   @media (max-width: 799px) {
     --tray-size: var(--footer-height);
   }
diff --git a/app/assets/stylesheets/dialog.css b/app/assets/stylesheets/dialog.css
index 40158b06a..5d6a7eb0e 100644
--- a/app/assets/stylesheets/dialog.css
+++ b/app/assets/stylesheets/dialog.css
@@ -1,26 +1,18 @@
 @layer components {
   :is(.dialog) {
-    --backdrop-speed: 150ms;
-    --speed: 150ms;
-
     border: 0;
     opacity: 0;
     transform: scale(0.2);
     transform-origin: top center;
-    transition:
-        display var(--speed) allow-discrete,
-        opacity var(--speed),
-        overlay var(--speed) allow-discrete,
-        transform var(--speed);
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display, opacity, overlay, transform;
 
     &::backdrop {
       background-color: var(--color-black);
       opacity: 0;
       transform: scale(1);
-      transition:
-        display var(--backdrop-speed) allow-discrete,
-        opacity var(--backdrop-speed),
-        overlay var(--backdrop-speed) allow-discrete;
+      transition: var(--dialog-duration) allow-discrete;
+      transition-property: display, opacity, overlay;
     }
 
     &[open] {
diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index a8e41db2b..5dc10d7dc 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -1,7 +1,5 @@
 @layer components {
   .lightbox {
-    --backdrop-speed: 150ms;
-
     background-color: oklch(var(--lch-canvas) / 0.66);
     block-size: 100dvh;
     border: 0;
@@ -18,10 +16,6 @@
       backdrop-filter: blur(66px);
       background-color: var(--color-ink);
       opacity: 0;
-      transition:
-        display var(--backdrop-speed) allow-discrete,
-        opacity var(--backdrop-speed),
-        overlay var(--backdrop-speed) allow-discrete;
     }
 
     &[open] {
diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css
index 2fbb56659..c1bb3dc61 100644
--- a/app/assets/stylesheets/popup.css
+++ b/app/assets/stylesheets/popup.css
@@ -149,26 +149,18 @@
   }
 
   .popup--animated {
-    --backdrop-speed: 150ms;
-    --speed: 150ms;
-
     opacity: 0;
     transform: scale(0.2) translateX(-50%);
     transform-origin: top left;
-    transition:
-        display var(--speed) allow-discrete,
-        opacity var(--speed),
-        overlay var(--speed) allow-discrete,
-        transform var(--speed);
+    transition: var(--dialog-duration) allow-discrete;
+    transition-property: display, opacity, overlay transform;
 
     &::backdrop {
       background-color: var(--color-always-black);
       opacity: 0;
       transform: scale(1);
-      transition:
-        display var(--backdrop-speed) allow-discrete,
-        opacity var(--backdrop-speed),
-        overlay var(--backdrop-speed) allow-discrete;
+      transition: var(--dialog-duration) allow-discrete;
+      transition-property: display, opacity, overlay;
     }
 
     &[open] {