/* Śaci shared loading screen: used by the website and every app (Creator, NGO, Admin, Shop). */
#splash{--sp-fd:var(--fd,var(--site-font-two,"Fraunces",Georgia,serif));--sp-or:#FBA250}
#splash,#splash *{box-sizing:border-box}
#splash b,#splash i,#splash span{font-style:normal}
#splash .sp-lines span{font-style:italic}
/* splash */
#splash{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;overflow:hidden;background:linear-gradient(165deg,#8E3B4C 0%,#6E2B3A 50%,#2A2227 100%);transition:opacity .55s ease,transform .55s ease,filter .55s ease}
#splash.out{opacity:0;transform:scale(1.06);filter:blur(6px);pointer-events:none}
.sp-aurora{position:absolute;inset:0}
.sp-aurora::before,.sp-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(50px)}
.sp-aurora::before{width:320px;height:320px;left:-80px;top:-60px;background:rgba(251,162,80,.55);animation:aur1 7s ease-in-out infinite alternate}
.sp-aurora::after{width:300px;height:300px;right:-90px;bottom:-40px;background:rgba(105,63,103,.9);animation:aur2 8s ease-in-out infinite alternate}
@keyframes aur1{to{transform:translate(110px,150px) scale(1.25)}}
@keyframes aur2{to{transform:translate(-90px,-130px) scale(1.2)}}
.sp-dots i{position:absolute;bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;background:rgba(242,226,213,.7);animation:floatUp var(--d) linear var(--dl) infinite}
@keyframes floatUp{from{transform:translateY(0);opacity:0}15%{opacity:.8}to{transform:translateY(-105vh);opacity:0}}
.sp-stage{position:relative;width:270px;height:270px;display:grid;place-items:center;margin-bottom:4px}
.sp-ring{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px;border-radius:50%;border:1.5px solid rgba(242,226,213,.45);animation:ring 3s ease-out infinite}
.sp-ring.r2{animation-delay:1s}.sp-ring.r3{animation-delay:2s}
@keyframes ring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.sp-orbit span{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;display:grid;place-items:center;font-size:20px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .8s 1.5s backwards}
.sp-orbit span:nth-child(1){animation:orb0 9s linear infinite,fadeIn .8s 1.5s backwards}.sp-orbit span:nth-child(2){animation:orb1 9s linear infinite,fadeIn .8s 1.5s backwards}.sp-orbit span:nth-child(3){animation:orb2 9s linear infinite,fadeIn .8s 1.5s backwards}.sp-orbit span:nth-child(4){animation:orb3 9s linear infinite,fadeIn .8s 1.5s backwards}
.sp-orbit span:nth-child(1){transform:rotate(0deg) translateX(112px) rotate(-0deg)}.sp-orbit span:nth-child(2){transform:rotate(90deg) translateX(112px) rotate(-90deg)}.sp-orbit span:nth-child(3){transform:rotate(180deg) translateX(112px) rotate(-180deg)}.sp-orbit span:nth-child(4){transform:rotate(270deg) translateX(112px) rotate(-270deg)}
.sp-orbit span span{position:static;width:auto;height:auto;margin:0;background:none;border:0;animation:none;-webkit-backdrop-filter:none;backdrop-filter:none;display:grid;place-items:center}
@keyframes fadeIn{from{opacity:0}}
@keyframes orb0{from{transform:rotate(0deg) translateX(112px) rotate(-0deg)}to{transform:rotate(360deg) translateX(112px) rotate(-360deg)}}
@keyframes orb1{from{transform:rotate(90deg) translateX(112px) rotate(-90deg)}to{transform:rotate(450deg) translateX(112px) rotate(-450deg)}}
@keyframes orb2{from{transform:rotate(180deg) translateX(112px) rotate(-180deg)}to{transform:rotate(540deg) translateX(112px) rotate(-540deg)}}
@keyframes orb3{from{transform:rotate(270deg) translateX(112px) rotate(-270deg)}to{transform:rotate(630deg) translateX(112px) rotate(-630deg)}}
.sp-mark{position:relative;z-index:2;overflow:hidden;width:98px;height:98px;border-radius:31px;background:linear-gradient(135deg,#F2E2D5,#fff);color:#9B4454;display:grid;place-items:center;font:700 56px var(--sp-fd);box-shadow:0 18px 50px rgba(0,0,0,.35);animation:spIn 1s cubic-bezier(.3,1.5,.5,1) backwards}
.sp-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.95) 50%,transparent 65%);transform:translateX(-130%);animation:shine 2.6s 1.3s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(130%)}}
@keyframes spIn{from{opacity:0;transform:scale(.3) rotate(-18deg)}}
.sp-name{display:flex;font:700 42px var(--sp-fd);margin-top:-6px}
.sp-name span{display:inline-block;animation:letter .8s cubic-bezier(.2,.9,.3,1.4) calc(.8s + var(--i)*.13s) backwards}
@keyframes letter{from{opacity:0;transform:translateY(26px) rotate(8deg) scale(.6);filter:blur(6px)}}
.sp-tag{margin-top:10px;display:flex;flex-wrap:wrap;gap:0 .55em;justify-content:center;padding:0 28px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#F2E2D5}
.sp-tag span{animation:rise .6s calc(1.7s + var(--i)*.22s) backwards}
.sp-status{position:absolute;bottom:96px;height:18px;font-size:12px;color:rgba(242,226,213,.85)}
.sp-status span{display:block;animation:swap .5s ease backwards}
@keyframes swap{from{opacity:0;transform:translateY(8px)}}
.sp-bar{position:absolute;bottom:74px;width:150px;height:4px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden}
.sp-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--sp-or),#FFD29A);transform-origin:left;transform:scaleX(0)}
.sp-pct{position:absolute;bottom:52px;font:700 12px/1 var(--sp-fd);letter-spacing:.08em;color:rgba(242,226,213,.85);font-variant-numeric:tabular-nums}
@keyframes load{from{transform:scaleX(0)}}
.sp-strip{position:absolute;left:0;right:0;bottom:0;height:46px;opacity:.38;background-repeat:repeat-x;background-size:auto 100%;animation:strip 7s linear infinite,rise 1s 2.4s backwards}
/* splash: profile + product imagery, taglines one by one */
.sp-orbit span{width:48px;height:48px;margin:-24px;border-radius:50%;border:2.5px solid rgba(255,255,255,.78);background:#F2E2D5;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.32);-webkit-backdrop-filter:none;backdrop-filter:none;display:block}
.sp-orbit span.pr{border-radius:15px}
.sp-orbit img{display:block;width:100%;height:100%;object-fit:cover}
.sp-stage{margin-bottom:26px}
.sp-name{margin-top:0}
.sp-lines{margin-top:16px;min-height:104px;display:flex;flex-direction:column;align-items:center;gap:3px}
.sp-lines span{font:italic 600 23px/1.25 var(--sp-fd);color:rgba(242,226,213,.55);opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1),filter .7s ease,color .7s ease}
.sp-lines span.on{opacity:1;transform:none;filter:none}
.sp-lines span.cur{color:#fff}
.sp-lines span.cur:last-child{color:var(--sp-or)}
/* splash mark: glyph is optically centred by JS (ink bounds), box + rings share one centre */
.sp-orbit{position:absolute;left:50%;top:50%;width:0;height:0}   /* was an empty in-flow grid item: pushed the mark below the ring centre */
.sp-stage{display:block}
.sp-mark{position:absolute;left:50%;top:50%;margin:-49px 0 0 -49px}
.sp-mark .g{display:block;font:inherit;line-height:1;text-align:center;transform:translate(var(--gx,0px),var(--gy,0px))}
/* sizing outside the phone frame: a little more air on large screens */
#splash .sp-label{position:absolute;top:22px;left:0;right:0;text-align:center;font:700 10.5px/1 var(--sp-fd);letter-spacing:.22em;text-transform:uppercase;color:rgba(242,226,213,.7)}
@media (min-width:700px){#splash:not(.in-phone) .sp-stage{transform:scale(1.15)}#splash:not(.in-phone) .sp-name{font-size:48px}#splash:not(.in-phone) .sp-lines span{font-size:26px}}
@media (prefers-reduced-motion:reduce){#splash *,#splash *::before,#splash *::after{animation:none!important}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes strip{to{background-position-x:-420px}}
html.sp-lock,html.sp-lock body{overflow:hidden}