From 706f3f0cc86dc37c6a464d9a80411c0d60968e49 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 1 Nov 2023 23:41:30 +0800
Subject: [PATCH] Subtle peekaboo header for the scroll-driven

---
 src/app.css | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/app.css b/src/app.css
index a2b98c47..273d92dc 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1954,9 +1954,26 @@ meter.donut[hidden] {
 
 /* ACCOUNT STATUSES */
 
+@keyframes peekaboo-header {
+  from {
+    opacity: 0;
+    transform: translateY(10%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .header-account {
   font-size: 90% !important;
   cursor: pointer;
+
+  @supports (animation-timeline: scroll()) {
+    animation: peekaboo-header 1s linear both;
+    animation-timeline: scroll();
+    animation-range: 0 150px;
+  }
 }
 .header-account div {
   font-weight: normal;