Preview-to-viewer crossfade transition styles

style.css

@@ -603,6 +603,33 @@ header, section, footer {
   pointer-events: none;
 }
 
+/* Preview → WASM viewer swap */
+.card-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  transition: opacity 0.6s ease;
+}
+.card-preview-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+.card-viewer-hidden {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.card-viewer-ready {
+  opacity: 1;
+  transition: opacity 0.6s ease;
+  z-index: 3;
+}
+
 .card-placeholder {
   display: flex;
   align-items: center;