From cb49d42266474cbed2906f3bef9ad80af8257d37 Mon Sep 17 00:00:00 2001
From: adrien <adrien@malingrey.fr>
Date: Fri, 16 Jan 2026 02:31:13 +0100
Subject: [PATCH] 3D cleared line animation

---
 css/stereo.css | 47 +++++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/css/stereo.css b/css/stereo.css
index c60bdc3..ecaef75 100644
--- a/css/stereo.css
+++ b/css/stereo.css
@@ -153,7 +153,9 @@ tr.matrix td:not(.mino) {
 .minoes-table .mino + :not(.mino)::before,
 .minoes-table .mino::after,
 td.trail-animation::before,
-td.trail-animation::after {
+td.trail-animation::after,
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
   content: '';
   position: absolute;
   top: 0;
@@ -175,7 +177,8 @@ td.trail-animation {
 
 /* Left face */
 .minoes-table .mino::before,
-.left .minoes-table .mino + .mino::before {
+.left .minoes-table .mino + .mino::before,
+.left tr.cleared-line-animation td::before {
   --light: calc(
     1.1
     + (var(--light-x) * -0.2)
@@ -187,8 +190,7 @@ td.trail-animation {
 
 /* Right face */
 .right .minoes-table .mino + .mino::before,
-.minoes-table .mino + :not(.mino)::before,
-.right .minoes-table .mino:last-child::before {
+.minoes-table .mino + :not(.mino)::before {
   --light: calc(
     0.85
     + (var(--light-x) * -0.2)
@@ -201,13 +203,15 @@ td.trail-animation {
   transform-origin: left;
 }
 
-.right .minoes-table .mino:last-child::before {
+.right .minoes-table .mino:last-child::before,
+.right tr.cleared-line-animation td:last-child::before {
   transform: translate3d(-2px, -2px, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
   transform-origin: right !important;
 }
 
 /* Top face */
-.minoes-table .mino::after {
+.minoes-table .mino::after,
+tr.cleared-line-animation td::after {
   --light: calc(
     1.5
     + (var(--light-y) * 0.2)
@@ -217,7 +221,8 @@ td.trail-animation {
 }
 
 /* Bottom face */
-.bottom .minoes-table .mino::after {
+.bottom .minoes-table .mino::after,
+.bottom tr.cleared-line-animation td::after {
   --light: calc(
     1.1
     + (var(--light-y) * -0.3)
@@ -266,23 +271,25 @@ td.trail-animation { --h: 180deg; --s: 50%; --l: 90%; --a: 0.4; }
     }
 }
 
-td.trail-animation::before,
-td.trail-animation::after {
-    animation: trail-animation ease-out .3s;
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+    animation: trail-animation ease-out 3s;
 }
 
-td.trail-animation::before {
-  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(-90deg);
-  transform-origin: left;
+@keyframes cleared-line-animation {
+  from {
+    background-color: white;
+    box-shadow: 0 0 0 white;
+  }
+  to {
+    background-color: #fff0;
+    box-shadow: 0 0 50px transparent;
+  }
 }
 
-td.trail-animation::after {
-  transform: translate3d(0, 0, calc(-1 * var(--cell-side))) rotateY(90deg) !important;
-  transform-origin: right !important;
-}
-
-tr.cleared-line-animation {
-    animation: none;
+tr.cleared-line-animation td::before,
+tr.cleared-line-animation td::after {
+  animation: cleared-line-animation ease-out .3s;
 }
 
 @keyframes show-level-animation {