/* Launch-Splash — ANIMATION + Keyframes. Die kritischen Sizing/Position-Styles (#splash + #splash img) liegen INLINE im von index.html (FOUC-Schutz), das Markup ebenda, die Removal-Logik in splash.js. Ablauf: Logo steht 0–1s still, zoomt 1–2s schnell groesser; bei 2s fadet der ganze Splash (Logo + weisser Grund) zusammen weg. App laedt parallel dahinter. */ #splash { animation: splashFade 2s forwards; } #splash img { transform-origin: center center; backface-visibility: hidden; will-change: transform; animation: splashZoom 2s forwards; } /* Logo: 0–1s still (scale 1), dann 1–2s schnell beschleunigt groesser. translateZ(0) haelt es auf einer GPU-Ebene → kein Sub-Pixel-Zittern. */ @keyframes splashZoom { 0% { transform: translateZ(0) scale(1); } 67% { transform: translateZ(0) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 1, 1); } 100% { transform: translateZ(0) scale(6); } } /* Ganzer Splash fadet erst ganz am Ende → Logo + Weiss zusammen weg. */ @keyframes splashFade { 0%, 90% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { #splash img { animation: none; } }