diff --git a/public/images/bg-1.jpg b/public/images/bg-1.jpg
index bc00fe9..3adde18 100644
Binary files a/public/images/bg-1.jpg and b/public/images/bg-1.jpg differ
diff --git a/public/intro-test.html b/public/intro-test.html
new file mode 100644
index 0000000..40919fa
--- /dev/null
+++ b/public/intro-test.html
@@ -0,0 +1,456 @@
+
+
+
+
+
+Intro Reveal Tests — In + Out
+
+
+
+
+
+
+
+
+
Intro Reveal Tests — In + Out
+
+ Ten cinematic reveal styles, each with a matching exit.
+ Tap the card for a full In → hold → Out cycle. "In" / "Out" preview each direction independently.
+
+
+
+
+
+
+
+
+
+
+
Wisdom is to prepare
+
+
01
Smokeblur 16px → focus → blur out
+
+
+
+
+
+
Wisdom is to prepare
+
+
02
Focus pullblur snaps to focus, then defocuses
+
+
+
+
+
+
Wisdom is to prepare
+
+
03
Slow zoom1.08 → 1.00 → 1.10 (camera pulls back)
+
+
+
+
+
+
Wisdom is to prepare
+
+
04
Push-in0.92 → 1.00 → 0.92 (reverse dolly)
+
+
+
+
+
+
Wisdom is to prepare
+
+
05
Mask upclip bottom → top; exits top → bottom
+
+
+
+
+
+
Wisdom is to prepare
+
+
06
Iriscircle opens, then closes
+
+
+
+
+
+
Wisdom is to prepare
+
+
07
Word cascadewords in & out, staggered up/down
+
+
+
+
+
+
Wisdom is to prepare
+
+
08
Glow halohalo in, halo flares & fades out
+
+
+
+
+
+
Wisdom is to prepare
+
+
09
ChromaticRGB split converges; splits apart on out
+
+
+
+
+
+
Wisdom is to prepare
+
+
10
Vapor riserises into focus; continues rising into haze
+
+
+
+
+
+
+
Click a card for the full cycle, or use In / Out buttons to preview each direction.
+ Figure out your Plan B in less than two minutes.
+
+
+
Deepstock
@@ -548,6 +564,9 @@ const T = {
hero_eyebrow: "Crisis Preparedness Advisor",
hero_sub: "Preparedness, refined.",
hero_cta: "Begin",
+ intro_l1: "Wisdom is to prepare",
+ intro_l2: "Even if crisis is not here yet",
+ intro_l3: "Figure out your Plan B in less than two minutes.",
stat_scenarios: "Scenarios",
stat_questions: "Questions",
stat_free: "Free Forever",
@@ -665,6 +684,9 @@ const T = {
hero_eyebrow: "⚡ Krisenvorsorge-Berater",
hero_sub: "Vorsorge, verfeinert.",
hero_cta: "Beginnen",
+ intro_l1: "Weise ist, wer vorsorgt.",
+ intro_l2: "Auch wenn noch keine Krise da ist.",
+ intro_l3: "Finden Sie Ihren Plan B in weniger als zwei Minuten.",
stat_scenarios: "Szenarien",
stat_questions: "Fragen",
stat_free: "Kostenlos",
@@ -1750,6 +1772,77 @@ function revealSections() {
})
}
+// Three-stage intro overlay played on the user's first home-page visit
+// in this tab. Skipped on subsequent loads (sessionStorage flag), and
+// also skipped when restoring a saved quiz/results stage so a refresh
+// mid-flow doesn't replay the intro. Each stage shows for `enter +
+// hold` ms, then fades out before the next enters.
+const INTRO_KEY = 'kammergut.intro.shown.v1'
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+async function playIntro() {
+ const overlay = document.getElementById('intro-overlay')
+ if (!overlay) return
+ // Pacing — entry durations match the introSmoke keyframe (1.8s for
+ // stages 1 and 3). Stage 2 needs ~2.6s to land both staggered lines
+ // (line-a 0.1+1.5s, line-b 1.1+1.5s). Holds are tuned so the viewer
+ // can read each line after it lands.
+ // Stages 1 + 2 push in (1.6s); stage 3 word-cascades (~2.4s — 10
+ // words × 0.16s stagger + 0.75s per-word). Stage 3 holds, then the
+ // overlay fade handles its outro so we don't double-dissolve.
+ const stages = [
+ { sel: '.stage-1', enter: 1600, hold: 800 },
+ { sel: '.stage-2', enter: 1600, hold: 1000 },
+ { sel: '.stage-3', enter: 2400, hold: 1500 },
+ ]
+ const exit = 800 // matches the introOut (smoke out) duration
+ // Split stage 3 into per-word spans for the cascade. Run on each
+ // play so a language switch between sessions still gets correct words.
+ const stage3Text = overlay.querySelector('.stage-3 .intro-text')
+ if (stage3Text) {
+ const text = stage3Text.textContent.trim()
+ stage3Text.innerHTML = ''
+ text.split(/\s+/).forEach((word, i) => {
+ const span = document.createElement('span')
+ span.className = 'word'
+ span.style.animationDelay = (0.05 + i * 0.16) + 's'
+ span.textContent = word
+ stage3Text.appendChild(span)
+ })
+ }
+ for (let i = 0; i < stages.length; i++) {
+ const s = stages[i]
+ const el = overlay.querySelector(s.sel)
+ el.classList.add('active')
+ await sleep(s.enter + s.hold)
+ // Skip the smoke-out on the last stage — the overlay's own fade
+ // dissolves the final line, so we don't get two competing outros
+ // (one on the text, one on the FAFAFA panel).
+ if (i < stages.length - 1) {
+ el.classList.add('leaving')
+ el.classList.remove('active')
+ await sleep(exit)
+ el.classList.remove('leaving')
+ }
+ }
+ // Fade overlay out and let the hero animations run via body class.
+ // The last stage is still .active here, so its text rides the
+ // overlay fade-out as one motion.
+ overlay.classList.add('done')
+ document.body.classList.add('intro-done')
+ await sleep(900)
+ overlay.classList.add('gone')
+}
+function maybePlayIntro({ skip = false } = {}) {
+ if (skip || sessionStorage.getItem(INTRO_KEY)) {
+ document.body.classList.add('intro-done')
+ const ov = document.getElementById('intro-overlay')
+ if (ov) ov.classList.add('gone')
+ return
+ }
+ try { sessionStorage.setItem(INTRO_KEY, '1') } catch {}
+ playIntro()
+}
+
// Scroll-lock the page behind the modal. Saving and restoring scrollY +
// position:fixed on body is the iOS-Safari-safe pattern; plain
// overflow:hidden alone doesn't stop touch-driven body scroll there.
@@ -2018,6 +2111,12 @@ onMounted(() => {
setLang(lang)
updateRegionIndicator()
+ // Intro overlay — only on the very first home-page visit in this tab.
+ // If we're resuming a saved quiz/results stage, or the intro has already
+ // played in this session, jump straight to the hero with no animation.
+ const resumingMidFlow = !!(saved && saved.stage && saved.stage !== 'home')
+ maybePlayIntro({ skip: resumingMidFlow })
+
if (saved && saved.stage && saved.stage !== 'home') {
answers = saved.answers || {}
currentQ = typeof saved.currentQ === 'number' ? saved.currentQ : 0
diff --git a/src/styles.css b/src/styles.css
index 1ab24aa..b4b3e17 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1017,6 +1017,129 @@ input[type=range]::-moz-range-thumb {
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hidden { display: none !important; }
+/* ── INTRO OVERLAY ─────────────────────────────────────────────────
+ Three-stage cinematic typographic intro: a slow left-to-right sweep
+ on the first line, then two stages that drift in from a soft blur
+ while the letter-spacing tightens. Text is flat #0a0a0a on a FAFAFA
+ panel — no paint gloss filter. Body picks up `.intro-done` once all
+ stages have played, which is what lets the hero/header animations
+ start. */
+.intro-overlay {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ background: #FAFAFA;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ pointer-events: none;
+ transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.intro-overlay.done { opacity: 0; }
+.intro-overlay.gone { display: none; }
+
+.intro-stage {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ padding: 0 32px;
+ white-space: pre-line;
+}
+/* Intro text — uppercase Barlow at heading scale with wide tracking,
+ matching the "Preparedness. Refined." sub-line typeface. No paint
+ filter / no gradient text-fill (those tanked render performance during
+ the animation, hence the wobble). Solid #0a0a0a on the FAFAFA panel. */
+.intro-stage .intro-text {
+ display: inline-block;
+ font-family: var(--font-body);
+ font-weight: 400;
+ font-size: clamp(22px, 4.6vw, 42px);
+ line-height: 1.3;
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ color: #0a0a0a;
+ /* Push-in default state — held at slightly back-of-frame, soft blur,
+ so the .active class can pull the text forward. */
+ opacity: 0;
+ filter: blur(3px);
+ transform: scale(0.92);
+}
+
+/* Smoke reveal — heavy blur clears as the text emerges, with a small
+ y-drift to suggest weight settling. No clip-path wipe and no letter
+ spacing animation (the resizing effect read as twitchy). Used by all
+ three stages so the unveiling is one consistent vocabulary. Stage 3
+ runs at half-speed (3.6s vs 1.8s) so the closing line lands with
+ weight instead of rushing past. */
+/* Stages 1 + 2 — push-in entry (scale 0.92 → 1.00, blur 3px → 0). */
+.intro-stage.stage-1.active .intro-text,
+.intro-stage.stage-2.active .intro-text {
+ animation: introSmoke 1.6s 0.05s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+/* Stage 3 — word cascade. Wrapper is visible; per-word spans animate
+ in with a stagger (delays set inline by JS). The overlay's own fade
+ handles the outro so we don't double-dissolve the closing line. */
+.intro-stage.stage-3 .intro-text {
+ opacity: 1;
+ filter: none;
+ transform: none;
+ letter-spacing: 0.18em;
+}
+.intro-stage.stage-3 .intro-text > .word {
+ display: inline-block;
+ margin-right: 0.28em;
+ opacity: 0;
+}
+.intro-stage.stage-3.active .intro-text > .word {
+ animation: introWord 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
+}
+@keyframes introWord {
+ 0% { opacity: 0; transform: translateY(14px); filter: blur(8px); }
+ 100% { opacity: 1; transform: translateY(0); filter: blur(0); }
+}
+/* Push-in — camera dollies forward: scale 0.92 → 1.00 with a soft 3px
+ blur resolving to crisp, fade-up paired. Cinematic without wobble. */
+@keyframes introSmoke {
+ 0% { opacity: 0; filter: blur(3px); transform: scale(0.92); }
+ 100% { opacity: 1; filter: blur(0); transform: scale(1); }
+}
+
+/* Exit — smoke out: re-blur to 16px, drift upward 14px, fade to 0.
+ Same effect for every stage so each sentence dissolves into haze
+ before the next one resolves. */
+.intro-stage.leaving .intro-text {
+ animation: introOut 0.8s cubic-bezier(0.4, 0, 1, 1) forwards;
+}
+@keyframes introOut {
+ 0% { opacity: 1; filter: blur(0); transform: translateY(0); }
+ 100% { opacity: 0; filter: blur(16px); transform: translateY(-14px); }
+}
+/* Hero — hidden until intro is done so the bg image, brand wordmark,
+ tagline and Begin button appear AFTER the intro plays out rather
+ than during. The original animations on these elements stay defined
+ below; we just override animation-name to none until intro-done is
+ on the body, at which point each animation plays from its origin. */
+body:not(.intro-done) .hero-eyebrow,
+body:not(.intro-done) .hero h1,
+body:not(.intro-done) .hero .brand-line,
+body:not(.intro-done) .hero-sub,
+body:not(.intro-done) .hero .cta-btn {
+ animation-name: none !important;
+ opacity: 0;
+}
+/* Header + lang toggle ride along — hidden until intro is done. The
+ intro-overlay already covers the hero bg during the stages, so the
+ bg image's fade-in is the natural consequence of the overlay
+ fading out. */
+body:not(.intro-done) .site-header { opacity: 0; }
+body.intro-done .site-header {
+ opacity: 1;
+ transition: opacity 0.6s ease 0.2s;
+}
+
/* ── SINGLE FOLD: hide non-essential sections on load ──
(header stays visible with a transparent background on the homepage) */
.site-header { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: none; }