Dorian acd3d2fa61 feat: hero intro overlay + embossed Plan-B background
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>
2026-05-10 12:27:38 +01:00
2026-05-10 12:13:03 +01:00
2026-05-05 13:47:41 +01:00
2026-05-05 13:47:41 +01:00
2026-05-05 13:47:41 +01:00
Description
No description provided
5.2 MiB
Languages
HTML 40.4%
Vue 29%
CSS 17.3%
JavaScript 13.2%
Dockerfile 0.1%