feat: flip card transition

2026-03-15 20:19:00 +01:00
parent 202462bad7
commit a8bd579043
5 changed files with 83 additions and 9 deletions
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -393,4 +393,41 @@ pre {
 .code-editor .token.entity,
 .code-editor .token.url {
    background: none;
+}
+
+/* Recollection flipping card: Logos (front) / Flux (back). GPU-accelerated 3D flip. */
+.recollection-flip-container {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.recollection-flip-card {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    transform-style: preserve-3d;
+    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.recollection-flip-card[data-flipped="true"] {
+    transform: rotateY(-180deg);
+}
+
+.recollection-flip-face {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+    overflow: hidden;
+}
+
+.recollection-flip-face-front {
+    transform: rotateY(0deg);
+}
+
+.recollection-flip-face-back {
+    transform: rotateY(-180deg);
 }