Test newer modern shazam

src/components/status.css

@@ -2908,7 +2908,6 @@ a.card:is(:hover, :focus):visited {
 
 .status .media :is(img, video),
 .carousel .carousel-item :is(img, video) {
-  interpolate-size: allow-keywords;
   transition-property: width, height;
   transition-timing-function: var(--timing-function);
   transition-duration: 0.1s;

src/components/status.jsx

@@ -3661,7 +3661,7 @@ function StatusCompact({ sKey }) {
 
   return (
     <article
-      class={`status compact-reply ${
+      class={`status compact-reply shazam ${
         visibility === 'direct' ? 'visibility-direct' : ''
       }`}
       tabindex="-1"

src/index.css

@@ -2,6 +2,8 @@
 @custom-media --viewport-medium (min-width: 40em);
 
 :root {
+  interpolate-size: allow-keywords;
+
   --sai-top: env(safe-area-inset-top);
   --sai-right: env(safe-area-inset-right);
   --sai-bottom: env(safe-area-inset-bottom);
@@ -589,6 +591,16 @@ kbd {
   grid-template-columns: 0fr;
 }
 
+.shazam {
+  transition: all 0.3s ease-out allow-discrete;
+  @starting-style {
+    display: none;
+    opacity: 0;
+    height: 0;
+    overflow: clip;
+  }
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);