Progress

frontend/src/index.css

@@ -53,3 +53,63 @@ h3 {
   opacity: 1;
   transform: translateY(0);
 }
+
+/* Cereal aside — hover to reveal */
+@keyframes cereal-wobble {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  15% {
+    transform: rotate(-8deg);
+  }
+  30% {
+    transform: rotate(6deg);
+  }
+  45% {
+    transform: rotate(-4deg);
+  }
+  60% {
+    transform: rotate(2deg);
+  }
+  80% {
+    transform: rotate(-1deg);
+  }
+}
+
+.cereal-wobble {
+  transform-origin: bottom center;
+}
+
+.group:hover .cereal-wobble {
+  animation: cereal-wobble 0.8s ease-in-out;
+}
+
+.cereal-reveal {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition:
+    grid-template-rows 0.5s ease-out,
+    color 0.2s ease;
+}
+
+.group:hover .cereal-reveal {
+  grid-template-rows: 1fr;
+}
+
+.cereal-reveal > * {
+  overflow: hidden;
+}
+
+.cereal-text {
+  opacity: 0;
+  transition:
+    opacity 0.4s ease-out,
+    color 0.2s ease;
+}
+
+.group:hover .cereal-text {
+  opacity: 1;
+  transition-delay: 0.2s, 0s;
+}
+