v0.36.2

src/admin/web/css/20-shell.css

@@ -869,4 +869,160 @@ body[data-density=compact] .page-intro .lead {
   to {
     visibility: visible;
   }
-}
+}
+/* Optional subtle logo animation (Settings → Appearance → Animate logo). */
+.brand-mark .brand-letter {
+  font: inherit;
+  color: inherit;
+}
+
+html[data-logo-animation="true"] a.brand>.brand-mark {
+  overflow: hidden;
+  transition: box-shadow .4s ease;
+}
+
+html[data-logo-animation="true"] a.brand>.brand-mark>.brand-letter,
+html[data-logo-animation="true"] a.brand>.brand-mark>span {
+  display: inline-block;
+  transform-origin: 50% 55%;
+  will-change: transform;
+}
+
+a.brand>.brand-mark[data-logo-effect="spin-slash"]>span {
+  animation: brand-logo-spin 1.1s cubic-bezier(.55, 0, .25, 1);
+}
+
+a.brand>.brand-mark[data-logo-effect="flip"]>.brand-letter {
+  animation: brand-logo-flip .9s ease-in-out;
+}
+
+a.brand>.brand-mark[data-logo-effect="flip"]>.brand-letter:last-child {
+  animation-delay: .18s;
+}
+
+a.brand>.brand-mark[data-logo-effect="wave"]>* {
+  animation: brand-logo-wave .7s ease-in-out;
+}
+
+a.brand>.brand-mark[data-logo-effect="wave"]>:nth-child(2) {
+  animation-delay: .1s;
+}
+
+a.brand>.brand-mark[data-logo-effect="wave"]>:nth-child(3) {
+  animation-delay: .2s;
+}
+
+a.brand>.brand-mark[data-logo-effect="glow"] {
+  animation: brand-logo-glow 1.3s ease-in-out;
+}
+
+a.brand>.brand-mark[data-logo-effect="sheen"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--logo-accent, var(--accent)) 28%, transparent) 50%, transparent 70%);
+  animation: brand-logo-sheen 1s ease-in-out;
+}
+
+a.brand>.brand-mark[data-logo-effect="glitch"]>* {
+  animation: brand-logo-glitch .45s steps(2, end);
+}
+
+a.brand>.brand-mark[data-logo-effect="wobble"]>span {
+  animation: brand-logo-wobble .9s ease-in-out;
+}
+
+@keyframes brand-logo-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes brand-logo-flip {
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes brand-logo-wave {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  40% {
+    transform: translateY(-3px);
+  }
+}
+
+@keyframes brand-logo-glow {
+
+  0%,
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
+
+  50% {
+    box-shadow: 0 0 12px 1px color-mix(in srgb, var(--logo-accent, var(--accent)) 45%, transparent);
+  }
+}
+
+@keyframes brand-logo-sheen {
+  from {
+    transform: translateX(-110%);
+  }
+
+  to {
+    transform: translateX(110%);
+  }
+}
+
+@keyframes brand-logo-glitch {
+
+  0%,
+  100% {
+    transform: none;
+    text-shadow: none;
+  }
+
+  25% {
+    transform: translateX(-1px);
+    text-shadow: 1px 0 var(--logo-secondary, var(--brand-secondary)), -1px 0 var(--logo-accent, var(--accent));
+  }
+
+  60% {
+    transform: translateX(1px);
+    text-shadow: -1px 0 var(--logo-secondary, var(--brand-secondary)), 1px 0 var(--logo-accent, var(--accent));
+  }
+}
+
+@keyframes brand-logo-wobble {
+
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+
+  25% {
+    transform: rotate(-16deg);
+  }
+
+  55% {
+    transform: rotate(10deg);
+  }
+
+  80% {
+    transform: rotate(-4deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  a.brand>.brand-mark[data-logo-effect],
+  a.brand>.brand-mark[data-logo-effect]>*,
+  a.brand>.brand-mark[data-logo-effect]::after {
+    animation: none !important;
+  }
+}