fix: Reduce visual clutter on startup (#2709)

- Closes: #2584

src/scss/live-provider.scss

@@ -21,6 +21,18 @@
 .fill {
   position: absolute;
   inset: 0;
+
+  // `both` holds the status invisible for the length of the delay.
+  animation: fade-in 0.4s ease-out 3s both;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 advanced-camera-card-icon {

src/scss/loading.scss

@@ -24,10 +24,9 @@
   opacity: 0;
 }
 
-// The hidden element stays mounted: without this the icon would rotate
-// invisibly forever.
 :host([loaded]) advanced-camera-card-icon {
-  animation: none;
+  display: none;
+  transition: display 0s 1.5s allow-discrete;
 }
 
 advanced-camera-card-icon {

src/scss/media-background.scss

@@ -1,11 +1,34 @@
-// Use the outlined Iris logo since the background color is unknown.
-$bg-img: url('../images/iris-background.svg');
+$bracket-length: 24px;
+$bracket-thickness: 1px;
+$bracket-inset: 10px;
+
+// Mix from text color so the brackets show against both light/dark.
+$bracket-color: color-mix(
+  in srgb,
+  var(--advanced-camera-card-text-color),
+  transparent 90%
+);
+
+$arm: linear-gradient($bracket-color 0 0);
+$arm-horizontal: $bracket-length $bracket-thickness;
+$arm-vertical: $bracket-thickness $bracket-length;
 
 :host {
   background-color: var(--advanced-camera-card-background);
-  background-position: center;
+
+  // Corner brackets mark a media surface that is rendering nothing at all,
+  // which is otherwise indistinguishable from a black video frame.
+  background-image: $arm, $arm, $arm, $arm, $arm, $arm, $arm, $arm;
+  background-size: $arm-horizontal, $arm-vertical, $arm-horizontal, $arm-vertical,
+    $arm-horizontal, $arm-vertical, $arm-horizontal, $arm-vertical;
+  background-position:
+    left $bracket-inset top $bracket-inset,
+    left $bracket-inset top $bracket-inset,
+    right $bracket-inset top $bracket-inset,
+    right $bracket-inset top $bracket-inset,
+    left $bracket-inset bottom $bracket-inset,
+    left $bracket-inset bottom $bracket-inset,
+    right $bracket-inset bottom $bracket-inset,
+    right $bracket-inset bottom $bracket-inset;
   background-repeat: no-repeat;
-  background-image: $bg-img;
-  background-size: 10%;
-  background-position: center;
 }