/* Boot loading screen — fixed overlay shown while index.html and its assets load. */
#mLoader{
  position:fixed;
  inset:0;
  z-index:9999;
  margin:0;
  padding:0;
  background:linear-gradient(120deg,#ffffff 0%,#f4f5f8 20%,#e6eaf0 50%,#f4f5f8 80%,#ffffff 100%);
  background-size:200% 200%;
  animation:mLoaderGlossPan 6s ease-in-out infinite alternate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  height:100vh;
  font-family:'Plus Jakarta Sans', sans-serif;
  overflow:hidden;
  user-select:none;
  color:#334155;
}

body.m-loading{overflow:hidden;}

@keyframes mLoaderGlossPan{
  0%{background-position:0% 50%;}
  100%{background-position:100% 50%;}
}

.app-loader-wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  z-index:5;
}

.logo-lockup{
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
}

.icon-container{
  position:relative;
  width:72px;
  height:72px;
  display:flex;
  justify-content:center;
  align-items:center;
  transition:transform 0.8s cubic-bezier(0.55,0.055,0.675,0.19), opacity 0.6s ease;
}

.pulse-ring{
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background-color:#6fb1e2;
  opacity:0;
  transform:scale(0.8);
}

.pulse-ring.active{
  animation:mLoaderPulse 3.5s cubic-bezier(0.25,1,0.5,1) infinite;
}

@keyframes mLoaderPulse{
  0%{transform:scale(1); opacity:0.35;}
  50%{transform:scale(1.4); opacity:0;}
  100%{transform:scale(1.4); opacity:0;}
}

.logo-icon{
  width:100%;
  height:100%;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 8px 16px rgba(100,116,139,0.15));
  transform:scale(0);
  opacity:0;
  transition:transform 1.1s cubic-bezier(0.34,1.56,0.64,1), opacity 0.8s ease;
}

.logo-icon.reveal{
  transform:scale(1);
  opacity:1;
}

.logo-circle{fill:#6fb1e2;}

.logo-map-path{
  fill:none;
  stroke:#ffffff;
  stroke-width:5.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset 1.7s cubic-bezier(0.65,0,0.35,1);
}

.logo-map-path.draw{stroke-dashoffset:0;}

.wordmark-mask{
  overflow:hidden;
  height:70px;
  display:flex;
  align-items:center;
  margin-top:-20px;
}

.wordmark{
  font-size:66px;
  font-weight:500;
  color:#6fb1e2;
  letter-spacing:-2.5px;
  transform:translateY(100%);
  opacity:0;
  transition:transform 1.1s cubic-bezier(0.16,1,0.3,1),
             opacity 1.1s ease,
             letter-spacing 0.8s cubic-bezier(0.55,0.055,0.675,0.19);
}

.wordmark.reveal{
  transform:translateY(0);
  opacity:1;
}

.shimmer{
  position:absolute;
  top:0;
  left:-150%;
  width:50%;
  height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  transform:skewX(-20deg);
  z-index:3;
  pointer-events:none;
}

.shimmer.active{
  animation:mLoaderShimmerSweep 2.1s ease-in-out forwards;
}

@keyframes mLoaderShimmerSweep{
  0%{left:-150%;}
  100%{left:200%;}
}

.system-status{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:240px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

.system-status.reveal{
  opacity:1;
  transform:translateY(0);
}

.status-text-container{
  height:18px;
  overflow:hidden;
  margin-bottom:14px;
  position:relative;
  width:100%;
  text-align:center;
}

.status-text{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  font-weight:600;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:0.5px;
  position:absolute;
  width:100%;
  top:0;
  left:0;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
}

.status-text.hidden-up{
  transform:translateY(-100%);
  opacity:0;
}

.status-text.hidden-down{
  transform:translateY(100%);
  opacity:0;
}

.status-text.active{
  transform:translateY(0);
  opacity:1;
}

.status-text.success{color:#6fb1e2;}

.progress-track{
  width:100%;
  height:3px;
  background-color:#e2e8f0;
  border-radius:4px;
  overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(148,163,184,0.15);
  transition:transform 0.5s ease, opacity 0.5s ease;
}

.progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #6fb1e2, #3b82f6);
  border-radius:4px;
  transition:width 5.4s cubic-bezier(0.25,1,0.35,1);
}

.shockwave{
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  background:transparent;
  border:4px solid #6fb1e2;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  z-index:1;
  pointer-events:none;
}

.shockwave.fire{
  animation:mLoaderBurstRing 0.8s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes mLoaderBurstRing{
  0%{transform:translate(-50%,-50%) scale(0); opacity:1; border-width:8px;}
  100%{transform:translate(-50%,-50%) scale(40); opacity:0; border-width:1px;}
}

.white-flash{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  background-color:#ffffff;
  opacity:0;
  z-index:10;
  pointer-events:none;
  transition:opacity 0.5s ease-in;
}

.white-flash.active{opacity:1;}

.app-loader-wrapper.ready .icon-container{
  transform:scale(15) rotate(10deg);
  opacity:0;
}

.app-loader-wrapper.ready .wordmark{
  letter-spacing:20px;
  opacity:0;
  transform:translateX(40px);
}

.app-loader-wrapper.ready .progress-track{
  transform:scaleX(0);
  opacity:0;
}

.app-loader-wrapper.ready .status-text-container{
  opacity:0;
  transform:translateY(20px);
  transition:all 0.5s ease;
}

.logo-icon.loading-spin{
  animation:mLoaderSpin 2s ease-in-out infinite;
}

@keyframes mLoaderSpin{
  0%{transform:rotate(0deg) scale(1); opacity:1;}
  50%{transform:rotate(180deg) scale(0.92); opacity:0.2;}
  100%{transform:rotate(360deg) scale(1); opacity:1;}
}

.loading-dots{
  display:inline-block;
  width:2.2ch;
  text-align:left;
}