/* ════════════════════════════════════════════════════════════════════════════ splash.css — JOYEE critical above-the-fold styles Loaded in for fast First Contentful Paint Zero inline styles in index.html ════════════════════════════════════════════════════════════════════════════ */ /* ── Reset & Base ─────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: #FFF8F0; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; } /* ── SEO: Visually hidden but accessible to crawlers & screen readers ─────── */ .seo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ── Splash screen ────────────────────────────────────────────────────────── */ /* Fixed dimensions prevent CLS (Cumulative Layout Shift) */ .splash-screen { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100vw; background-color: #FFF8F0; position: fixed; top: 0; left: 0; z-index: 9999; will-change: opacity; transition: opacity 0.4s ease-out; } .splash-logo { width: 280px; height: 280px; object-fit: contain; animation: splash-pulse 1.5s infinite ease-in-out alternate; /* Prevent layout shift: aspect ratio locked */ aspect-ratio: 1 / 1; } @keyframes splash-pulse { 0% { transform: scale(0.95); opacity: 0.7; } 100% { transform: scale(1.05); opacity: 1; } } .splash-fade-out { opacity: 0; pointer-events: none; }