123

src/index.css

@@ -217,21 +217,33 @@ body {
 
 @keyframes puzzle-clear-transition-clear-pop {
   0% {
-    opacity: 0;
-    transform: scale(0.68);
-    filter: saturate(1.06) brightness(1.04);
+    opacity: 1;
+    transform: scale(1);
+    filter: saturate(1.04) brightness(1.02);
   }
 
-  32% {
+  28% {
     opacity: 1;
-    transform: scale(1.06);
-    filter: saturate(1.14) brightness(1.06);
+    transform: scale(1.12);
+    filter: saturate(1.2) brightness(1.08);
+  }
+
+  52% {
+    opacity: 1;
+    transform: scale(1.08);
+    filter: saturate(1.12) brightness(1.04);
+  }
+
+  82% {
+    opacity: 0.42;
+    transform: scale(1.01);
+    filter: saturate(0.96) brightness(1) blur(0.2px);
   }
 
   100% {
     opacity: 0;
-    transform: scale(0.84);
-    filter: saturate(0.92) brightness(1);
+    transform: scale(0.94);
+    filter: saturate(0.88) brightness(0.98) blur(0.8px);
   }
 }
 
@@ -352,6 +364,28 @@ body {
   animation: puzzle-clear-locked-group-settle 180ms ease-out both;
 }
 
+.puzzle-clear-locked-group-visual--highlight {
+  position: relative;
+  animation: puzzle-clear-locked-group-highlight 760ms ease-out both;
+  transform-origin: center;
+}
+
+.puzzle-clear-locked-group-visual--highlight::after {
+  content: '';
+  position: absolute;
+  inset: -10%;
+  pointer-events: none;
+  background: linear-gradient(
+    105deg,
+    transparent 20%,
+    rgba(255, 255, 255, 0.72) 48%,
+    rgba(255, 255, 255, 0.18) 54%,
+    transparent 76%
+  );
+  mix-blend-mode: screen;
+  animation: puzzle-clear-locked-group-sheen 680ms ease-out both;
+}
+
 .puzzle-clear-locked-group-visual--merge {
   box-shadow:
     inset 0 0 0 1px rgba(255, 255, 255, 0.5),
@@ -393,13 +427,17 @@ body {
 }
 
 .puzzle-clear-transition-piece--clear {
-  animation: puzzle-clear-transition-clear-pop 340ms ease-out both;
+  animation: puzzle-clear-transition-clear-pop 720ms cubic-bezier(0.2, 0.78, 0.2, 1)
+    both;
+  transform-origin: center;
+  will-change: transform, opacity, filter;
 }
 
 .puzzle-clear-transition-piece--drop {
-  animation: puzzle-clear-transition-drop 420ms cubic-bezier(0.18, 0.82, 0.24, 1)
+  animation: puzzle-clear-transition-drop 460ms cubic-bezier(0.18, 0.82, 0.24, 1)
     both;
   animation-delay: var(--puzzle-clear-drop-delay, 0ms);
+  will-change: transform, opacity, filter;
 }
 
 @keyframes puzzle-clear-card-swap-feedback {
@@ -461,6 +499,58 @@ body {
   }
 }
 
+@keyframes puzzle-clear-locked-group-highlight {
+  0% {
+    transform: scale(0.992);
+    filter: saturate(1) brightness(1);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.42),
+      0 10px 24px rgba(15, 23, 42, 0.08);
+  }
+
+  22% {
+    transform: scale(1.035);
+    filter: saturate(1.18) brightness(1.06);
+    box-shadow:
+      inset 0 0 0 2px rgba(255, 255, 255, 0.82),
+      0 0 0 3px rgba(52, 211, 153, 0.28),
+      0 18px 34px rgba(15, 23, 42, 0.16);
+  }
+
+  58% {
+    transform: scale(1.012);
+    filter: saturate(1.08) brightness(1.02);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.68),
+      0 0 0 2px rgba(251, 191, 36, 0.18),
+      0 14px 28px rgba(15, 23, 42, 0.12);
+  }
+
+  100% {
+    transform: scale(1);
+    filter: saturate(1) brightness(1);
+    box-shadow:
+      inset 0 0 0 1px rgba(255, 255, 255, 0.5),
+      0 10px 24px rgba(15, 23, 42, 0.08);
+  }
+}
+
+@keyframes puzzle-clear-locked-group-sheen {
+  0% {
+    opacity: 0;
+    transform: translateX(-130%) skewX(-14deg);
+  }
+
+  26% {
+    opacity: 0.86;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(130%) skewX(-14deg);
+  }
+}
+
 @keyframes puzzle-clear-drag-ghost-drop {
   0% {
     opacity: 0.98;
@@ -492,6 +582,8 @@ body {
   .puzzle-clear-card--swap-feedback,
   .puzzle-clear-swap-flight--incoming,
   .puzzle-clear-locked-group-visual,
+  .puzzle-clear-locked-group-visual--highlight,
+  .puzzle-clear-locked-group-visual--highlight::after,
   .puzzle-clear-drag-ghost--dropping,
   .puzzle-clear-drag-ghost--returning,
   .puzzle-clear-transition-piece--clear,