/* * Pre-React boot splash. Lives in /public so it is served as a same-origin * stylesheet (CSP style-src 'self') and loads render-blocking in , * before the JS bundle. The markup lives inside #root in index.html and is * replaced automatically when React mounts the app. */ #app-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 1.5rem; background: radial-gradient(circle at 50% 32%, #faf7fb 0%, #f4eef3 58%, #efe8ee 100%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } #app-splash .splash-logo { width: 88px; height: 88px; object-fit: contain; filter: drop-shadow(0 10px 26px rgba(120, 90, 140, 0.28)); animation: splash-float 2.4s ease-in-out infinite; } #app-splash .splash-brand { font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; color: #2b2330; } #app-splash .splash-bar { position: relative; width: 168px; height: 4px; margin-top: 0.25rem; border-radius: 9999px; overflow: hidden; background: rgba(184, 81, 102, 0.16); } #app-splash .splash-bar > span { position: absolute; top: 0; left: -42%; height: 100%; width: 42%; border-radius: 9999px; background: #b85166; animation: splash-slide 1.3s ease-in-out infinite; } @keyframes splash-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes splash-slide { 0% { left: -42%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { #app-splash .splash-logo { animation: none; } #app-splash .splash-bar > span { animation-duration: 2.4s; } } @media (prefers-color-scheme: dark) { #app-splash { background: radial-gradient(circle at 50% 32%, #221c27 0%, #1a161e 70%, #161219 100%); } #app-splash .splash-brand { color: #f3eef6; } }