diff --git a/.changeset/modal-drag-property.md b/.changeset/modal-drag-property.md
new file mode 100644
index 00000000..42509986
--- /dev/null
+++ b/.changeset/modal-drag-property.md
@@ -0,0 +1,5 @@
+---
+"reshaped": patch
+---
+
+Improved the `Modal` swipe-to-close performance on mobile. The drag offset custom property is now registered as non-inherited, so updating it on every frame of the gesture only recalculates the style of the modal root instead of every element of the modal content.
diff --git a/.stylelintrc b/.stylelintrc
index 15c93a14..58704915 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -25,6 +25,10 @@
 				"browserslist": ["baseline widely available with downstream"],
 				"allow": {
 					"features": [
+						"at-rules.property",
+						"at-rules.property.syntax",
+						"at-rules.property.initial-value",
+						"at-rules.property.inherits",
 						"selectors.has",
 						"selectors.-webkit-scrollbar",
 						"selectors.not.selector_list",
diff --git a/packages/reshaped/src/components/Modal/Modal.module.css b/packages/reshaped/src/components/Modal/Modal.module.css
index 094dbccc..cb500898 100644
--- a/packages/reshaped/src/components/Modal/Modal.module.css
+++ b/packages/reshaped/src/components/Modal/Modal.module.css
@@ -1,3 +1,14 @@
+/**
+ * Drag offset is updated on every frame of the swipe gesture.
+ * Registering it as a non-inherited property keeps the style recalculation scoped to the modal root
+ * instead of invalidating every element of the modal content
+ */
+@property --rs-modal-drag {
+	syntax: "<length>";
+	initial-value: 0;
+	inherits: false;
+}
+
 .root {
 	--rs-modal-container-width: 100vw;
 	--rs-modal-container-height: 100vh;
diff --git a/packages/reshaped/src/components/ScrollArea/ScrollArea.module.css b/packages/reshaped/src/components/ScrollArea/ScrollArea.module.css
index ebf11331..7d56ea7a 100644
--- a/packages/reshaped/src/components/ScrollArea/ScrollArea.module.css
+++ b/packages/reshaped/src/components/ScrollArea/ScrollArea.module.css
@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-scroll-area-fade-block-start {
 	syntax: "<length>";
 	initial-value: 0;
@@ -22,7 +21,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-scroll-area-thumb-size: var(--rs-unit-x1);
diff --git a/packages/reshaped/src/components/Table/Table.module.css b/packages/reshaped/src/components/Table/Table.module.css
index a6e0224c..20225bcc 100644
--- a/packages/reshaped/src/components/Table/Table.module.css
+++ b/packages/reshaped/src/components/Table/Table.module.css
@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-table-fade-start {
 	syntax: "<length>";
 	initial-value: 0;
@@ -10,7 +9,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-table-fade-size: var(--rs-unit-x8);
diff --git a/packages/reshaped/src/components/Tabs/Tabs.module.css b/packages/reshaped/src/components/Tabs/Tabs.module.css
index 525f3986..1c0fcedd 100644
--- a/packages/reshaped/src/components/Tabs/Tabs.module.css
+++ b/packages/reshaped/src/components/Tabs/Tabs.module.css
@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation for Firefox */
 @property --rs-tabs-mid-l {
 	syntax: "<length>";
 	initial-value: -24px;
@@ -22,7 +21,6 @@
 	initial-value: calc(100% + 24px);
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 .root {
 	--rs-tabs-gap: var(--rs-unit-x5);
diff --git a/packages/reshaped/src/styles/resolvers/inset/inset.module.css b/packages/reshaped/src/styles/resolvers/inset/inset.module.css
index e5aadf6e..9afde977 100644
--- a/packages/reshaped/src/styles/resolvers/inset/inset.module.css
+++ b/packages/reshaped/src/styles/resolvers/inset/inset.module.css
@@ -1,4 +1,3 @@
-/* stylelint-disable plugin/browser-compat -- graceful degradation, var() fallbacks keep centering working without @property */
 @property --rs-inset-translate-x {
 	syntax: "<length-percentage>";
 	initial-value: 0;
@@ -10,7 +9,6 @@
 	initial-value: 0;
 	inherits: false;
 }
-/* stylelint-enable plugin/browser-compat */
 
 @responsive .root[style*="--rs-inset-inline-"] {
 	@variable --rs-inset-inline 0;