style(gacha): drop the glint flare and slow the streaks to a closer pair

Remove the four-ray star from the mirror glint, bring the two streaks
closer and make them wider, and run the sweep for 1200ms on ease-in-out.

renderer/src/gacha/page/page.css

@@ -161,63 +161,30 @@ body {
   background:
     linear-gradient(
       135deg,
-      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%
+      transparent 41%,
+      color-mix(in srgb, var(--glint, #fff) 10%, transparent) 43.5%,
+      color-mix(in srgb, var(--glint, #fff) 30%, transparent) 46%,
+      color-mix(in srgb, var(--glint-core) 55%, transparent) 48%,
+      color-mix(in srgb, var(--glint-core) 70%, transparent) 49.5% 50.5%,
+      color-mix(in srgb, var(--glint-core) 55%, transparent) 52%,
+      color-mix(in srgb, var(--glint, #fff) 30%, transparent) 54%,
+      color-mix(in srgb, var(--glint, #fff) 10%, transparent) 56.5%,
+      transparent 59%
     ),
     linear-gradient(
       135deg,
-      transparent 37%,
-      color-mix(in srgb, var(--glint-core) 45%, transparent) 38.5%,
-      transparent 40%
+      transparent 39%,
+      color-mix(in srgb, var(--glint-core) 50%, transparent) 41.5%,
+      transparent 44%
     );
   height: 300%;
   left: -100%;
   position: absolute;
   top: -100%;
-  transform: translate(-26.7%, -26.7%);
+  transform: translate(-28.3%, -28.3%);
   width: 300%;
 }
 
-/*
- * A four-ray flare riding the band's centre, which travels corner to corner.
- * Sized against the band's 3x box, so it spans 46% of the card.
- */
-.wish-glint-flare {
-  background: radial-gradient(
-    circle,
-    var(--glint-core) 0 14%,
-    color-mix(in srgb, var(--glint) 53%, transparent) 30%,
-    transparent 64%
-  );
-  aspect-ratio: 1;
-  left: 50%;
-  position: absolute;
-  top: 50%;
-  width: 15.3%;
-}
-
-.wish-glint-flare::before,
-.wish-glint-flare::after {
-  background: linear-gradient(90deg, transparent, var(--glint-core) 46% 54%, transparent);
-  content: '';
-  height: 5%;
-  left: -40%;
-  position: absolute;
-  top: 47.5%;
-  width: 180%;
-}
-
-.wish-glint-flare::after {
-  transform: rotate(90deg);
-}
-
 /*
  * The moon in the card back's diamond seal, in the card's accent and sized to
  * the diamond as on the pack (a 120px glyph in a 184px diamond).

renderer/src/gacha/page/page.js

@@ -43,9 +43,7 @@ const createFace = () => {
   clip.setAttribute('aria-hidden', 'true');
   // Set on the clip itself: the card flies in an overlay outside #stage.
   clip.style.setProperty('--glint', wish.artwork.accent);
-  const band = el('span', 'wish-glint');
-  band.append(el('span', 'wish-glint-flare'));
-  clip.append(band);
+  clip.append(el('span', 'wish-glint'));
   face.append(content, clip);
   return face;
 };
@@ -158,8 +156,8 @@ const burstSparkles = (deck, delay, duration) => {
   setTimeout(() => layer.remove(), delay + duration + 1200);
 };
 
-/** The glint moves on easeInOutSine. */
-const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 1)'});
+/** The glint moves on ease-in-out. */
+const glint = Object.freeze({duration: 1200, easing: 'ease-in-out'});
 
 /**
  * Keeps the card's text hidden while it spins and switches it on as the card
@@ -169,9 +167,9 @@ const glint = Object.freeze({duration: 800, easing: 'cubic-bezier(.37, 0, .63, 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. The box moves from 0.8 card-widths and
- * 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.
+ * outside it as it slid diagonally. The box moves 0.85 card-widths and heights
+ * each way, 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.
@@ -182,21 +180,12 @@ const revealFace = (turn, delay, duration) => {
     [{opacity: 0}, {opacity: 0, offset: lastFaceUpAt}, {opacity: 1, offset: lastFaceUpAt}, {opacity: 1}],
     {delay, duration, easing: 'linear', fill: 'both'},
   );
-  const band = turn.querySelector('.wish-glint');
-  band?.animate([{transform: 'translate(-26.7%, -26.7%)'}, {transform: 'translate(31.7%, 31.7%)'}], {
+  turn.querySelector('.wish-glint')?.animate([{transform: 'translate(-28.3%, -28.3%)'}, {transform: 'translate(28.3%, 28.3%)'}], {
     delay: delay + duration,
     duration: glint.duration,
     easing: glint.easing,
     fill: 'both',
   });
-  band?.querySelector('.wish-glint-flare')?.animate(
-    [
-      {transform: 'translate(-50%, -50%) scale(0) rotate(0deg)', opacity: 0},
-      {transform: 'translate(-50%, -50%) scale(1) rotate(45deg)', opacity: 1, offset: 0.5},
-      {transform: 'translate(-50%, -50%) scale(0) rotate(90deg)', opacity: 0},
-    ],
-    {delay: delay + duration, duration: glint.duration, easing: glint.easing, fill: 'both'},
-  );
 };
 
 /**