Animations

web/src/styles/app.css

@@ -71,6 +71,31 @@ button {
   100% { transform: translate(-20vw, 10vh) rotate(-3deg) scaleX(-1); }
 }
 
+/* Entrance animations for the browse grid and the album modal - gated by
+   `ANIMATE_VIEW_TRANSITIONS` in `lib/theme.ts`. */
+@keyframes viewEnter {
+  from { opacity: 0; transform: translateY(12px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes sheetEnter {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes backdropEnter {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.view-enter {
+  animation: viewEnter 200ms ease-out;
+}
+.sheet-enter {
+  animation: sheetEnter 200ms ease-out;
+}
+.backdrop-enter {
+  animation: backdropEnter 150ms ease;
+}
+
 .stage {
   position: relative;
   width: 100%;
@@ -132,6 +157,17 @@ button {
   box-shadow: 0 4px 14px var(--shadow);
 }
 
+/* `SHOW_GLASS_BLUR` (`lib/theme.ts`) off sets `data-blur="off"` on `.stage` - drop
+   the (GPU-expensive) backdrop blur everywhere below and fall back to each
+   element's own plain translucent background. */
+.stage[data-blur="off"] .card,
+.stage[data-blur="off"] .group-icon,
+.stage[data-blur="off"] .glass-panel,
+.stage[data-blur="off"] .list-row {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 .card {
   backdrop-filter: blur(6px);
   overflow: hidden;

web/src/styles/room.css

@@ -34,6 +34,12 @@
   box-shadow: 0 8px 24px var(--room-shadow);
 }
 
+/* See the matching rule in app.css - `SHOW_GLASS_BLUR` off sets this on `.stage`. */
+.stage[data-blur="off"] .room-card {
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
 .room-pill {
   border: none;
   cursor: pointer;