intro timing refinements and such

src/App.vue

@@ -353,7 +353,7 @@
     <!-- HERO -->
     <section class="hero" id="hero-section">
       <h1 class="paint-3d" data-i18n="brand">Deepstock</h1>
-      <p class="hero-sub" data-i18n="hero_sub">Preparedness, refined.</p>
+      <p class="hero-sub" data-i18n="hero_sub">Crisis Preparedness</p>
       <button class="cta-btn" @click="startQuiz">
         <span data-i18n="hero_cta">Begin</span>
       </button>
@@ -641,10 +641,10 @@ const T = {
     brand: "Deepstock",
     page_title: "Deepstock — Survival Preparedness Advisor",
     hero_eyebrow: "Crisis Preparedness Advisor",
-    hero_sub: "Preparedness, refined.",
+    hero_sub: "Crisis Preparedness",
     hero_cta: "Begin",
     intro_l1: "Wisdom is to prepare",
-    intro_l2: "Even if\ncrisis is not here yet",
+    intro_l2: "Even if Crisis\nis not here yet",
     intro_l3: "Figure out your Plan B in less than 2 Minutes.",
     stat_scenarios: "Scenarios",
     stat_questions: "Questions",
@@ -761,10 +761,10 @@ const T = {
     brand: "Kammergut",
     page_title: "Kammergut — Krisenvorsorge-Berater",
     hero_eyebrow: "⚡ Krisenvorsorge-Berater",
-    hero_sub: "Vorsorge, verfeinert.",
+    hero_sub: "Krisenvorsorge",
     hero_cta: "Beginnen",
     intro_l1: "Weise ist, wer vorsorgt.",
-    intro_l2: "Auch wenn\nnoch keine Krise da ist.",
+    intro_l2: "Auch wenn Krise\nnoch nicht da ist.",
     intro_l3: "Finden Sie Ihren Plan B in weniger als 2 Minuten.",
     stat_scenarios: "Szenarien",
     stat_questions: "Fragen",
@@ -1881,8 +1881,8 @@ async function playIntro() {
   // switches still split correctly) and measures entry from live word
   // count. Each word carries the introWord blur resolve.
   const SPEED = 1.25
-  const STAGGER = 0.22 * SPEED
-  const PER_WORD = 1.05 * SPEED
+  const STAGGER = 0.28 * SPEED
+  const PER_WORD = 1.2 * SPEED
   const BASE = 0.05 * SPEED
   const stages = []
   for (let n = 1; n <= 3; n++) {
@@ -1914,13 +1914,11 @@ async function playIntro() {
         span.style.setProperty('--word-delay', delay)
         span.textContent = word
         textEl.appendChild(span)
-        // Stage 2 — insert a mobile-only line break after the leading
-        // conjunction so "crisis is not here yet" / "noch keine Krise
-        // da ist." sits on its own row on small viewports. Hidden on
-        // desktop via CSS.
-        if (n === 2 && /^(if|wenn)$/i.test(stripPunct(word))) {
+        // Stage 2 — keep "Even if Crisis" / "Auch wenn Krise" together
+        // on the first line, then break before the second clause.
+        if (n === 2 && /^(crisis|krise)$/i.test(stripPunct(word))) {
           textEl.appendChild(document.createElement('br'))
-            .className = 'mobile-break'
+            .className = 'intro-line-break'
         }
       })
     }

src/styles.css

@@ -194,7 +194,7 @@ body:not(.intro-done) .page-bg-pattern .bg-row {
   opacity: 1;
 }
 body:not(.intro-done) .page-bg-pattern {
-  animation: introPatternFade 0.9s ease both;
+  animation: introPatternFade 18s ease both;
 }
 body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(odd) {
   animation: bgRowDriftLeft 14s ease-in-out infinite;
@@ -1369,7 +1369,7 @@ input[type=range]::-moz-range-thumb {
 }
 .intro-stage.stage-3.active .icon-clock .i-hand {
   animation: introDraw 0.35s 0.70s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
-             clockSweep 2.75s 2.35s linear forwards;
+             clockSweep 4.7s 0.7s linear forwards;
 }
 @keyframes clockSweep {
   from { transform: rotate(0deg); }
@@ -1436,6 +1436,7 @@ input[type=range]::-moz-range-thumb {
 @media (min-width: 768px) {
   .intro-stage br.mobile-break { display: none; }
 }
+.intro-stage br.intro-line-break { display: block; }
 /* Mobile-only line break — JS inserts a <br class="mobile-break">
    after "if" / "wenn" on stage 2. Display:none on wider viewports so
    the line stays one row on desktop / tablet. */
@@ -1444,7 +1445,7 @@ input[type=range]::-moz-range-thumb {
   .intro-stage .intro-text .mobile-break { display: none; }
 }
 .intro-stage.active .intro-text > .word {
-  animation: introWord 1.3125s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  animation: introWord 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
 }
 .intro-stage.stage-1.active .intro-text > .word {
   animation-delay: calc(var(--word-delay, 0s) + 1.125s) !important;