/* Launch screen: only the logo, dead-centre, on the logo's own background. Three dots light up red one by one, then the app opens. */
html body{background:#0a0a0b;background-image:none}
#cp-boot,.auth.center:has(>p.muted){position:fixed;inset:0;z-index:9999;max-width:none;margin:0;padding:0;display:block;background:#0e0d0c;overflow:hidden;transition:opacity .6s ease}
#cp-boot.out{opacity:0;pointer-events:none}
#cp-boot>img,.auth.center:has(>p.muted)>img.logo{position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-110px 0 0 -110px;border-radius:0;-webkit-mask-image:radial-gradient(closest-side,#000 94%,transparent 100%);mask-image:radial-gradient(closest-side,#000 94%,transparent 100%);animation:cpLogo .9s ease-out both}
/* the dots: p = middle dot, ::before = left dot, ::after = right dot */
#cp-boot>p,.auth.center:has(>p.muted)>p.muted{position:absolute;left:50%;top:calc(50% + 152px);width:10px;height:10px;margin:0 0 0 -5px;border-radius:50%;background:#2a2a2d;font-size:0;color:transparent;line-height:0}
#cp-boot>p::before,#cp-boot>p::after,.auth.center:has(>p.muted)>p.muted::before,.auth.center:has(>p.muted)>p.muted::after{content:'';position:absolute;top:0;width:10px;height:10px;border-radius:50%;background:#2a2a2d}
#cp-boot>p::before,.auth.center:has(>p.muted)>p.muted::before{left:-26px}
#cp-boot>p::after,.auth.center:has(>p.muted)>p.muted::after{left:26px}
/* launch overlay: dots light one after another and stay red */
#cp-boot>p::before{animation:cpLit .4s ease-out .6s forwards}
#cp-boot>p{animation:cpLit .4s ease-out 1.2s forwards}
#cp-boot>p::after{animation:cpLit .4s ease-out 1.8s forwards}
/* if the app is still loading after the overlay, the same screen continues with all three dots already red */
.auth.center:has(>p.muted)>p.muted,.auth.center:has(>p.muted)>p.muted::before,.auth.center:has(>p.muted)>p.muted::after{background:#ff1f33;box-shadow:0 0 14px rgba(255,31,51,.8)}
@keyframes cpLit{0%{background:#2a2a2d;box-shadow:0 0 0 rgba(255,31,51,0);transform:scale(1)}55%{transform:scale(1.4)}100%{background:#ff1f33;box-shadow:0 0 14px rgba(255,31,51,.8);transform:scale(1)}}
@keyframes cpLogo{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){#cp-boot>img,.auth.center:has(>p.muted)>img.logo{animation:none}#cp-boot>p,#cp-boot>p::before,#cp-boot>p::after{animation-duration:.01s}}