added flip hint animation labeled flip buttons and tap anywhere on front fixed flash on reload with anchor smaller footer on mobile

assets/css/style.css

@@ -64,6 +64,10 @@ body {
     opacity: 0.5;
 }
 
+.preload * {
+    transition: none !important;
+}
+
 .card-container {
     width: var(--width);
     height: var(--height);
@@ -92,6 +96,19 @@ body {
     height: 100%;
     transition: transform 1s;
     transform-style: preserve-3d;
+
+    animation: hint-x 0.9s ease-in-out 1.2s;
+    animation-composition: add;
+}
+
+@keyframes hint-x {
+    35% { transform: rotateX(25deg); }
+    70% { transform: rotateX(-6deg); }
+}
+
+@keyframes hint-y {
+    35% { transform: rotateY(25deg); }
+    70% { transform: rotateY(-6deg); }
 }
 
 #flip:target, .card-container:has(.back :focus-visible) .card {
@@ -368,10 +385,21 @@ body {
     bottom: 0;
     padding: 0 25px 15px 0;
 
-    font-size: 1em;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    font-size: 0.85em;
     color: #808080;
 }
 
+.card .front .flip-button {
+    top: 0;
+    left: 0;
+    justify-content: flex-end;
+    align-items: flex-end;
+}
+
 .card .flip-button i {
     width: 1.25em;
     text-align: center;
@@ -438,6 +466,13 @@ li .spacer {
         --width-expanded: min(440px, calc(100vw - 24px));
         --height-expanded: calc(100dvh - 110px);
     }
+    .footer-container {
+        bottom: calc(6px + env(safe-area-inset-bottom, 0px));
+        right: 6px;
+        gap: 6px;
+        font-size: 0.7em;
+        padding: 3px 10px;
+    }
     .card .front, .card .back-main {
         flex-direction: column;
     }
@@ -447,6 +482,9 @@ li .spacer {
     .card .back {
         transform: rotateY(180deg);
     }
+    .card {
+        animation-name: hint-y;
+    }
     .card .front img {
         max-height: min(200px, 30dvh);
     }
@@ -545,5 +583,6 @@ li .spacer {
 @media (prefers-reduced-motion: reduce) {
     .card, .card-container, .card .back-main, .card .details {
         transition: none;
+        animation: none;
     }
 }