/* The cover shown between the page loading and the editor being ready. design.html puts `loading` on and lpcReveal() takes it off from the editor's own `loaded:` callback. This replaces the stock BuilderJS loader: a radial gradient of rgba(20,20,20,.8) over the whole viewport with a ring of eight white dots spinning at 150ms. Framed inside the app it read as a crash rather than a wait — the panel went black in the middle of a white page with nothing saying why. Colours repeat the tokens in assets/css/lpc-builder.css rather than referencing them: this file is linked first, before that token block exists, and a var() that resolved to nothing would leave the overlay transparent. */ /* carries the class, so ::before covers the frame however far the editor has got with its own layout. */ .loading:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; background: #ffffff; } /* One 24px ring, the same loading state the app uses inline. */ .loading:after { content: ''; position: fixed; top: 50%; left: 50%; z-index: 9999; box-sizing: border-box; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 2px solid #e5e5e5; border-top-color: #1877f2; border-radius: 50%; animation: lpc-loading-spin 0.7s linear infinite; } /* Reduced motion still has to show that something is happening, so the ring pulses in place rather than turning. */ @media (prefers-reduced-motion: reduce) { .loading:after { animation: lpc-loading-pulse 1.4s ease-in-out infinite; } } @keyframes lpc-loading-spin { to { transform: rotate(360deg); } } @keyframes lpc-loading-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }