Add an interactive 3D weather-journey landing page for Abrban at the site root.

Replace the root redirect with a scroll-driven three.js scene that flies from
overcast clouds through rain and a thunderstorm into a clear blue sunny sky,
fronted by Persian/RTL marketing sections. The dashboard at /dashboard is
untouched.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/app/globals.css

@@ -154,3 +154,69 @@
 .animate-modal-enter {
   animation: modalEnter 0.2s ease-out;
 }
+
+/* ─── Lenis smooth scroll (only active on the landing page) ─── */
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}
+.lenis.lenis-stopped {
+  overflow: hidden;
+}
+.lenis.lenis-smooth iframe {
+  pointer-events: none;
+}
+
+/* ─── Landing-only helpers ───────────────────────────── */
+@keyframes abrbanFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+@keyframes abrbanScrollHint {
+  0% { opacity: 0; transform: translateY(-6px); }
+  50% { opacity: 1; }
+  100% { opacity: 0; transform: translateY(8px); }
+}
+@keyframes abrbanShimmer {
+  to { background-position: 200% center; }
+}
+.abrban-float { animation: abrbanFloat 6s ease-in-out infinite; }
+.abrban-scroll-hint { animation: abrbanScrollHint 1.8s ease-in-out infinite; }
+.abrban-shimmer {
+  background: linear-gradient(100deg, #93c5fd 0%, #ffffff 25%, #2563eb 50%, #ffffff 75%, #93c5fd 100%);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: abrbanShimmer 6s linear infinite;
+  filter: drop-shadow(0 2px 12px rgba(2, 6, 23, 0.55));
+}
+
+/* Strong legibility over the ever-changing sky (bright clouds <-> dark storm). */
+.abrban-ink {
+  text-shadow: 0 1px 2px rgba(2, 6, 23, 0.5), 0 6px 30px rgba(2, 6, 23, 0.45);
+}
+/* Frosted dark-glass panel so text stays crisp on any weather stage. */
+.abrban-panel {
+  background: rgba(15, 23, 42, 0.46);
+  backdrop-filter: blur(18px) saturate(125%);
+  -webkit-backdrop-filter: blur(18px) saturate(125%);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow:
+    0 30px 80px -30px rgba(2, 6, 23, 0.78),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .abrban-float,
+  .abrban-scroll-hint,
+  .abrban-shimmer {
+    animation: none;
+  }
+}