@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&family=Noto+Serif+HK:wght@200..900&family=Noto+Sans+Mono:wght@100..900&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

body[hidden]{
	display:block !important;
}
body[hidden]:before,body[hidden]:after{
	filter:blur(0);
	opacity:1;
}
body[hidden]>*{
	visibility:hidden;
}

body:before,body:after{
	content:'';
	position:fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	z-index:999;
	
	filter:blur(2rem);
	opacity:0;
	pointer-events:none;
	transition:filter .3s ease-out,opacity .3s ease-out;

	display:flex;
	place-content:center;	
}
body:before{
	background:linear-gradient(to left,white 10%,#F9F9F9 20%,white 30%);
	background-size:200%;
	animation:BODY_LOADING 1s infinite linear;

	content: attr(data-title);

	place-items: end;
	padding: 2rem;

	text-align: center;
	word-break: break-word;

	color: gray;
}

@keyframes BODY_LOADING{
	0%{background-position-x:-100%;}
	100%{background-position-x:100%;}
}

body[FIRST_RUN]:before{
	transition-delay:.3s;
}
body[FIRST_RUN]:after{
	background-image:url('/asset/img/NPP.png?_RAW');
	background-repeat:no-repeat;
	background-position:center;
	background-size:3rem;
	animation:HEARTBEAT 2s infinite ease;

	place-items:center;
	padding-block-start:5rem;
	content:'applying update';
	font-size:small;
}
body[hidden]:not([FIRST_RUN]):after{
	font-family:'Material Symbols Outlined';
	font-size:x-large;
	
	place-items:center;
	content:'progress_activity';
	animation:SPIN 1s infinite linear;

}

[SPIN]{
	animation:SPIN 1s infinite linear;
}

@keyframes LOADING{
	0%{background-position-x:100%;}
	100%{background-position-x:-100%;}
}
@keyframes HEARTBEAT{
	40%{transform:scale(1);}
	50%{transform:scale(1.01);}
	60%{transform:scale(1);}
}
@keyframes SPIN{
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}