perf(movimento): vitrine e 3D mais leves, WebGL por software lembrado na sessão e suporte ao WebKit

app/components/showcase/lightbox.css

@@ -337,6 +337,38 @@ html.ds-lb-open {
   }
 }
 
+/* tamanhos do degradê da fileira de etapas (celular): sem rolagem a fileira não anima e os dois ficam em 0 */
+@property --ds-fade-start {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+@property --ds-fade-end {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+
+/* o progresso é o da rolagem da própria fileira: sem rolar, só a borda direita esmaece; no meio, as duas; no fim,
+   só a esquerda */
+@keyframes ds-lb-edges {
+  0% {
+    --ds-fade-start: 0px;
+    --ds-fade-end: 28px;
+  }
+  10% {
+    --ds-fade-start: 28px;
+  }
+  90% {
+    --ds-fade-end: 28px;
+  }
+  100% {
+    --ds-fade-start: 28px;
+    --ds-fade-end: 0px;
+  }
+}
+
 @media (max-width: 639px) {
   .ds-lb {
     padding: 0;
@@ -353,6 +385,19 @@ html.ds-lb-open {
     overflow-x: auto;
     scrollbar-width: none;
     padding-bottom: 2px;
+    /* degradê na borda que ainda tem etapas escondidas: some sozinho quando a fileira cabe ou chega ao fim */
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--ds-fade-start),
+      #000 calc(100% - var(--ds-fade-end)),
+      transparent
+    );
+
+    @supports (animation-timeline: scroll()) {
+      animation: ds-lb-edges linear both;
+      animation-timeline: scroll(self inline);
+    }
   }
 
   .ds-lb-chapters::-webkit-scrollbar {