/* ==========================================================================
   LoadingScreen — full-screen preloader in the brand's beige levels
   Shown by assets/js/loader.js. Tokens first so the colours are one place.
   ========================================================================== */
:root{
  --ld-bg-a:#FBF7F1; --ld-bg-b:#EFE2D0;              /* sand 50 → sand 300 */
  --ld-ink:#171310; --ld-muted:#7A5A3C;              /* ink, cocoa text    */
  --ld-track:rgba(154,113,71,.18); --ld-fill:#9A7147; /* kraft              */
  --ld-shine:rgba(255,255,255,.55);
}
#ms-loader{ position:fixed; inset:0; z-index:2147483000; display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 40%, var(--ld-bg-a) 0%, var(--ld-bg-b) 100%);
  opacity:1; transition:opacity .55s ease; will-change:opacity; }
#ms-loader.is-out{ opacity:0; pointer-events:none; }
#ms-loader.is-deferred{ opacity:0; pointer-events:none; }       /* later pages: only appears if the page is slow */
#ms-loader.is-deferred.is-shown{ opacity:1; pointer-events:auto; }
.ms-ld{ width:min(78vw,380px); display:grid; gap:22px; justify-items:center; text-align:center; }
.ms-ld-logo{ width:min(52vw,230px); height:auto; display:block; opacity:0; transform:scale(.96);
  animation:ms-ld-in .9s cubic-bezier(.2,.7,.2,1) .05s forwards; }
.ms-ld-bar{ position:relative; width:100%; height:2px; background:var(--ld-track); border-radius:2px; overflow:hidden; }
.ms-ld-fill{ position:absolute; inset:0; width:100%; background:var(--ld-fill); transform-origin:0 50%; transform:scaleX(0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1); }
html[dir="rtl"] .ms-ld-fill{ transform-origin:100% 50%; }
.ms-ld-fill::after{ content:""; position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg, transparent, var(--ld-shine), transparent);
  animation:ms-ld-shimmer 1.6s ease-in-out infinite; }
.ms-ld-meta{ width:100%; display:flex; justify-content:space-between; align-items:baseline;
  font-family:"Cairo","Instrument Sans",system-ui,sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--ld-muted); }
.ms-ld-meta b{ font-weight:700; letter-spacing:.04em; font-size:13px; color:var(--ld-ink); font-variant-numeric:tabular-nums; }
@keyframes ms-ld-in{ to{ opacity:1; transform:scale(1); } }
@keyframes ms-ld-shimmer{ 0%{ transform:translateX(-120%); } 100%{ transform:translateX(320%); } }
/* fail-safe: even with no JavaScript the overlay lets go of the page after 6 s */
#ms-loader{ animation:ms-ld-failsafe 6.5s linear forwards; }
@keyframes ms-ld-failsafe{ 0%,92%{ visibility:visible; } 100%{ visibility:hidden; opacity:0; pointer-events:none; } }
#ms-loader.is-done{ animation:none; }
@media (prefers-reduced-motion: reduce){
  .ms-ld-logo{ animation:none; opacity:1; transform:none; }
  .ms-ld-fill::after{ display:none; }
  .ms-ld-fill{ transition:none; }
  #ms-loader{ transition:opacity .3s ease; }
}
@media (max-width:480px){ .ms-ld{ width:min(70vw,300px); gap:18px; } }