From 843a2822edad0725f6029a5e64bdbb7661fc6897 Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Wed, 22 Jul 2026 16:16:59 +0200
Subject: [PATCH] fix: mask instruction order

---
 website/src/styles/_home.scss | 50 ++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/website/src/styles/_home.scss b/website/src/styles/_home.scss
index e8f30da..49cc052 100644
--- a/website/src/styles/_home.scss
+++ b/website/src/styles/_home.scss
@@ -1,3 +1,26 @@
+@mixin border-mask {
+  mask-image:
+    linear-gradient(#000 0 0),
+    linear-gradient(#000 0 0);
+  mask-origin:
+    content-box,
+    border-box;
+  mask-clip:
+    content-box,
+    border-box;
+  mask-composite: exclude;
+  -webkit-mask-image:
+    linear-gradient(#000 0 0),
+    linear-gradient(#000 0 0);
+  -webkit-mask-origin:
+    content-box,
+    border-box;
+  -webkit-mask-clip:
+    content-box,
+    border-box;
+  -webkit-mask-composite: xor;
+}
+
 .hero,
 .game-hero,
 .page-hero {
@@ -30,14 +53,7 @@
   background:
     radial-gradient(circle at 100% 0%, rgba(246, 196, 83, 0.5), transparent 26%),
     linear-gradient(135deg, rgba(246, 196, 83, 0.38), rgba(139, 92, 246, 0.22) 48%, rgba(196, 181, 253, 0.3));
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
+  @include border-mask;
   pointer-events: none;
 }
 
@@ -211,14 +227,7 @@ span {
   padding: 1px;
   border-radius: inherit;
   background: rgba(165, 180, 252, 0.14);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
+  @include border-mask;
   pointer-events: none;
 }
 
@@ -232,14 +241,7 @@ span {
     radial-gradient(circle at calc(100% - var(--radius-lg)) calc(100% - var(--radius-lg)), rgba(246, 196, 83, 0.9) 0 18px, transparent 27px),
     linear-gradient(90deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%),
     linear-gradient(180deg, transparent 0 30%, rgba(246, 196, 83, 0.12) 42%, rgba(246, 196, 83, 0.72) 72%, rgba(246, 196, 83, 0.9) 100%);
-  mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  mask-composite: exclude;
-  -webkit-mask:
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
-  -webkit-mask-composite: xor;
+  @include border-mask;
   pointer-events: none;
 }