body.reiketsu-page-loader-active #page.site{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:none;
}
body.reiketsu-page-loader-active .site-footer{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:none;
}
body:not(.reiketsu-page-loader-active) #page.site{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity 0.72s ease 0.1s, visibility 0s linear 0.1s;
}
body:not(.reiketsu-page-loader-active) .site-footer{
opacity:1;
visibility:visible;
pointer-events:auto;
transition:opacity 0.72s ease 0.1s, visibility 0s linear 0.1s;
}
body.reiketsu-page-loader-active{
overflow:hidden;
}
@keyframes reiketsu-rainbow-flow{
0%{background-position:0% 50%;}
100%{background-position:200% 50%;}
}
.reiketsu-page-loader__top-bar{
position:fixed;
top:0;
left:0;
right:0;
z-index:100001;
height:3px;
overflow:hidden;
background:rgba(0, 0, 0, 0.06);
pointer-events:none;
box-sizing:border-box;
}
.reiketsu-page-loader__top-bar-fill{
height:100%;
width:var(--reiketsu-load-pct, 0%);
max-width:100%;
box-sizing:border-box;
background-image:linear-gradient(
90deg,
#5f00ff 0%,
#ff0096 33.333%,
#0374ff 66.666%,
#5f00ff 100%
);
background-size:200% 100%;
background-repeat:repeat;
animation:reiketsu-rainbow-flow 2s linear infinite;
transition:width 0.12s ease-out;
}
.reiketsu-page-loader{
--reiketsu-load-pct:0%;
position:fixed;
inset:0;
z-index:100000;
background:#fff;
box-sizing:border-box;
overflow:hidden;
opacity:1;
transition:opacity 0.32s ease;
display:flex;
align-items:center;
justify-content:center;
}
.reiketsu-page-loader[hidden]{
display:none!important;
visibility:hidden!important;
opacity:0!important;
pointer-events:none!important;
}
.reiketsu-page-loader__inner{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
padding:1rem;
box-sizing:border-box;
}
.reiketsu-page-loader__logo-slot{
display:flex;
flex-direction:column;
align-items:center;
position:relative;
box-sizing:border-box;
}
.reiketsu-page-loader__logo{
box-sizing:border-box;
width:100px;
aspect-ratio:256.1 / 256;
position:relative;
overflow:visible;
}
.reiketsu-page-loader__fill{
position:absolute;
inset:0;
z-index:1;
background-image:linear-gradient(
90deg,
#5f00ff 0%,
#ff0096 33.333%,
#0374ff 66.666%,
#5f00ff 100%
);
background-size:200% 100%;
background-repeat:repeat;
animation:reiketsu-rainbow-flow 2s linear infinite;
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
}
.reiketsu-page-loader__pct{
display:block;
z-index:4;
margin:0.45rem 0 0;
padding:0;
font-variant-numeric:tabular-nums;
font-size:clamp(0.75rem, 2.4vw, 1rem);
font-weight:700;
color:#5f00ff;
line-height:1;
text-align:center;
pointer-events:none;
}
.reiketsu-page-loader--exit{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity 0.32s ease, visibility 0s linear 0.32s;
}
body.reiketsu-page-loader-active.reiketsu-page-loader-exiting #page.site{
opacity:0;
visibility:hidden;
}
body.reiketsu-page-loader-active.reiketsu-page-loader-exiting .site-footer{
opacity:0;
visibility:hidden;
}
@media (prefers-reduced-motion:reduce){
body:not(.reiketsu-page-loader-active) #page.site{
transition-duration:0.01ms;
}
body:not(.reiketsu-page-loader-active) .site-footer{
transition-duration:0.01ms;
}
.reiketsu-page-loader--exit{
transition-duration:0.01ms;
}
.reiketsu-page-loader__top-bar-fill,
.reiketsu-page-loader__fill{
animation:none;
background-image:none;
background-color:#5f00ff;
}
}