diff --git a/lab/login/style.css b/lab/login/style.css
index 3f3e0d7a..957950b4 100644
--- a/lab/login/style.css
+++ b/lab/login/style.css
@@ -251,18 +251,73 @@
 /* =========== */
 /* PodeTond 💚 */
 /* =========== */
-.name-PodeTond.💚 {
+@supports not (-moz-appearance:none) { /* not firefox */
+    .name-PodeTond.💚 {
+        background: linear-gradient(
+            to right,
+          #eaacb8 20%,
+          #7acbf5 40%,
+            var(--green) 40%,
+            var(--green) 100%
+        );
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        display: inline-block; /* so it doesnt cut the heart */
+        font-family: "JetBrains Mono", sans-serif;
+    }
+}
+
+@supports (-moz-appearance:none) { /* firefox */
+    .name-PodeTond.💚 {
+      background: linear-gradient(
+        to right,
+        #eaacb8 5%,
+        #7acbf5 40%,
+        var(--green) 40%,
+        var(--green) 53%,
+        #eaacb8 53%,
+        #7acbf5 100%
+      );
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      display: inline-block; /* so it doesnt cut the heart */
+      font-family: "JetBrains Mono", sans-serif;
+    }
+}
+
+.name-PodeTond.💚::after {
+  content: "he/him";
+  width: 6em;
+  padding-left: 0.6em;
   background: linear-gradient(
     to right,
     #eaacb8 20%,
-    #7acbf5 80%,
-    var(--green) 80%,
-    var(--green) 100%
+    #7acbf5 80%
   );
   -webkit-text-fill-color: transparent;
   background-clip: text;
   display: inline-block; /* so it doesnt cut the heart */
   font-family: "JetBrains Mono", sans-serif;
+  animation: pronounce 30s linear infinite;
+}
+
+.at-PodeTond.💚::after {
+  content: "";
+  width:0;
+  padding-left:0;
+  animation: none;
+}
+
+.at-PodeTond.💚 {
+  background: linear-gradient(
+    to right,
+    #eaacb8 20%,
+    #7acbf5 80%,
+    var(--green) 80%,
+    var(--green) 100%
+  );
+  background-clip: text;
+  display: inline-block; 
 }
 
 .at-PodeTond.💚:hover {
@@ -273,6 +328,26 @@
   -webkit-text-fill-color: unset;
 }
 
+
+
+@media (prefers-reduced-motion: no-preference) {
+    @keyframes pronounce {
+            0%{content: "he/him"; opacity:1}
+         8.33%{opacity:1}
+        16.66%{opacity:0}
+           25%{opacity:1}
+        33.33%{content: "they/them"; opacity:1}
+        41.66%{opacity:1}
+           50%{opacity:0}
+        58.33%{opacity:1}
+        66.66%{content: "she/her"; opacity:1}
+           75%{opacity:1}
+        83.32%{opacity:0}
+        91.66%{opacity:1}
+          100%{content: "he/him"; opacity:1}
+    }
+}
+
 /* ==== */
 /*  El  */
 /* ==== */