#loading-screen {
position: fixed;
inset: 0;
background: none;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}

.loading-content {
text-align: center;
animation: fadeIn 0.5s ease-in;
padding:20px;
background: #fff;
border: 1px solid #000;
border-radius: 8px;
width:340px;
}

.logo-fill {
position: relative;
width: 160px;
margin: 0 auto 20px auto;
}

.logo-fill img {
width: 100%;
display: block;
}

.logo-base {
filter: grayscale(100%);
position: relative;
z-index: 1;
}

.logo-color {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 2;
clip-path: inset(100% 0 0 0);
animation: sweep 2s linear infinite;
}

@keyframes sweep {
0%   { clip-path: inset(100% 0 0 0); }
25%  { clip-path: inset(calc(100% - 50px) 0 0 0); }
75%  { clip-path: inset(0 0 calc(100% - 50px) 0); }
100% { clip-path: inset(0 0 100% 0); }
}

#loading-text {
font-size: 24px;
color: #222;
margin-top: 20px;
padding:6px;
background:#fff;
}

#loading-text div {
font-size: 14px;
font-weight:bold;
color: #222;
padding:6px;
}

#loading-text.loading-status {
  text-align: left;
  font-size: 20px;
  line-height: 1.6;
  display: inline-block;
}

#loading-text .line {
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.4s ease, opacity 0.4s ease;
}

#loading-text .text {
  flex: 1;
}

@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}

#loading-screen.fade-out {
opacity: 0;
transition: opacity 0.5s ease-out;
pointer-events: none;
}