fix: allainallain.de hero transition All AI -> Allein Allein

sites/allainallain.de/index.html

@@ -71,7 +71,7 @@
       letter-spacing: 0.08em;
       line-height: 1.1;
       margin-bottom: 32px;
-      animation: fadeIn 2s ease-out;
+      min-height: 1.2em;
     }
 
     h1 .ai {
@@ -79,12 +79,31 @@
       font-weight: 400;
     }
 
+    h1 .filler {
+      color: transparent;
+    }
+
+    h1 .phase {
+      display: inline;
+      opacity: 0;
+      transition: opacity 0.8s ease;
+    }
+
+    h1 .phase.active {
+      opacity: 1;
+    }
+
     .subtitle {
       font-size: clamp(1rem, 2.5vw, 1.2rem);
       color: var(--text-dim);
       font-weight: 200;
       letter-spacing: 0.04em;
-      animation: fadeIn 2s ease-out 0.5s both;
+      opacity: 0;
+      transition: opacity 1s ease;
+    }
+
+    .subtitle.visible {
+      opacity: 1;
     }
 
     .hero::after {
@@ -260,8 +279,8 @@
 
   <section class="hero">
     <div class="wrap">
-      <h1>all·<span class="ai">AI</span>·n·all·<span class="ai">AI</span>·n</h1>
-      <p class="subtitle">Umgeben von KIs. Trotzdem allein.</p>
+      <h1 id="hero-title"></h1>
+      <p class="subtitle" id="hero-sub">Umgeben von KIs. Trotzdem allein.</p>
     </div>
   </section>
 
@@ -356,6 +375,44 @@
     }, { threshold: 0.15 });
 
     document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+
+    // Hero transition: All AI -> All AI All AI -> Allein Allein
+    (function() {
+      const title = document.getElementById('hero-title');
+      const sub = document.getElementById('hero-sub');
+
+      const phases = [
+        { html: 'All <span class="ai">AI</span>', delay: 1200 },
+        { html: 'All <span class="ai">AI</span>, All <span class="ai">AI</span>', delay: 2000 },
+        { html: 'all<span class="ai">AI</span>n all<span class="ai">AI</span>n', delay: 1800 },
+        { html: 'Allein, Allein', delay: 0 },
+      ];
+
+      let i = 0;
+      title.innerHTML = phases[0].html;
+      title.style.opacity = '1';
+
+      function next() {
+        i++;
+        if (i >= phases.length) {
+          sub.classList.add('visible');
+          return;
+        }
+        title.style.opacity = '0';
+        setTimeout(() => {
+          title.innerHTML = phases[i].html;
+          title.style.opacity = '1';
+          if (phases[i].delay > 0) {
+            setTimeout(next, phases[i].delay);
+          } else {
+            setTimeout(() => sub.classList.add('visible'), 1000);
+          }
+        }, 800);
+      }
+
+      title.style.transition = 'opacity 0.8s ease';
+      setTimeout(next, phases[0].delay);
+    })();
   </script>
 
 </body>