acd3d2fa618a7a659f90ea055a3b217b7145e334
Three-stage typographic intro that plays once per browser session before the hero reveals, plus a subtle embossed-text pattern that fades in underneath the wordmark afterwards. Intro overlay - Full-viewport #FAFAFA panel with three sequential stages: "Wisdom is to prepare" → "Even if crisis is not here yet" → "Figure out your Plan B in less than two minutes." (DE: "Weise ist, wer vorsorgt." → "Auch wenn noch keine Krise da ist." → "Finden Sie Ihren Plan B in weniger als zwei Minuten."). Both languages added to the i18n table. - Each stage word-cascades — text is split per-space into <span class ="word"> at play time with an inline animation-delay; each word smoke-rises into place (0 → 1 opacity, blur 8px → 0, translateY 14 → 0). 0.32s stagger × 1.5s per-word duration = half-speed cinematic pacing. - Stages 1 + 2 exit with the introOut smoke-out (re-blur to 16px, drift up 14px, fade to 0 over 0.8s). Stage 3 stays on screen and rides the overlay's 1.1s fade as a single dissolve so we don't double-outro the closing line. - During the intro the body lacks .intro-done; the hero/header/lang toggle are pinned to opacity 0 + animation-name: none. Once the loop completes the body picks up .intro-done and the original hero fadeUp animations fire from scratch. - Replay is gated on sessionStorage.kammergut.intro.shown.v1 — runs once per tab. Skipped automatically when loadState() restores a saved quiz/results stage so a refresh mid-flow doesn't replay. Embossed Plan-B background - 7 rows × ~6 phrases of "Plan B" in mixed scripts (Plan B, Piano B, Plano B, План Б, プランB, 备用计划, 플랜 B, خطة ب, योजना बी, תוכנית ב, Σχέδιο Β) tiled diagonally at -18°. - Embossed effect via text-shadow only: glyph colour = bg colour (#F0F0F0) so only the 1px white top-left highlight and ~6%-black bottom-right shadow render, looking pressed into the panel. - font-size clamps from 42px (mobile) to 60px (desktop) so the pattern reads comfortably on small screens. DM Serif Display matches the wordmark family. - Pattern is opacity 0 until body.intro-done, then fades in over 1.6s with a 0.3s delay so it emerges underneath the cascading wordmark rather than appearing as a separate layer. Hero / misc - Removed the bg-1.jpg background — the hero is now flat #F0F0F0 matching the white-paint inner-card colour. Mobile @media override (which mixed a 50% white veil over the JPG) dropped. - Test page at public/intro-test.html with 10 cinematic styles plus matching outros for picking entry/exit variants. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Description
No description provided
Languages
HTML
40.4%
Vue
29%
CSS
17.3%
JavaScript
13.2%
Dockerfile
0.1%