/* First-load splash (T209, motion.md §3.4 and §4.7): the Aligned mark assembling on the canvas colour until the app is ready. Static, and linked from index.html, so it paints before any JavaScript arrives; the exit and the removal are src/lib/splash.ts. The duration and easing tokens, and `--bg-canvas` in both themes, are read from src/styles.css, which stays their one declaration. What is declared here belongs to the splash alone and comes from the client's reference, the design record for this surface (motion.md §8): the mark's height, how far each part travels and the exit scale. The loop keeps its own 2.4 s period, as an ambient loop does (constitution §XV), and src/lib/splash.ts computes its fade window from the same period. Only transform and opacity move, inside a fixed-position box, so nothing here shifts layout. Every part is back in place under reduced motion, where the loop stops and the assembled mark stands still. */ .splash { /* The reference's 72 px mark; its parts travel in SVG user units. */ --splash-mark-h: 72px; --splash-travel-near: 2px; --splash-travel-far: 4px; --splash-exit-scale: 0.92; position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg-canvas); transition: opacity var(--duration-splash) ease, visibility var(--duration-splash); } :root[data-splash='skip'] .splash { display: none; } .splash svg { display: block; height: var(--splash-mark-h); width: auto; overflow: visible; transition: transform var(--duration-splash) ease; } .splash-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* One label per language, the one matching read by assistive technology (the strings are `splash.loading` in src/i18n). */ :root[lang^='es'] .splash-label:not([lang^='es']), :root:not([lang^='es']) .splash-label[lang^='es'] { display: none; } .splash-part { transform-box: fill-box; transform-origin: center; animation: 2.4s var(--ease-splash-loop) infinite; } .splash-top { animation-name: splash-top; } .splash-bottom { animation-name: splash-bottom; } .splash-left { animation-name: splash-left; } .splash-right { animation-name: splash-right; } .splash-front { animation-name: splash-front; } /* The exit: src/lib/splash.ts sets data-splash="done" inside the loop's assembled window, then removes the splash after its transition. */ :root[data-splash='done'] .splash { opacity: 0; visibility: hidden; } :root[data-splash='done'] .splash svg { transform: scale(var(--splash-exit-scale)); } @keyframes splash-top { 0%, 100% { transform: translate(var(--splash-travel-near), calc(-1 * var(--splash-travel-far))); opacity: 0; } 30%, 70% { transform: none; opacity: 1; } } @keyframes splash-bottom { 0%, 100% { transform: translate(calc(-1 * var(--splash-travel-near)), var(--splash-travel-far)); opacity: 0; } 30%, 70% { transform: none; opacity: 1; } } @keyframes splash-left { 0%, 5%, 95%, 100% { transform: translate(calc(-1 * var(--splash-travel-far)), var(--splash-travel-near)); opacity: 0; } 35%, 65% { transform: none; opacity: 1; } } @keyframes splash-right { 0%, 5%, 95%, 100% { transform: translate(var(--splash-travel-far), calc(-1 * var(--splash-travel-near))); opacity: 0; } 35%, 65% { transform: none; opacity: 1; } } @keyframes splash-front { 0%, 10%, 90%, 100% { transform: scaleY(0); opacity: 0; } 40%, 60% { transform: scaleY(1); opacity: 1; } } /* Reduced motion (motion.md §7.5): the loop stops with the mark assembled, and the exit is the opacity fade alone, without the scale. */ @media (prefers-reduced-motion: reduce) { .splash-part { animation: none; } .splash svg { transition: none; } :root[data-splash='done'] .splash svg { transform: none; } }