From 6491118cde24c09738263c7f73d854c4b6a2a807 Mon Sep 17 00:00:00 2001
From: linked-danis <dwi@link-ed.it>
Date: Thu, 12 Mar 2026 14:09:10 +0100
Subject: [PATCH] refactor: SimulatorMask use CSS classes

Replace inline style.display with CSS class toggling.

Changes:
- Add .visible class to CSS module
- Use classList.add/remove instead of style.display

(cherry picked from commit 33465bbf520b65908c18d8022f259803253a7621)
---
 packages/page-controller/src/mask/SimulatorMask.module.css | 4 ++++
 packages/page-controller/src/mask/SimulatorMask.ts         | 4 ++--
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/page-controller/src/mask/SimulatorMask.module.css b/packages/page-controller/src/mask/SimulatorMask.module.css
index fec892d..7b73e05 100644
--- a/packages/page-controller/src/mask/SimulatorMask.module.css
+++ b/packages/page-controller/src/mask/SimulatorMask.module.css
@@ -7,3 +7,7 @@
 
 	display: none;
 }
+
+.wrapper.visible {
+	display: block;
+}
diff --git a/packages/page-controller/src/mask/SimulatorMask.ts b/packages/page-controller/src/mask/SimulatorMask.ts
index 2971db2..eb13eb6 100644
--- a/packages/page-controller/src/mask/SimulatorMask.ts
+++ b/packages/page-controller/src/mask/SimulatorMask.ts
@@ -151,7 +151,7 @@ export class SimulatorMask {
 		this.motion?.start()
 		this.motion?.fadeIn()
 
-		this.wrapper.style.display = 'block'
+		this.wrapper.classList.add(styles.visible)
 
 		// Initialize cursor position
 		this.#currentCursorX = window.innerWidth / 2
@@ -172,7 +172,7 @@ export class SimulatorMask {
 		this.#cursor.classList.remove(cursorStyles.clicking)
 
 		setTimeout(() => {
-			this.wrapper.style.display = 'none'
+			this.wrapper.classList.remove(styles.visible)
 		}, 800) // Match the animation duration
 	}