perf: lighthouse optimizations - inline critical CSS, lazy-load routes, WebP images, fix CLS and contrast

css/animate.custom.css

@@ -0,0 +1,44 @@
+:root {
+    --animate-duration: 1s;
+}
+
+.animate__animated {
+    animation-duration: var(--animate-duration);
+    animation-fill-mode: both;
+}
+
+.animate__faster {
+    animation-duration: calc(var(--animate-duration) / 2);
+}
+
+@keyframes fadeIn {
+    0% { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.animate__fadeIn {
+    animation-name: fadeIn;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.animate__fadeOut {
+    animation-name: fadeOut;
+}
+
+@keyframes heartBeat {
+    0% { transform: scale(1); }
+    14% { transform: scale(1.3); }
+    28% { transform: scale(1); }
+    42% { transform: scale(1.3); }
+    70% { transform: scale(1); }
+}
+
+.animate__heartBeat {
+    animation-name: heartBeat;
+    animation-duration: calc(var(--animate-duration) * 1.3);
+    animation-timing-function: ease-in-out;
+}