Replace the entry form with a cinematic intro

The /app entry was a one-tap profile form that read as a signup wall and
leaked most first-time visitors. Replace it with a short, skippable
cosmic cinematic (the portal circles, the Seeker arrives, the figures
fade one by one, then the Paradiso rose), and move profile creation,
legal consent, and the entry/signup/conversion beacons into the welcome
step where they belong.

- Profile defaults to the Seeker, changeable later in settings.
- The welcome modal is now header, tagline, trust line, Campbell, and the
  AI disclaimer; the carousel and the extra prose are gone.
- Scope the AI disclaimer to the figures' generated content, live or
  prepared in advance, so it stays accurate.
- Logout returns to the homepage instead of dropping back into the intro.

The profile_created conversion and its gclid capture are unchanged; only
the call site moved, and it still ships in the bundle.

Author: michael-chipmates

client/src/App.tsx

@@ -21,9 +21,9 @@ import NutzungsbedingungenPage from './pages/NutzungsbedingungenPage';
 // CF Pages serves the prerendered HTML for /figures/*, /themes/*, /about,
 // /contact directly; this React SPA only handles `/`, `/de/`, and the legal
 // pages (Impressum, Datenschutz, Cookie Policy, Nutzungsbedingungen).
-import { sendConversion } from './utils/public/gclidCapture';
-import { sendEntryBeacon } from './utils/entryBeacon';
-import { sendSignupBeacon } from './utils/signupBeacon';
+// Entry/signup beacons + the profile_created conversion now fire from the
+// WelcomeDisclosureModal "Begin" (where profile + consent complete), not here.
+// captureGclid() still runs in index.tsx; sendConversion reads sessionStorage.
 // Dev/test pages — only imported in dev mode so Vite excludes them from production build.
 // Kept lean: contributor-facing diagnostics and benchmarks only. Internal A/B harnesses
 // and visual-design experiments live in the private workspace.
@@ -335,64 +335,35 @@ function App(): React.ReactElement {
       document.body.style.pointerEvents = 'auto';
     };
 
-    // Check if this is a first-time login
-    const hasAnyHistory = LocalStorageAdapter.keys().some((key) => key.startsWith('history_'));
-    const hasSelectedFigure = LocalStorageAdapter.getString('selectedFigure');
-    const { complete: onboardingCompletedFlag, skipped: onboardingSkippedFlag } = useDomainStore.getState().onboarding;
-    const onboardingCompleted = onboardingCompletedFlag ? 'true' : null;
-    const onboardingSkipped = onboardingSkippedFlag ? 'true' : null;
-    
-    const isFirstLogin = !hasAnyHistory && !hasSelectedFigure && !onboardingCompleted && !onboardingSkipped;
+    // The cinematic only plays for visitors without a stored profile, so they
+    // all need the welcome step next. Profile creation, consent, the entry /
+    // signup beacons, and the profile_created conversion now live there (the
+    // WelcomeDisclosureModal "Begin"); this just opens it.
+    sessionStorage.setItem('showOnboarding', 'true');
 
-    // If this is the first login, force the onboarding to show
-    if (isFirstLogin) {
-      sessionStorage.setItem('showOnboarding', 'true');
-    }
-    
     // Clean up before setting logged in state
     cleanupOverlays();
-    
+
     // Set login state (persist hint for page refresh)
     LocalStorageAdapter.setString('isLoggedIn', 'true');
     setIsLoggedIn(true);
 
-    // Anonymous entry beacon — closes the bounce stage between page-load
-    // beacon (arrival) and session row (first Turnstile-gated interaction).
-    sendEntryBeacon();
-
-    // Anonymous signup beacon — fires only for new accounts (isFirstLogin),
-    // so the dashboard can show total signups including organic users (the
-    // gclid-gated profile_created conversion shows ad-attributed ones only).
-    if (isFirstLogin) {
-      sendSignupBeacon();
-    }
-
-    // Send conversion event if user came from a Google Ad
-    sendConversion('profile_created');
-    
     // Clean up again after a short delay (in case React rerenders add new elements)
     setTimeout(cleanupOverlays, 100);
   };
 
   const handleLogout = (): void => {
-    // For production, we want to preserve user state between sessions
-    // Remove profile from IndexedDB when logging out
-    preferencesIndexedDbAdapter.deleteUserProfile().catch(err => {
-      console.error('Failed to delete profile:', err);
-    });
-    
-    // Update app state (clear localStorage hint)
+    // Clear the session, then send the user back to the public homepage.
+    // The entry page is now a cinematic (no profile form), so dropping back
+    // into it on logout would loop oddly — agoracosmica.org is the right place
+    // to land. Delete the profile first, then navigate.
     LocalStorageAdapter.remove('isLoggedIn');
-    setIsLoggedIn(false);
-    
-    // Note: We intentionally preserve the following between sessions:
-    // - Conversation history
-    // - Selected figure and seeds
-    // - Completed onboarding status
-    // - User preferences and settings
-    
-    // This ensures returning users see their previous conversations
-    // and don't have to redo onboarding when they log back in
+    preferencesIndexedDbAdapter.deleteUserProfile()
+      .catch((err) => console.error('Failed to delete profile:', err))
+      .finally(() => { window.location.href = '/'; });
+
+    // Conversation history, selected figure, onboarding status, and preferences
+    // are intentionally preserved between sessions.
   };
 
   // Create router with future flags — memoized to prevent recreation on unrelated re-renders

client/src/assets/translations/ui-de.json

@@ -79,7 +79,7 @@
     "explainer": "Lerne von 30 großen Persönlichkeiten der Geschichte.",
     "access": "Ohne Anmeldung. 30 kostenlose Nachrichten pro Tag.",
     "trustLine": "Gemeinnützig · Open Source · Kein Nutzer-Tracking",
-    "identityLabel": "Tritt ein, wie du bist.",
+    "identityLabel": "Nur ein Name, dann los.",
     "motto": {
       "dante": "Durch dunkle Wälder, ans Licht der Sterne.",
       "beatrice": "Erkenntnis, wie Licht, erhellt den Weg.",
@@ -98,7 +98,11 @@
     "formReady": "Das Profilformular ist jetzt verfügbar",
     "reassure": "Dein Name bleibt auf diesem Gerät. Kein Konto, keine E-Mail.",
     "formAria": "Wähle, wie du erscheinst",
-    "switchLang": "Zu Englisch wechseln"
+    "cinematic": {
+      "card1": "Jede Frage beginnt im Dunkeln.",
+      "card2": "Vor dir haben viele gefragt.",
+      "card3": "Sie erheben sich, um dir zu begegnen."
+    }
   },
   "login": {
     "title": "Willkommen zurück",
@@ -1275,7 +1279,7 @@
     },
     "consent": {
       "heading": "Bevor du loslegst",
-      "aiNotice": "Diese Anwendung wird vollständig von künstlicher Intelligenz (KI) betrieben. Du interagierst NICHT mit echten historischen Persönlichkeiten. Alle Inhalte werden automatisch von einem KI-System generiert und können sachlich unrichtig, unvollständig oder irreführend sein. Überprüfe wichtige Informationen immer mit Primärquellen.",
+      "aiNotice": "Die Persönlichkeiten hier sind KI-Interpretationen, nicht die echten historischen Menschen. Alles, was sie sagen, ob im Gespräch oder vorab erstellt, wird von künstlicher Intelligenz (KI) erzeugt und kann ungenau, unvollständig oder irreführend sein. Überprüfe wichtige Informationen immer anhand vertrauenswürdiger Primärquellen.",
       "ageCheckbox": "Ich bestätige, dass ich mindestens 16 Jahre alt bin oder die Zustimmung eines Erziehungsberechtigten habe.",
       "termsCheckbox": "Ich habe die",
       "termsLink": "Nutzungsbedingungen",

client/src/assets/translations/ui-en.json

@@ -81,7 +81,7 @@
     "explainer": "Learn from 30 remarkable people from history.",
     "access": "No signup. 30 free messages a day.",
     "trustLine": "Nonprofit · Open Source · No User Tracking",
-    "identityLabel": "Step in as you are.",
+    "identityLabel": "Just a name to begin.",
     "motto": {
       "dante": "Through dark woods, into the light of the stars.",
       "beatrice": "Knowledge, like light, illuminates the way.",
@@ -100,7 +100,11 @@
     "formReady": "Profile form is now available",
     "reassure": "Your name stays on this device. No account, no email.",
     "formAria": "Choose how you appear",
-    "switchLang": "Switch to German"
+    "cinematic": {
+      "card1": "Every question begins in the dark.",
+      "card2": "You are not the first to ask.",
+      "card3": "Those who came before rise to meet you."
+    }
   },
   "login": {
     "title": "Welcome Back",
@@ -1273,7 +1277,7 @@
     },
     "consent": {
       "heading": "Before you begin",
-      "aiNotice": "This application is fully operated by artificial intelligence (AI). You are NOT interacting with real historical figures. All content is generated automatically by an AI system and may be inaccurate, incomplete, or misleading. Always verify important information with primary sources.",
+      "aiNotice": "The figures here are AI interpretations, not the real historical people. Everything they say, whether in live conversation or prepared in advance, is generated by artificial intelligence (AI) and can be inaccurate, incomplete, or misleading. Always verify anything important against trusted primary sources.",
       "ageCheckbox": "I confirm that I am at least 16 years old or have the consent of a parent or guardian.",
       "termsCheckbox": "I have read and accept the",
       "termsLink": "Terms of Service",
@@ -1652,7 +1656,7 @@
     },
     "quote": "Follow your bliss and the universe will open doors where there were only walls.",
     "quoteAttribution": "— Joseph Campbell",
-    "trustSignals": "Non-profit · Open Source · No User Tracking",
+    "trustSignals": "Nonprofit · Open Source · No User Tracking",
     "button": "Ignite Your Stars",
     "seekerText": "Questions, like stars, shine within you.",
     "seekerAlt": "The Seeker - your cosmic self with infinite potential within"

client/src/components/CharacterLoginForm.tsx

@@ -145,16 +145,6 @@ const CharacterLoginForm: FC<CharacterLoginFormProps> = ({ onComplete, beatriceI
           margin: 0 0 0.45rem;
         }
 
-        .cs-reassure {
-          text-align: center;
-          color: color-mix(in srgb, var(--text-primary) 42%, transparent);
-          font-size: 0.62rem;
-          line-height: 1.35;
-          letter-spacing: 0.02em;
-          margin: 0.3rem auto 0;
-          max-width: 22rem;
-        }
-
         .cs-selector {
           display: flex;
           align-items: center;
@@ -341,11 +331,6 @@ const CharacterLoginForm: FC<CharacterLoginFormProps> = ({ onComplete, beatriceI
         />
       </div>
 
-      {/* On-device reassurance, right where the "is this a signup?" doubt is
-          born. Resolves the tension with the No User Tracking promise instead
-          of contradicting it. */}
-      <p className="cs-reassure">{tNode('entry.reassure')}</p>
-
       {/* Submit */}
       <div className="form-actions">
         <button type="submit" className="enter-button" disabled={!displayName.trim()}>

client/src/components/CinematicCards.tsx

@@ -0,0 +1,68 @@
+/**
+ * CinematicCards — the parallel verse story for the entry "Vorspann".
+ *
+ * Sits above the ring and unfolds line by line across the whole sequence:
+ * card 1 while the portal circles, card 2 as the Seeker arrives, card 3 while
+ * the figures fade — holding until the rose takes over. Each line floats up and
+ * glows gold, matching the Paradiso rose's Dante quote. The Dante line itself
+ * lives in the rose, so this layer owns cards 1–3.
+ *
+ * `step` is driven by the page timeline so the words sync to the visuals.
+ */
+import { FC } from 'react';
+import { useTranslation } from '../hooks/useTranslation';
+
+interface CinematicCardsProps {
+  active: boolean;
+  step: number; // 0 = portal, 1 = Seeker, 2 = figures fading
+}
+
+const CARD_KEYS = ['entry.cinematic.card1', 'entry.cinematic.card2', 'entry.cinematic.card3'];
+
+const CinematicCards: FC<CinematicCardsProps> = ({ active, step }) => {
+  const { tString } = useTranslation();
+  if (!active) return null;
+
+  const text = tString(CARD_KEYS[step] || CARD_KEYS[0], '');
+
+  return (
+    <div className="cine-stage" aria-hidden="true">
+      <style>{`
+        .cine-stage {
+          position: absolute;
+          left: 50%;
+          top: 13%;
+          transform: translateX(-50%);
+          width: min(90vw, 44rem);
+          text-align: center;
+          z-index: 6;
+          pointer-events: none;
+        }
+        .cine-card {
+          margin: 0;
+          font-family: 'Libre Caslon Text', Georgia, serif;
+          font-style: italic;
+          font-weight: 400;
+          font-size: clamp(1.1rem, 3.4vw, 1.7rem);
+          line-height: 1.45;
+          /* Golden + glow, matching the Paradiso rose quote */
+          color: rgba(245, 210, 120, 0.92);
+          text-shadow: 0 0 28px rgba(245, 210, 120, 0.4);
+          /* Float up like the rose's quote */
+          animation: cine-rise 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
+        }
+        @keyframes cine-rise {
+          from { opacity: 0; transform: translateY(30px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+        @media (prefers-reduced-motion: reduce) {
+          .cine-card { animation: none; opacity: 1; transform: none; }
+        }
+      `}</style>
+      {/* key remounts on step change so each new line floats up fresh */}
+      <p className="cine-card" key={step}>{text}</p>
+    </div>
+  );
+};
+
+export default CinematicCards;

client/src/components/LoginContainer.css

@@ -365,6 +365,15 @@
   color: color-mix(in srgb, var(--gold-subtle) 70%, transparent);
 }
 
+.intro-reassure {
+  margin: 0.3rem 0 0;
+  font-family: var(--font-ui);
+  font-size: clamp(0.7rem, 1.6vw, 0.86rem);
+  font-weight: 400;
+  letter-spacing: 0.015em;
+  color: color-mix(in srgb, var(--gold-subtle) 58%, transparent);
+}
+
 .intro-trust {
   margin: 0.3rem 0 0;
   font-family: var(--font-ui);

client/src/components/LoginContainer.tsx

@@ -1,10 +1,11 @@
 // src/components/LoginContainer.tsx
+//
+// Cinematic entry: no brand header anymore (wordmark, tagline, trust band all
+// live on the homepage + the welcome step). The container just frames the
+// portal, which carries the whole "Vorspann".
 import { forwardRef, ReactNode } from 'react';
 import './LoginContainer.css';
-import CosmicLogo from './CosmicLogo';
 import PerfectPortal from './PerfectPortal';
-import { useTranslation } from '../hooks/useTranslation';
-import { isSelfHost } from '../config/deployment';
 
 interface LoginContainerProps {
   isFormVisible: boolean;
@@ -15,31 +16,8 @@ interface LoginContainerProps {
 
 const LoginContainer = forwardRef<HTMLDivElement, LoginContainerProps>(
   ({ isFormVisible, handlePortalClick, children, loginSuccessful = false }, ref) => {
-    const { tNode } = useTranslation();
-
     return (
       <div className="login-content">
-        {/* Org credit — tiny top line, pairs with the wordmark as a lockup */}
-        <p className={`brand-credit${loginSuccessful ? ' header-to-quote' : ''}`}>{tNode('app.attribution')}</p>
-
-        {/* Brand wordmark — docks just below the credit after the brand beat */}
-        <div className={`login-header-group${loginSuccessful ? ' header-to-quote' : ''}`}>
-          <h1 className="headline app-title">
-            <span className="headline-text">{tNode('app.name')}</span>
-            {/* Logo as child of text for bulletproof positioning */}
-            <CosmicLogo className="headline-logo" />
-          </h1>
-          <p className="brand-tagline">{tNode('app.brandTagline')}</p>
-        </div>
-
-        {/* Working-state value statement — fills the band the wordmark vacates */}
-        <div className={`intro-clarity${loginSuccessful ? ' header-to-quote' : ''}`}>
-          <p className="intro-explainer">{tNode('entry.explainer')}</p>
-          {!isSelfHost && <p className="intro-access">{tNode('entry.access')}</p>}
-          <p className="intro-trust">{tNode('entry.trustLine')}</p>
-        </div>
-
-        {/* Perfect Portal with login form — unmount once rose takes over */}
         {!loginSuccessful && (
           <PerfectPortal
             ref={ref}
@@ -57,4 +35,4 @@ const LoginContainer = forwardRef<HTMLDivElement, LoginContainerProps>(
 
 LoginContainer.displayName = 'LoginContainer';
 
-export default LoginContainer;
+export default LoginContainer;

client/src/components/PerfectPortal.css

@@ -422,18 +422,15 @@
 /* Login form styling */
 .login-form {
   position: absolute;
-  width: 72%; /* Slightly smaller to ensure fit */
+  width: 72%;
   max-width: 240px;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease 0.5s, visibility 0.3s ease 0.5s, transform 0.3s ease 0.5s;
   z-index: var(--z-base); /* 10 */
-  background-color: rgba(20, 25, 60, 0.6);
-  backdrop-filter: blur(var(--glass-blur-heavy));
-  padding: 1.1rem; /* Slightly less padding */
-  border-radius: 10px;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  border: 1px solid color-mix(in srgb, var(--gold-subtle) 25%, transparent);
+  /* Cinematic entry: the form card is gone. The portal now frames the
+     frameless Seeker portrait, so no box (no background, blur, padding,
+     border, or shadow). */
   transform: translateY(20px);
 }