feat: logo

app/globals.css

@@ -68,4 +68,50 @@ body {
   color: var(--foreground);
   font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
   font-weight: 400;
+}
+
+/* ===== Brand motion =====
+   The markup already references these animation classes; define them here so
+   the landing page feels alive (entrance reveals, floating logo, soft glow). */
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes slideInLeft {
+  from { opacity: 0; transform: translateX(-40px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes slideInRight {
+  from { opacity: 0; transform: translateX(40px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+@keyframes floatY {
+  0%, 100% { transform: translateY(0); }
+  50%      { transform: translateY(-14px); }
+}
+@keyframes pulseGlow {
+  0%, 100% { opacity: .3; transform: scale(1); }
+  50%      { opacity: .6; transform: scale(1.08); }
+}
+
+.animate-fadeInUp     { animation: fadeInUp 0.7s ease-out both; }
+.animate-slideInLeft  { animation: slideInLeft 0.7s ease-out both; }
+.animate-slideInRight { animation: slideInRight 0.7s ease-out both; }
+.animate-float        { animation: floatY 5s ease-in-out infinite; }
+.animate-pulseGlow    { animation: pulseGlow 4s ease-in-out infinite; }
+
+/* Stagger helpers — apply animation-delay on top of the entrance animations */
+.delay-100 { animation-delay: .1s; }
+.delay-200 { animation-delay: .2s; }
+.delay-300 { animation-delay: .3s; }
+.delay-400 { animation-delay: .4s; }
+
+@media (prefers-reduced-motion: reduce) {
+  .animate-fadeInUp,
+  .animate-slideInLeft,
+  .animate-slideInRight,
+  .animate-float,
+  .animate-pulseGlow {
+    animation: none;
+  }
 }