/* Bua™ preloaders & screen lock — v2.1 · Brand Guidelines v15 · The Woven Kgotla · 2 Oct 2026
   One stylesheet. Plain CSS + SVG. Every boot and sign-out pass is 12 s except the in-page wait (1.6 s) and the lock breath (2.8 s).
   Theme with [data-bua-theme="dark"|"light"] on any ancestor (follows the app theme, not the OS).
   --bua-mark draws the glyph; --bua-action is the one action colour. Never fill a control with --bua-mark on paper. */

:root,[data-bua-theme="dark"]{
  --bua-ground:#040907; --bua-mark:#FFD24A; --bua-action:#FFD24A; --bua-word:#F2EEE6;
  --bua-muted:#9FB3AB; --bua-sage:#7C918A; --bua-tag:#FFD24A; --bua-ink-on-mark:#040907;
}
[data-bua-theme="light"]{
  --bua-ground:#F4F1EA; --bua-mark:#F0A81B; --bua-action:#8A5808; --bua-word:#0B1512;
  --bua-muted:#4C5F58; --bua-sage:#6B7C75; --bua-tag:#8A5808; --bua-ink-on-mark:#F4F1EA;
}

/* ---- geometry (viewBox 0 0 80 80) — never redraw, only recolour ----
   ring     d="M15.1 47.6A26 26 0 1 1 32.4 64.9"  stroke 5.5, dasharray 10.5 4.5, round caps. ALWAYS woven.
   speaker  r6 @ 41,37
   dots     r4.5 @ 25,55.5 (.62) · r3.4 @ 14,66.5 (.34)       ← full mark / original
   closed   r2.75 @ 25.09,61.3 · r2.75 @ 18.7,54.91 (1)       ← lock mark, iteration 1
   seats    r4.6 @ 40,23 · 55.4,32.8 · 53,50.9 (1)           ← My Circle icon, iteration 2 */

@keyframes bua-g-arc{0%{transform:rotate(-1080deg);opacity:1}30%,94%{transform:rotate(0deg);opacity:1}100%{transform:rotate(0deg);opacity:0}}
@keyframes bua-g-arc-out{0%{transform:rotate(-900deg);opacity:1}30%,94%{transform:rotate(0deg);opacity:1}100%{transform:rotate(0deg);opacity:0}}
.bua-boot.bua-boot--out .bua-ring{animation-name:bua-g-arc-out}
@keyframes bua-g-dot1{0%,34%{transform:translate(-24px,26px);opacity:0}40%{opacity:.62}52%,94%{transform:translate(0,0);opacity:.62}100%{transform:translate(0,0);opacity:0}}
@keyframes bua-g-dot2{0%,30%{transform:translate(-18px,19px);opacity:0}36%{opacity:.34}46%,94%{transform:translate(0,0);opacity:.34}100%{transform:translate(0,0);opacity:0}}
@keyframes bua-g-speaker{0%,48%{transform:scale(0);opacity:0}58%,94%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes bua-g-word{0%,65.9166667%{opacity:0;transform:translateY(10px)}76%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes bua-g-w1{0%,65.9166667%{opacity:0}76%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-g-w2{0%,72%{opacity:0}82%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-g-w3{0%,78%{opacity:0}89%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-g-pulse{0%,86%{transform:scale(.55);opacity:0}92%{opacity:.3}100%{transform:scale(1.5);opacity:0}}
@keyframes bua-arc{0%{transform:rotate(-900deg)}38%,100%{transform:rotate(0deg)}}
@keyframes bua-speaker{0%,68%{transform:scale(0);opacity:0}78%,94%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes bua-ring{0%,78%{transform:scale(.55);opacity:0}86%{opacity:.3}100%{transform:scale(1.5);opacity:0}}
@keyframes bua-w1{0%,44%{opacity:0}52%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-w2{0%,56%{opacity:0}64%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-w3{0%,74%{opacity:0}82%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-gap1{0%,48%{transform:translate(-24px,20.2px) scale(1.64);opacity:0}56%{opacity:.62}68%{transform:translate(-.1px,-5.8px) scale(1.64);opacity:.62}76%,94%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes bua-gap2{0%,42%{transform:translate(-22.7px,30.6px) scale(1.24);opacity:0}50%{opacity:.34}60%{transform:translate(-4.7px,11.6px) scale(1.24);opacity:.34}70%,94%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes bua-seat1{0%,46%{transform:translate(-47px,23.1px) scale(.75);opacity:0}52%{opacity:.7}60%{transform:translate(-31.4px,7.5px) scale(.75);opacity:.8}72%,94%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes bua-seat2{0%,40%{transform:translate(-53.4px,37.2px) scale(.75);opacity:0}46%{opacity:.6}54%{transform:translate(-33.8px,25.6px) scale(.75);opacity:.8}66%,94%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(0,0) scale(1);opacity:0}}
@keyframes bua-f-spin{0%{transform:rotate(-540deg)}22%,100%{transform:rotate(0deg)}}
@keyframes bua-f-weave{0%,100%{stroke-width:5.5px}}
@keyframes bua-f-sp{0%,14%{transform:translate(-1px,-14px) scale(0);opacity:0}22%,94%{transform:translate(-1px,-14px) scale(.767);opacity:1}100%{transform:translate(-1px,-14px) scale(.767);opacity:0}}
@keyframes bua-f-d1{0%,24%{transform:translate(-10px,10px) scale(1);opacity:0}30%{opacity:.7}40%{transform:translate(-3.4px,2.9px) scale(1);opacity:.85}52%,94%{transform:translate(30.4px,-22.7px) scale(1.022);opacity:1}100%{transform:translate(30.4px,-22.7px) scale(1.022);opacity:0}}
@keyframes bua-f-d2{0%,30%{transform:translate(-8px,8px) scale(1);opacity:0}36%{opacity:.6}44%{transform:translate(7.6px,-8.1px) scale(1.2);opacity:.85}56%,94%{transform:translate(39px,-15.6px) scale(1.353);opacity:1}100%{transform:translate(39px,-15.6px) scale(1.353);opacity:0}}
@keyframes bua-f-word{0%,66%{opacity:0;transform:translateY(10px)}76%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes bua-f-t1{0%,74%{opacity:0}80%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-f-t2{0%,80%{opacity:0}85%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-f-t3{0%,85%{opacity:0}89%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-f-pulse{0%,86%{transform:scale(.6);opacity:0}92%{opacity:.3}100%{transform:scale(1.5);opacity:0}}
@keyframes bua-weave{0%{transform:scaleX(.04)}92%,100%{transform:scaleX(1)}}
@keyframes bua-turn{to{transform:rotate(360deg)}}
@keyframes bua-flash{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes bua-breath{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes bua-lockring{0%{transform:scale(.9);opacity:.35}100%{transform:scale(1.35);opacity:0}}
@keyframes bua-v-word{0%,78%{opacity:0;transform:translateY(10px)}86%,94%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes bua-g-gin{0%,30%{opacity:0}34%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-g-fill{0%,30%{transform:scaleX(.04)}92%,100%{transform:scaleX(1)}}
@keyframes bua-v-gin{0%,40%{opacity:0}44%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-v-fill{0%,40%{transform:scaleX(.04)}92%,100%{transform:scaleX(1)}}
@keyframes bua-f-gin{0%,24%{opacity:0}28%,94%{opacity:1}100%{opacity:0}}
@keyframes bua-f-fill{0%,24%{transform:scaleX(.04)}92%,100%{transform:scaleX(1)}}
@keyframes bua-deny{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ---- shared ---- */
.bua-screen{position:fixed;inset:0;z-index:9999;background:var(--bua-ground);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;font-family:Archivo,system-ui,sans-serif}
.bua-o{transform-box:view-box}
.bua-lockword{display:inline-flex;flex-direction:column;width:fit-content}
.bua-word{position:relative;font-weight:800;font-size:71px;letter-spacing:-.05em;line-height:1;color:var(--bua-word);text-align:center}
.bua-word .bua-tm{position:absolute;left:100%;top:6px;font-weight:600;font-size:15px;letter-spacing:0;opacity:.7}
.bua-tagline{width:0;min-width:100%;display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:14px;color:var(--bua-tag);margin-top:9px}
.bua-foot{position:absolute;left:0;right:0;bottom:34px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bua-status{font-weight:500;font-size:14px;color:var(--bua-muted)}
.bua-version{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;color:var(--bua-sage);font-variant-numeric:tabular-nums}
.bua-gauge-fill{transform-origin:0 0;transform-box:view-box}

/* ---- 1. cold start · DEFAULT · original, icon → full brand (12 s) ----
   The icon never moves or resizes. Only the wordmark and tagline transition. */
.bua-boot{--bua-boot:12s}
.bua-boot .bua-ring{transform-origin:40px 40px;transform-box:view-box;animation:bua-g-arc var(--bua-boot) cubic-bezier(.22,.9,.32,1) infinite}
.bua-boot .bua-speaker{transform-origin:41px 37px;transform-box:view-box;animation:bua-g-speaker var(--bua-boot) ease infinite}
.bua-boot .bua-dot1{animation:bua-g-dot1 var(--bua-boot) ease-out infinite}
.bua-boot .bua-dot2{animation:bua-g-dot2 var(--bua-boot) ease-out infinite}
.bua-boot .bua-pulse{transform-origin:40px 40px;transform-box:view-box;animation:bua-g-pulse var(--bua-boot) ease-out infinite}
.bua-boot .bua-lockword,.bua-boot .bua-status{opacity:0;animation:bua-g-word var(--bua-boot) ease infinite}  /* wordmark + status: after the icon has assembled */
.bua-boot .bua-gauge{opacity:0;animation:bua-g-gin var(--bua-boot) ease infinite}                        /* gauge: with the moving dots (30%) */
.bua-boot .bua-version{opacity:1}                                                                        /* version: with the icon, from frame 0 */
.bua-boot .bua-w1{animation:bua-g-w1 var(--bua-boot) ease infinite}
.bua-boot .bua-w2{animation:bua-g-w2 var(--bua-boot) ease infinite}
.bua-boot .bua-w3{animation:bua-g-w3 var(--bua-boot) ease infinite}
.bua-boot .bua-gauge-fill{animation:bua-g-fill var(--bua-boot) cubic-bezier(.4,0,.6,1) infinite}

/* ---- 2. sign-out · the default played backwards, once (12 s) ---- */
.bua-boot--out .bua-ring,.bua-boot--out .bua-speaker,.bua-boot--out .bua-dot1,.bua-boot--out .bua-dot2,.bua-boot--out .bua-pulse,
.bua-boot--out .bua-lockword,.bua-boot--out .bua-status,.bua-boot--out .bua-gauge,.bua-boot--out .bua-w1,.bua-boot--out .bua-w2,.bua-boot--out .bua-w3,.bua-boot--out .bua-gauge-fill{
  animation-direction:reverse;animation-iteration-count:1;animation-fill-mode:both}

/* ---- variants (behind BUA_BOOT_VARIANT; icon only until it has assembled, then the rest at 78–86%) ---- */
.bua-boot--ring .bua-lockword,.bua-boot--seated .bua-lockword,.bua-boot--ring .bua-status,.bua-boot--seated .bua-status{animation-name:bua-v-word}
.bua-boot--ring .bua-gauge,.bua-boot--seated .bua-gauge{animation-name:bua-v-gin}
.bua-boot--ring .bua-gauge-fill,.bua-boot--seated .bua-gauge-fill{animation-name:bua-v-fill}
.bua-boot--ring .bua-ring,.bua-boot--seated .bua-ring{animation-name:bua-arc}
.bua-boot--ring .bua-speaker{animation-name:bua-speaker}
.bua-boot--ring .bua-pulse,.bua-boot--seated .bua-pulse{animation-name:bua-ring}
.bua-boot--ring .bua-w1,.bua-boot--seated .bua-w1{animation-name:bua-w1}
.bua-boot--ring .bua-w2,.bua-boot--seated .bua-w2{animation-name:bua-w2}
.bua-boot--ring .bua-w3,.bua-boot--seated .bua-w3{animation-name:bua-w3}
/* iteration 1 · ring closes */
.bua-boot--ring .bua-gap1{transform-origin:25.09px 61.3px;transform-box:view-box;animation:bua-gap1 var(--bua-boot) ease-out infinite}
.bua-boot--ring .bua-gap2{transform-origin:18.7px 54.91px;transform-box:view-box;animation:bua-gap2 var(--bua-boot) ease-out infinite}
/* iteration 2 · seated inside, ends on the My Circle icon */
.bua-boot--seated .bua-speaker{transform-origin:40px 23px;animation-name:bua-speaker}
.bua-boot--seated .bua-seat1{transform-origin:53px 50.9px;transform-box:view-box;animation:bua-seat1 var(--bua-boot) ease-out infinite}
.bua-boot--seated .bua-seat2{transform-origin:55.4px 32.8px;transform-box:view-box;animation:bua-seat2 var(--bua-boot) ease-out infinite}
/* iteration 3 · members walk in to the My Circle icon, wordmark rises in */
.bua-boot--brand .bua-spinner{transform-origin:40px 40px;transform-box:view-box;animation:bua-f-spin var(--bua-boot) cubic-bezier(.22,.9,.32,1) infinite}
.bua-boot--brand .bua-ring{animation:bua-f-weave var(--bua-boot) cubic-bezier(.65,0,.35,1) infinite;transform:none}
.bua-boot--brand .bua-speaker{transform-origin:41px 37px;animation:bua-f-sp var(--bua-boot) cubic-bezier(.65,0,.35,1) infinite}
.bua-boot--brand .bua-dot1{transform-origin:25px 55.5px;transform-box:view-box;animation:bua-f-d1 var(--bua-boot) cubic-bezier(.65,0,.35,1) infinite}
.bua-boot--brand .bua-dot2{transform-origin:14px 66.5px;transform-box:view-box;animation:bua-f-d2 var(--bua-boot) cubic-bezier(.65,0,.35,1) infinite}
.bua-boot--brand .bua-pulse{animation:bua-f-pulse var(--bua-boot) ease-out infinite}
.bua-boot--brand .bua-lockword,.bua-boot--brand .bua-status{animation:bua-f-word var(--bua-boot) ease infinite}
.bua-boot--brand .bua-gauge{animation:bua-f-gin var(--bua-boot) ease infinite}
.bua-boot--brand .bua-gauge-fill{animation-name:bua-f-fill}
.bua-boot--brand .bua-w1{animation:bua-f-t1 var(--bua-boot) ease infinite}
.bua-boot--brand .bua-w2{animation:bua-f-t2 var(--bua-boot) ease infinite}
.bua-boot--brand .bua-w3{animation:bua-f-t3 var(--bua-boot) ease infinite}

/* ---- 3. in-page wait (1.6 s) — woven, 48 px floor, one per screen ---- */
.bua-wait{display:flex;flex-direction:column;align-items:center;gap:18px}
.bua-wait .bua-ring{transform-origin:40px 40px;transform-box:view-box;animation:bua-turn 1.6s linear infinite}
.bua-wait .bua-speaker{animation:bua-flash 1.6s ease infinite}
.bua-wait svg{min-width:48px;min-height:48px}
.bua-wait-label{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:var(--bua-sage)}

/* ---- 4. idle lock (2.8 s) — closed-loop icon only, centred; tap the icon to unlock ---- */
.bua-lock{justify-content:center;gap:0}
.bua-lock-mark{width:168px;height:168px;border:0;border-radius:50%;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bua-lock-mark:focus-visible{outline:2px solid var(--bua-action);outline-offset:4px}
.bua-lock .bua-mark{animation:bua-breath 2.8s ease-in-out infinite}
.bua-lock .bua-lockring{transform-origin:40px 40px;transform-box:view-box;animation:bua-lockring 2.8s ease-out infinite}
.bua-lock-mark:active svg{transform:scale(.96)}
.bua-lock-mark.is-denied{animation:bua-deny 360ms ease-in-out 1}
.bua-lock.is-unlocking{opacity:0;transition:opacity 200ms ease}
.bua-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- tablet · shortest side ≥ 600 px: same motion, lockup ×1.27, centred in both orientations ---- */
@media (min-width:600px) and (min-height:600px){
  .bua-boot{gap:36px}
  .bua-boot > svg:first-of-type{width:190px;height:190px}
  .bua-word{font-size:90px}
  .bua-word .bua-tm{font-size:19px;top:8px}
  .bua-tagline{font-size:12.7px;line-height:18px;margin-top:11px}
  .bua-foot{bottom:48px;gap:12px}
  .bua-status{font-size:16px}
  .bua-gauge{width:168px;height:8px}
  .bua-version{font-size:11px}
  .bua-lock-mark{width:212px;height:212px}
  .bua-lock-mark svg{width:152px;height:152px}
}

/* Short landscape screens keep the brand above the footer without restarting motion. */
@media (max-height:499px){
  .bua-boot{justify-content:flex-start;gap:28px;box-sizing:border-box;padding-top:max(0px,calc((100dvh - 272px - 60px)/2))}
  .bua-boot > svg:first-of-type{flex-shrink:0}
  .bua-boot .bua-foot{bottom:max(8px,env(safe-area-inset-bottom));gap:2px}
}
.bua-gauge path[clip-path]{stroke:var(--bua-action)}
.bua-status{text-align:center;max-width:calc(100% - 40px)}


/* ---- reduced motion: show the finished frame, no movement ---- */
@media (prefers-reduced-motion:reduce){
  .bua-boot *,.bua-wait *,.bua-lock *,.bua-lock-mark{animation:none!important}
  .bua-boot .bua-pulse{opacity:0!important}
  .bua-boot .bua-speaker,.bua-boot .bua-lockword,.bua-boot .bua-status,.bua-boot .bua-gauge,.bua-boot .bua-w1,.bua-boot .bua-w2,.bua-boot .bua-w3{opacity:1!important}
  .bua-boot .bua-dot1{opacity:.62!important} .bua-boot .bua-dot2{opacity:.34!important}
  .bua-boot--ring .bua-gap1,.bua-boot--ring .bua-gap2,.bua-boot--seated .bua-seat1,.bua-boot--seated .bua-seat2{opacity:1!important}
  .bua-boot--brand .bua-speaker{opacity:1!important;transform:translate(-1px,-14px) scale(.767)}
  .bua-boot--brand .bua-dot1{opacity:1!important;transform:translate(30.4px,-22.7px) scale(1.022)}
  .bua-boot--brand .bua-dot2{opacity:1!important;transform:translate(39px,-15.6px) scale(1.353)}
  .bua-boot .bua-gauge-fill{transform:scaleX(.5)}
  .bua-lock.is-unlocking{transition:none}
}

/* Hold the complete frame throughout the exit fade, including at loop boundaries. */
.bua-finished *{animation:none!important}
.bua-finished .bua-ring{transform:none}
.bua-finished .bua-speaker,.bua-finished .bua-lockword,.bua-finished .bua-status,.bua-finished .bua-gauge,.bua-finished .bua-w1,.bua-finished .bua-w2,.bua-finished .bua-w3{opacity:1;transform:none}
.bua-finished .bua-dot1{opacity:.62;transform:none}
.bua-finished .bua-dot2{opacity:.34;transform:none}
.bua-finished .bua-gauge-fill{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .bua-boot--out .bua-speaker,.bua-boot--out .bua-dot1,.bua-boot--out .bua-dot2,.bua-boot--out .bua-lockword,.bua-boot--out .bua-status,.bua-boot--out .bua-gauge{opacity:0!important}
  .bua-lock-mark:active{transform:none}
}

@font-face{font-family:Archivo;src:url('/branding/fonts/archivo-variable-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url('/branding/fonts/ibm-plex-mono-regular-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

dialog.bua-lock{margin:0;border:0;padding:0;width:100vw;height:100dvh;max-width:none;max-height:none;color:inherit}
dialog.bua-lock::backdrop{background:var(--bua-ground)}

/* Conceal synchronously before modal construction and across bfcache restores. */
html[data-bua-private="true"] body > :not(.bua-lock):not(.bua-boot){visibility:hidden!important}
html[data-bua-private="true"] body{background:var(--bua-ground)}

.bua-retry{min-height:44px;min-width:100px;border:1px solid var(--bua-action);border-radius:8px;background:transparent;color:var(--bua-word)}
.bua-retry:focus-visible{outline:2px solid var(--bua-action);outline-offset:4px}