style(gacha): widen and soften the mirror glint, add a trailing streak

The glint band now fades out over a wider span at a lower peak, a thin
streak trails it, and the sweep runs 800ms on easeInOutSine.

renderer/src/gacha/page/page.css

@@ -153,16 +153,30 @@ body {
 }
 
 .wish-glint {
-  background: linear-gradient(
+  /*
-    135deg,
+   * Two streaks: a wide band whose light fades out slowly on both sides, and a
-    transparent 45.3%,
+   * thin one trailing it. Stops are fractions of the 3x box's diagonal, so 1%
-    color-mix(in srgb, var(--glint, #fff) 19%, transparent) 47.7%,
+   * here is 3% of the card's.
-    color-mix(in srgb, var(--glint-core) 80%, transparent) 49.7%,
+   */
-    var(--glint-core) 50%,
+  background:
-    color-mix(in srgb, var(--glint-core) 80%, transparent) 50.3%,
+    linear-gradient(
-    color-mix(in srgb, var(--glint, #fff) 19%, transparent) 52.3%,
+      135deg,
-    transparent 54.7%
+      transparent 42%,
-  );
+      color-mix(in srgb, var(--glint, #fff) 10%, transparent) 44.5%,
+      color-mix(in srgb, var(--glint, #fff) 30%, transparent) 47%,
+      color-mix(in srgb, var(--glint-core) 55%, transparent) 49%,
+      color-mix(in srgb, var(--glint-core) 70%, transparent) 50%,
+      color-mix(in srgb, var(--glint-core) 55%, transparent) 51%,
+      color-mix(in srgb, var(--glint, #fff) 30%, transparent) 53%,
+      color-mix(in srgb, var(--glint, #fff) 10%, transparent) 55.5%,
+      transparent 58%
+    ),
+    linear-gradient(
+      135deg,
+      transparent 37%,
+      color-mix(in srgb, var(--glint-core) 45%, transparent) 38.5%,
+      transparent 40%
+    );
   height: 300%;
   left: -100%;
   position: absolute;

renderer/src/gacha/page/page.js

@@ -158,7 +158,8 @@ const burstSparkles = (deck, delay, duration) => {
   setTimeout(() => layer.remove(), delay + duration + 1200);
 };
 
-const glint = Object.freeze({duration: 650, easing: 'cubic-bezier(.45, 0, .55, 1)'});
+/** The glint moves on easeInOutSine. */
+const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 1)'});
 
 /**
  * Keeps the card's text hidden while it spins and switches it on as the card
@@ -168,8 +169,9 @@ const glint = Object.freeze({duration: 650, easing: 'cubic-bezier(.45, 0, .55, 1
  * band is a gradient across a box three times the card's size and centred on
  * it, so the card stays inside that box for the whole sweep and every corner is
  * lit; a card-sized box would leave the top-right and bottom-left corners
- * outside it as it slid diagonally. Moving the box 0.8 card-widths and heights
+ * outside it as it slid diagonally. The box moves from 0.8 card-widths and
- * each way starts and ends the band clear of the card.
+ * heights up-left to 0.95 down-right, so both streaks (the thin one trails the
+ * wide one) start and end clear of the card.
  *
  * @param {Element} turn
  * @param {number} delay     Milliseconds until the spin starts.
@@ -181,7 +183,7 @@ const revealFace = (turn, delay, duration) => {
     {delay, duration, easing: 'linear', fill: 'both'},
   );
   const band = turn.querySelector('.wish-glint');
-  band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(26.7%, 26.7%)'}], {
+  band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(31.7%, 31.7%)'}], {
     delay: delay + duration,
     duration: glint.duration,
     easing: glint.easing,