mmh

frontend/src/index.css

@@ -90,24 +90,32 @@ body {
   50% { opacity: 0; }
 }
 
-/* Loading flower: petals bloom one after another, core breathes. */
-.flower-petal {
+/* Loading flower: outer petals bloom in turn, inner petals follow softer,
+   core breathes with an amber glow. */
+.flower-petal, .flower-petal-inner, .flower-core {
   transform-box: fill-box;
   transform-origin: center;
-  animation: bloom 1.8s ease-in-out infinite;
+}
+.flower-petal {
+  animation: bloom 2.4s ease-in-out infinite;
+}
+.flower-petal-inner {
+  animation: bloom-inner 2.4s ease-in-out infinite;
 }
 @keyframes bloom {
-  0%, 100% { transform: scale(0.55); opacity: 0.3; }
+  0%, 100% { transform: scale(0.62); opacity: 0.35; }
   50% { transform: scale(1); opacity: 1; }
 }
+@keyframes bloom-inner {
+  0%, 100% { transform: scale(0.55); opacity: 0.2; }
+  50% { transform: scale(1); opacity: 0.95; }
+}
 .flower-core {
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: core-breathe 1.8s ease-in-out infinite;
+  animation: core-breathe 2.4s ease-in-out infinite;
 }
 @keyframes core-breathe {
-  0%, 100% { transform: scale(0.85); }
-  50% { transform: scale(1.15); }
+  0%, 100% { transform: scale(0.9); }
+  50% { transform: scale(1.1); }
 }
 /* Smooth entrance for full-screen loaders. */
 @keyframes loading-in {
@@ -118,6 +126,81 @@ body {
   animation: loading-in 0.45s ease-out both;
 }
 
+/* Loader halo: expanding accent glow + revolving dashed orbit with a dot. */
+.loader-halo {
+  position: relative;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+}
+.loader-halo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 9999px;
+  background: radial-gradient(circle, rgb(var(--ka-accent-500) / 0.28) 0%, transparent 65%);
+  animation: halo-ping 2.6s ease-out infinite;
+}
+@keyframes halo-ping {
+  0% { transform: scale(0.72); opacity: 0.6; }
+  70% { transform: scale(1.14); opacity: 0; }
+  100% { transform: scale(1.14); opacity: 0; }
+}
+.loader-orbit {
+  position: absolute;
+  inset: 8px;
+  border-radius: 9999px;
+  border: 1.5px dashed rgb(var(--ka-accent-500) / 0.45);
+  animation: orbit-spin 5s linear infinite;
+}
+.loader-orbit::after {
+  content: "";
+  position: absolute;
+  top: -3.5px;
+  left: 50%;
+  width: 7px;
+  height: 7px;
+  margin-left: -3.5px;
+  border-radius: 9999px;
+  background: rgb(var(--ka-accent-500));
+  box-shadow: 0 0 8px rgb(var(--ka-accent-500));
+}
+@keyframes orbit-spin {
+  to { transform: rotate(1turn); }
+}
+/* Loader title: soft accent glow pulse. */
+.loader-title {
+  animation: title-glow 2.6s ease-in-out infinite;
+}
+@keyframes title-glow {
+  0%, 100% { opacity: 0.92; }
+  50% { opacity: 1; text-shadow: 0 0 18px rgb(var(--ka-accent-500) / 0.35); }
+}
+/* Indeterminate shimmer bar. */
+.loader-bar {
+  display: block;
+  width: 11rem;
+  height: 3px;
+  border-radius: 9999px;
+  background: rgb(0 0 0 / 0.1);
+  overflow: hidden;
+}
+.dark .loader-bar {
+  background: rgb(255 255 255 / 0.12);
+}
+.loader-bar > span {
+  display: block;
+  height: 100%;
+  width: 35%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, rgb(var(--ka-accent-400)), rgb(var(--ka-accent-600)));
+  animation: bar-slide 1.5s ease-in-out infinite;
+}
+@keyframes bar-slide {
+  0% { transform: translateX(-110%); }
+  100% { transform: translateX(320%); }
+}
+
 .loading-dots::after {
   content: "";
   animation: dots 1.4s steps(4) infinite;
@@ -129,8 +212,25 @@ body {
   75% { content: "..."; }
 }
 
+/* Bottom pills: springy rise on appear, soft sink on dismiss. */
+@keyframes toast-in {
+  from { opacity: 0; transform: translateY(18px) scale(0.94); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.toast-enter {
+  animation: toast-in 0.38s cubic-bezier(0.21, 1.02, 0.73, 1) both;
+}
+@keyframes toast-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to { opacity: 0; transform: translateY(12px) scale(0.95); }
+}
+.toast-exit {
+  animation: toast-out 0.26s ease-in both;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  .flower-petal, .flower-core, .loading-dots::after, .loading-enter, .typing-cursor::after {
+  .flower-petal, .flower-core, .loading-dots::after, .loading-enter, .typing-cursor::after,
+  .toast-enter, .toast-exit {
     animation: none;
   }
 }