/* talkyo loading gate — full-bleed bg + progress below center */
#loadingGate.gate{
  padding:0;
  background:#020713;
  overflow:hidden;
}

#loadingGate .loader-shell{
  position:relative;
  width:100%;
  height:100%;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  overflow:hidden;
}

#loadingGate .loader-bg{
  position:absolute;
  inset:0;
  z-index:0;
  margin:0;
  display:block;
  pointer-events:none;
}

#loadingGate .loader-bg-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  /* keep sharp when scaled up on retina */
  image-rendering:auto;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  transform:translateZ(0);
}

#loadingGate .loader-bg::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 0%, rgba(2,7,19,.12) 55%, rgba(2,7,19,.42) 100%),
    linear-gradient(180deg, rgba(2,7,19,.18) 0%, transparent 28%, transparent 58%, rgba(2,7,19,.4) 100%);
  pointer-events:none;
}

#loadingGate .loader-stage{
  position:relative;
  z-index:1;
  width:min(700px, 90vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  /* slightly below vertical center */
  transform:translateY(12vh);
  margin-top:0;
}

#loadingGate .progress-panel{
  width:100%;
  padding:clamp(14px, 2.2vw, 18px) clamp(14px, 2.4vw, 20px) clamp(16px, 2.4vw, 20px);
  border:1px solid rgba(76,126,231,.28);
  border-radius:20px;
  background:
    linear-gradient(180deg, rgba(10,22,42,.62), rgba(4,10,20,.72)),
    rgba(255,255,255,.02);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 70px rgba(0,0,0,.35);
}

#loadingGate .progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  gap:16px;
  direction:rtl;
}

#loadingGate .progress-label{
  font-size:clamp(12px, 2.8vw, 13.5px);
  color:#a7b2c6;
  line-height:1.45;
  text-wrap:balance;
  min-width:0;
}

#loadingGate .progress-percent{
  direction:ltr;
  flex:0 0 auto;
  font-size:clamp(13px, 3vw, 15px);
  font-weight:600;
  color:#effbff;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 14px rgba(91,203,255,.28);
}

#loadingGate .progress-track{
  position:relative;
  height:10px;
  width:100%;
  overflow:hidden;
  border-radius:999px;
  background:rgba(105,125,157,.18);
  border:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.35),
    0 0 0 1px rgba(5,13,26,.5);
  direction:ltr;
}

#loadingGate .progress-fill{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#45e3ff 0%,#4f88ff 44%,#8d6cff 73%,#df6fff 100%);
  box-shadow:
    0 0 12px rgba(66,211,255,.7),
    0 0 26px rgba(105,96,255,.34);
  transition:width .35s ease-out;
  overflow:hidden;
}

#loadingGate .progress-fill::after{
  content:"";
  position:absolute;
  top:-4px;
  bottom:-4px;
  width:90px;
  right:-45px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
  filter:blur(3px);
  animation:loadingSpark 1.05s linear infinite;
}

@keyframes loadingSpark{
  from{transform:translateX(-120px)}
  to{transform:translateX(120px)}
}

@media (max-width:900px){
  #loadingGate .loader-stage{transform:translateY(14vh)}
  #loadingGate .loader-bg-img{object-position:center 42%}
}

@media (max-width:640px){
  #loadingGate .loader-stage{
    width:min(94vw, 420px);
    transform:translateY(16vh);
  }
  #loadingGate .progress-panel{
    border-radius:16px;
    padding:14px 14px 16px;
  }
  #loadingGate .progress-head{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-bottom:10px;
  }
  #loadingGate .progress-percent{
    align-self:flex-end;
  }
  #loadingGate .loader-bg-img{object-position:center 38%}
}

@media (max-height:700px){
  #loadingGate .loader-stage{transform:translateY(10vh)}
}

@media (max-height:560px){
  #loadingGate .loader-stage{transform:translateY(6vh)}
  #loadingGate .progress-panel{padding:12px}
  #loadingGate .progress-track{height:8px}
}

@media (orientation:portrait) and (max-width:520px){
  #loadingGate .loader-bg-img{object-position:center 34%}
  #loadingGate .loader-stage{transform:translateY(18vh)}
}

@media (prefers-reduced-motion:reduce){
  #loadingGate .progress-fill{transition:none}
  #loadingGate .progress-fill::after{animation:none}
}