From 97005f1959b24dd2d19f594afa0b797463ea99c7 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Sun, 10 May 2026 15:29:46 +0100
Subject: [PATCH] intro updates

---
 src/App.vue    |  4 +++-
 src/styles.css | 14 ++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 927d741..3a10453 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1908,7 +1908,9 @@ async function playIntro() {
         const span = document.createElement('span')
         const isBold = i >= boldFromIdx || (emphasisRe && emphasisRe.test(stripPunct(word)))
         span.className = 'word' + (isBold ? ' bold' : '')
-        span.style.animationDelay = (BASE + i * STAGGER) + 's'
+        const delay = (BASE + i * STAGGER) + 's'
+        span.style.animationDelay = delay
+        span.style.setProperty('--word-delay', delay)
         span.textContent = word
         textEl.appendChild(span)
         // Stage 2 — insert a mobile-only line break after the leading
diff --git a/src/styles.css b/src/styles.css
index 1fe3c1c..f32a1f5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -193,6 +193,9 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f
 body:not(.intro-done) .page-bg-pattern .bg-row {
   opacity: 1;
 }
+body:not(.intro-done) .page-bg-pattern {
+  animation: introPatternFade 0.9s ease both;
+}
 body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(odd) {
   animation: bgRowDriftLeft 14s ease-in-out infinite;
 }
@@ -235,6 +238,10 @@ body:not(.intro-done) .page-bg-pattern .bg-row {
   from { opacity: 0; transform: translateX(160px); }
   to   { opacity: 1; transform: translateX(0); }
 }
+@keyframes introPatternFade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
 
 /* (Per-page bg override removed — every page now uses #FAFAFA.) */
 
@@ -1307,11 +1314,11 @@ input[type=range]::-moz-range-thumb {
 /* Stage 1 — the shield border appears first; the filled check ticks in
    near the end of the sentence, after "prepare" has landed. */
 .intro-stage.stage-1.active .i-shield-outline {
-  animation: introDraw 0.78s 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+  animation: introDraw 0.78s 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
   opacity: 1;
 }
 .intro-stage.stage-1.active .i-secure-tick {
-  animation: tickFillIn 0.48s 2.35s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
+  animation: tickFillIn 0.48s 2.6s cubic-bezier(0.18, 0.89, 0.32, 1.18) forwards;
   transform-box: fill-box;
   transform-origin: center;
 }
@@ -1428,6 +1435,9 @@ input[type=range]::-moz-range-thumb {
 .intro-stage.active .intro-text > .word {
   animation: introWord 1.05s 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) + 0.9s) !important;
+}
 @keyframes introWord {
   0%   { opacity: 0; transform: translateY(14px); }
   100% { opacity: 1; transform: translateY(0); }