Flip hover behavior between collection and perma

app/assets/stylesheets/card-columns.css

@@ -82,6 +82,32 @@
     .card__hide-on-index {
       display: none;
     }
+
+    .card__background {
+      .card:has(& img:not([src=""])) {
+        .card__body,
+        .card__footer,
+        .workflow-stage:not(.workflow-stage--current) {
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        
+          @media (any-hover: hover) {
+            .card:hover & {
+              opacity: 1;
+            }
+          }
+        }
+      }
+  
+      @media (any-hover: hover) {
+        .card:hover & {
+          img:not([src=""]) {
+            filter: blur(3px) brightness(1.2);
+            opacity: 0.2;
+          }
+        }
+      }
+    }
   }
 
   .cards__heading {
@@ -117,14 +143,9 @@
       box-shadow: none !important;
     }
 
-    .card__background {
-      display: none;
-    }
-
     .card__collection {
       background-color: var(--color-canvas);
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      padding: 0 0 0 var(--inline-space);
     }
 
     .card__collection-name {
@@ -134,7 +155,6 @@
 
     .card__header {
       color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      margin: 0 0 calc(-0.5 * var(--card-padding-inline)) 0;
     }
 
     .card__title {
@@ -197,7 +217,6 @@
         max-inline-size: 110ch;
         padding-block: 0 var(--cards-gap);
 
-        .card__background,
         .card__meta {
           display: none;
         }

app/assets/stylesheets/card-perma.css

@@ -32,6 +32,11 @@
       border: none;
     }
 
+    .card__background {
+      filter: brightness(1.2) contrast(0.8);
+      opacity: 0.2;
+    }
+
     .card__meta,
     .card__stages {
       font-size: var(--text-small);

app/assets/stylesheets/cards.css

@@ -41,19 +41,12 @@
 
     img {
       block-size: 100%;
+      border-radius: var(--border-radius);
       inline-size: 100%;
       object-fit: cover;
       object-position: center;
-      opacity: 0.2;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    @media (any-hover: hover) {
-      .card:hover & {
-        img:not([src=""]) {
-          opacity: 1;
-        }
-      }
+      opacity: 1;
+      transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
     }
   }
 
@@ -68,6 +61,7 @@
 
   .card__header {
     align-items: center;
+    border-radius: var(--border-radius) 0 0 0;
     display: flex;
     gap: var(--inline-space-half);
     margin-block-start: calc(-1 * var(--card-padding-block));
@@ -81,12 +75,6 @@
     color: var(--color-ink-inverted);
     font-weight: 800;
     padding: var(--block-space-half) var(--inline-space) var(--block-space-half) var(--inline-space-double);
-
-    .cards--considering & {
-      background-color: var(--color-canvas);
-      color: color-mix(in srgb, var(--card-color) 40%, var(--color-ink));
-      padding: 0 0 0 var(--inline-space);
-    }
   }
 
   .card__id {

app/assets/stylesheets/trays.css

@@ -217,6 +217,10 @@
       }
     }
 
+    .card__background {
+      display: none;
+    }
+
     .card__collection {
       padding-block: 0.25ch;
     }