@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
/* Narvin app layer (loaded only when the app is switched on): welcome screen + page transitions in the installed app */
.spl{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:26px;padding:24px;overflow:hidden;
  background:radial-gradient(60% 45% at 50% 38%,color-mix(in srgb,var(--mint,#62C1CF) 22%,#fff) 0%,#fff 62%),#fff}
.spl::before,.spl::after{content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none}
.spl::before{background:color-mix(in srgb,var(--mint,#62C1CF) 60%,transparent);top:-40vmax;right:-30vmax;animation:sblob 6s ease-in-out infinite alternate}
.spl::after{background:color-mix(in srgb,var(--gold,#C6A15B) 30%,transparent);bottom:-45vmax;left:-35vmax;animation:sblob 7s ease-in-out infinite alternate-reverse}
.spl-stage{position:relative;width:min(74vw,330px);aspect-ratio:1045/998}
.spl-l{position:absolute;display:block;max-width:none;opacity:0;will-change:transform,opacity}
.spl-orbit{position:absolute;width:104%;aspect-ratio:2.6;border-radius:50%;translate:-50% -50%;border:3px solid transparent;opacity:0;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0 12%,var(--mint,#62C1CF) 30%,var(--brand,#018DA4) 52%,transparent 70%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0)}
.spl-orbit.o2{width:120%;aspect-ratio:3;border-width:2px;filter:blur(.3px)}
.spl.go .spl-orbit.o1{animation:sorb 1.5s cubic-bezier(.2,.8,.2,1) .05s both,sspin 2.4s linear .05s infinite}
.spl.go .spl-orbit.o2{animation:sorb2 1.6s cubic-bezier(.2,.8,.2,1) .2s both,sspin 3.2s linear .2s infinite reverse}
.spl.go .mark{animation:smark .95s cubic-bezier(.18,1.25,.4,1) .15s both}
.spl.go .t1{animation:sright .7s cubic-bezier(.2,.9,.25,1) .7s both}
.spl.go .t2{animation:sleft .75s cubic-bezier(.2,.9,.25,1) .85s both}
.spl.go .la{transform-origin:left center;animation:sline .6s cubic-bezier(.3,.8,.3,1) 1.05s both}
.spl.go .lb{transform-origin:right center;animation:sline .6s cubic-bezier(.3,.8,.3,1) 1.05s both}
.spl-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);mix-blend-mode:soft-light;transform:translateX(-120%)}
.spl.go .spl-shine{animation:sshine 1s ease-in-out 1.45s both}
.spl-txt{position:relative;display:grid;gap:6px;text-align:center;font-family:var(--hfont,inherit),Vazirmatn,sans-serif}
.spl-txt b{font-size:clamp(19px,5.2vw,24px);font-weight:900;color:var(--deep,#062C34)}
.spl-txt small{font-size:13.5px;color:color-mix(in srgb,var(--deep,#062C34) 62%,#fff);font-weight:600}
.spl-txt>*{opacity:0}
.spl.go .spl-txt b{animation:sup .6s cubic-bezier(.2,.8,.2,1) 1.25s both}
.spl.go .spl-txt small{animation:sup .6s cubic-bezier(.2,.8,.2,1) 1.4s both}
.spl-bar{position:relative;width:120px;height:4px;border-radius:9px;background:color-mix(in srgb,var(--brand,#018DA4) 14%,transparent);overflow:hidden}
.spl-bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--mint,#62C1CF),var(--brand,#018DA4));transform-origin:right;transform:scaleX(0)}
.spl.go .spl-bar i{animation:sbar 2.2s cubic-bezier(.4,0,.2,1) .1s both}
.spl.out{animation:sout .5s cubic-bezier(.4,0,.2,1) both;pointer-events:none}
html.spl-on body{overflow:hidden}
@keyframes smark{0%{opacity:0;transform:translateY(-34%) scale(.55) rotate(-14deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes sright{from{opacity:0;transform:translateX(70%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sleft{from{opacity:0;transform:translateX(-70%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes sline{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:none}}
@keyframes sorb{0%{opacity:0;scale:.2;rotate:-80deg}60%{opacity:.95}100%{opacity:.55;scale:1;rotate:-12deg}}
@keyframes sorb2{0%{opacity:0;scale:1.8;rotate:60deg}100%{opacity:.3;scale:1;rotate:8deg}}
@keyframes sspin{to{--a:360deg}}
@keyframes sshine{to{transform:translateX(120%)}}
@keyframes sup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sbar{to{transform:scaleX(1)}}
@keyframes sout{to{opacity:0;transform:scale(1.06);filter:blur(4px)}}
@keyframes sblob{to{transform:translate(4vmax,3vmax) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.spl *,.spl{animation-duration:.01s!important;animation-delay:0s!important}}

/* page transitions inside the installed app (Chrome's cross-page view transitions); RTL: forward slides in from the left */
@media (display-mode: standalone){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,.2,1) both}
  ::view-transition-new(root){animation:vt-in .36s cubic-bezier(.2,.8,.2,1) both}
  html.vt-back::view-transition-old(root){animation-name:vt-out-b}
  html.vt-back::view-transition-new(root){animation-name:vt-in-b}
  .hdr{view-transition-name:nv-hdr}.tabbar{view-transition-name:nv-tabs}.pn-top{view-transition-name:nv-ptop}.pn-tabs{view-transition-name:nv-ptabs}
  ::view-transition-group(nv-hdr),::view-transition-group(nv-tabs),::view-transition-group(nv-ptop),::view-transition-group(nv-ptabs){animation-duration:0s}
  ::view-transition-old(nv-hdr),::view-transition-old(nv-tabs),::view-transition-old(nv-ptop),::view-transition-old(nv-ptabs){display:none}
  ::view-transition-new(nv-hdr),::view-transition-new(nv-tabs),::view-transition-new(nv-ptop),::view-transition-new(nv-ptabs){animation:none}
}
@keyframes vt-in{from{opacity:0;transform:translateX(-14%) scale(.985)}}
@keyframes vt-out{to{opacity:0;transform:translateX(9%) scale(.985)}}
@keyframes vt-in-b{from{opacity:0;transform:translateX(14%) scale(.985)}}
@keyframes vt-out-b{to{opacity:0;transform:translateX(-9%) scale(.985)}}