css: demo dimming cover artwork UI until hovered/focused

We're immediately reverting this but I want to keep the code
and functionality on the record. Neatness!

2 files changed, 58 insertions, 0 deletions

diff --git a/src/static/css/features.css b/src/static/css/features.css
index 3a1a0cdd..5e9f9e0d 100644
--- a/src/static/css/features.css
+++ b/src/static/css/features.css
@@ -823,6 +823,49 @@
 }
 
 @layer interaction {
+  /* Wide or Medium layout - so, not thin/phone! */
+  @media (min-width: 601px) {
+    .cover-artwork,
+    .cover-artwork .image-container,
+    .cover-artwork .image-details {
+      transition-duration: 0.4s;
+
+      /* Here be spooky. This is an evil Firefox and Safari detection
+       * because those browsers both play nice and let transition-duration
+       * depend on an animated CSS variable. Chrome does not.
+       */
+      @supports (-moz-orient: inline) or (hanging-punctuation: first) {
+        transition-duration: calc(var(--deferred-non-mobile-switch) * 0.4s);
+      }
+
+      transition-timing-function: steps(6, start);
+    }
+
+    .cover-artwork {
+      transition-property: border-color;
+    }
+
+    .cover-artwork:not(:hover, :focus-within):not(:has(.reveal:not(.revealed))) {
+      border-color: var(--dim-color);
+    }
+
+    .cover-artwork .image-container {
+      transition-property: background-color;
+    }
+
+    .cover-artwork:not(:hover, :focus-within) .image-container {
+      background-color: var(--dark-color) !important;
+    }
+
+    .cover-artwork .image-details {
+      transition-property: opacity;
+    }
+
+    .cover-artwork:not(:hover, :focus-within) .image-details:not(.origin-details) {
+      opacity: 0.6;
+    }
+  }
+
   .music-video .image-link::after {
     content: "▶︎";
     background: #0008;
diff --git a/src/static/css/responsive.css b/src/static/css/responsive.css
index 38e4188a..67826a01 100644
--- a/src/static/css/responsive.css
+++ b/src/static/css/responsive.css
@@ -27,7 +27,22 @@
 
 /* Layout - Wide or Medium */
 
+@property deferred-non-mobile-switch {
+  syntax: <number>;
+  initial-value: 0;
+}
+
+@keyframes defer-non-mobile-switch {
+  0%    { --deferred-non-mobile-switch: 0; }
+  99.9% { --deferred-non-mobile-switch: 0; }
+  100%  { --deferred-non-mobile-switch: 1; }
+}
+
 @media (min-width: 600px) {
+  :root {
+    animation: defer-non-mobile-switch 0.15s forwards;
+  }
+
   .content-sticky-heading-root {
     /* Safari doesn't always play nicely with position: sticky,
      * this seems to fix images sometimes displaying above the