/* =============================================================================
* Linkorae pre-boot critical CSS
* -----------------------------------------------------------------------------
* This CSS is inlined into so it applies BEFORE any JS module executes.
* Works together with /js/v2/lk-preboot.js which adds
* .lk-authed | .lk-anon | .lk-ready
* onto .
*
* Strategy: hide everything with a tiny splash screen until .lk-ready is set,
* then let the cascade reveal the correct UI for authed vs anon users.
* ============================================================================= */
/* --- Splash screen: visible ONLY until pre-boot finishes (which is <1ms) --- */
html:not(.lk-ready) body > *:not(.lk-splash) { visibility: hidden; }
.lk-splash {
position: fixed; inset: 0; z-index: 99999;
display: flex; align-items: center; justify-content: center;
background: #0A1628;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
transition: opacity .18s ease-out;
}
html.lk-ready .lk-splash { opacity: 0; pointer-events: none; }
/* Hide after the transition finishes so it doesn't block clicks */
html.lk-ready .lk-splash { animation: lkSplashHide 0s .18s forwards; }
@keyframes lkSplashHide { to { visibility: hidden; } }
.lk-splash__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lk-splash__logo { font-size: 22px; font-weight: 800; letter-spacing: .5px; color: #FF6B00; }
.lk-splash__spinner {
width: 32px; height: 32px; border-radius: 50%;
border: 3px solid rgba(255,255,255,.15);
border-top-color: #FF6B00;
animation: lkSpin .8s linear infinite;
}
@keyframes lkSpin { to { transform: rotate(360deg); } }
.lk-splash__hint { font-size: 12px; color: rgba(255,255,255,.55); letter-spacing: .4px; }
/* ---------------------------------------------------------------
* Authed / Anon element visibility helpers.
* Use these on any element that should only show in one state.
* ...sign-in CTA...
* ...welcome, {user}...
* They are hidden before pre-boot finishes to prevent flicker.
* --------------------------------------------------------------- */
.lk-only-authed, .lk-only-anon { display: none; }
html.lk-authed .lk-only-authed { display: block; }
html.lk-anon .lk-only-anon { display: block; }
/* Inline variants */
.lk-only-authed--inline, .lk-only-anon--inline { display: none; }
html.lk-authed .lk-only-authed--inline { display: inline; }
html.lk-anon .lk-only-anon--inline { display: inline; }
/* Flex variants */
.lk-only-authed--flex, .lk-only-anon--flex { display: none; }
html.lk-authed .lk-only-authed--flex { display: flex; }
html.lk-anon .lk-only-anon--flex { display: flex; }