/* Memphis Smart Loader – full-screen submit overlay for Com2025 inquiry forms.
   Uses the site tokens from campaign-page.css (--navy, --orange, --muted, --line, --success,
   --danger, --font, --r-btn, --r-panel) and falls back to the same values on pages that
   don't load that file. Everything is scoped under .msl so nothing leaks into the page. */
.msl{
  --msl-navy:var(--navy,#0a2b4b);
  --msl-orange:var(--orange,#f5a31b);
  --msl-orange-hover:var(--orange-hover,#e8940c);
  --msl-orange-ink:var(--orange-ink,#9a5a00);
  --msl-orange-tint:var(--orange-tint,#fdedd1);
  --msl-muted:var(--muted,#696985);
  --msl-line:var(--line,#e0e0e8);
  --msl-ok:var(--success,#1e7a46);
  --msl-err:var(--danger,#b3252b);
  --msl-font:var(--font,"Nunito",Arial,sans-serif);
  --msl-r-btn:var(--r-btn,16px);
  --msl-r-card:var(--r-panel,24px);
  --msl-sand:#fff8ec;
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(120% 90% at 50% 0%,#17517f 0%,var(--msl-navy) 55%,#06192e 100%);
  overflow:hidden;font-family:var(--msl-font);color:var(--msl-navy);text-align:left;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
.msl *,.msl *::before,.msl *::after{box-sizing:border-box}
.msl.on{display:flex;animation:msl-fade .35s ease both}
@keyframes msl-fade{from{opacity:0}to{opacity:1}}
html.msl-lock,html.msl-lock body{overflow:hidden!important}

/* ambient layers */
.msl-stars,.msl-stars::after{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff9 50%,transparent 51%),radial-gradient(1px 1px at 70% 20%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 85% 55%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 40% 70%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 10% 80%,#fff6 50%,transparent 51%);animation:msl-twinkle 4s ease-in-out infinite alternate}
.msl-stars::after{content:"";transform:translate(30px,20px);animation-delay:-2s}
@keyframes msl-twinkle{to{opacity:.35}}
.msl-dunes{position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none}
.msl-dunes svg{width:100%;height:100%;display:block}
.msl-glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#f5a31b33,transparent 65%);top:-160px;right:-120px;filter:blur(10px);pointer-events:none}

/* card */
.msl-card{position:relative;width:100%;max-width:460px;background:#ffffffee;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-radius:var(--msl-r-card);padding:30px 26px 24px;box-shadow:0 30px 80px #00000066,0 0 0 1px #ffffff55 inset;
  animation:msl-rise .5s cubic-bezier(.2,.8,.2,1) both;outline:0}
@keyframes msl-rise{from{opacity:0;transform:translateY(24px) scale(.97)}}
.msl-card.shake{animation:msl-shake .45s}
@keyframes msl-shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

.msl-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--msl-orange-ink);margin-bottom:10px}
.msl-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--msl-orange);box-shadow:0 0 0 0 #f5a31b88;animation:msl-ping 1.6s infinite}
@keyframes msl-ping{70%{box-shadow:0 0 0 9px #f5a31b00}100%{box-shadow:0 0 0 0 #f5a31b00}}
.msl .msl-title{font-family:var(--msl-font);font-size:25px;line-height:1.2;font-weight:800;margin:0 0 6px;letter-spacing:-.01em;color:var(--msl-navy)}
.msl .msl-sub{font-size:15px;color:var(--msl-muted);margin:0 0 26px;min-height:23px;font-weight:600}
.msl-swap{animation:msl-swap .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes msl-swap{from{opacity:0;transform:translateY(8px)}}

/* journey route */
.msl-route{position:relative;height:84px;margin:0 6px 22px}
.msl-track{position:absolute;left:18px;right:18px;top:30px;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,#d0d5dd 0 6px,transparent 6px 12px)}
.msl-line{position:absolute;left:18px;top:30px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--msl-orange),#ffc45c);width:0;transition:width .9s cubic-bezier(.4,0,.2,1);box-shadow:0 0 14px #f5a31b88}
.msl-plane{position:absolute;top:12px;left:18px;width:40px;height:40px;margin-left:-20px;transition:left .9s cubic-bezier(.4,0,.2,1);z-index:3}
.msl-plane span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--msl-navy);color:#fff;box-shadow:0 8px 18px #0a2b4b55;animation:msl-bob 2.2s ease-in-out infinite}
.msl-plane svg{width:20px;height:20px;transform:rotate(45deg)}
@keyframes msl-bob{50%{transform:translateY(-4px)}}
.msl-node{position:absolute;top:22px;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:#fff;border:3px solid #d0d5dd;z-index:2;transition:all .4s;display:grid;place-items:center}
.msl-node.done{background:var(--msl-orange);border-color:var(--msl-orange)}
.msl-node.done::after{content:"";width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.msl-node.active{border-color:var(--msl-orange);box-shadow:0 0 0 6px #f5a31b2e}
.msl-lab{position:absolute;top:56px;transform:translateX(-50%);font-size:12px;font-weight:700;color:#9aa8ba;white-space:nowrap;transition:color .3s}
.msl-lab.on{color:var(--msl-navy)}

/* checklist */
.msl .msl-list{list-style:none;margin:0 0 4px;padding:14px 16px;background:var(--msl-sand);border-radius:16px;display:grid;gap:10px}
.msl-list li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#a9b4c3;transition:color .3s;margin:0}
.msl-list li .d{width:18px;height:18px;border-radius:50%;border:2px solid #d9dee6;flex:none;display:grid;place-items:center;font-size:10px;line-height:1;color:#fff;transition:all .3s}
.msl-list li.active,.msl-list li.done{color:var(--msl-navy)}
.msl-list li.active .d{border-color:var(--msl-orange);border-top-color:transparent;animation:msl-spin .8s linear infinite}
.msl-list li.done .d{background:var(--msl-ok);border-color:var(--msl-ok)}
.msl-list li.done .d::after{content:"\2713"}
@keyframes msl-spin{to{transform:rotate(360deg)}}

/* progress + chips */
.msl-meta{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:10px}
.msl-pct{font-size:13px;font-weight:800;color:var(--msl-navy);font-variant-numeric:tabular-nums}
.msl-chips{display:flex;gap:8px;flex-wrap:wrap}
.msl-chip{font-size:12px;font-weight:700;color:var(--msl-muted);background:#fff;border:1px solid var(--msl-line);border-radius:999px;padding:5px 10px;display:inline-flex;align-items:center;gap:5px}
.msl-chip b{color:var(--msl-ok)}

/* slow note */
.msl-note{display:none;margin-top:14px;background:#fff4dc;border-radius:12px;padding:10px 12px;font-size:13px;font-weight:700;color:#8a5a00}
.msl-note.on{display:block;animation:msl-swap .4s both}

/* error */
.msl-err{display:none;margin-top:16px;text-align:center}
.msl-err.on{display:block;animation:msl-swap .4s both}
.msl .msl-err p{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--msl-err)}
.msl-btn{display:inline-block;background:var(--msl-orange);border:0;border-radius:var(--msl-r-btn);padding:12px 26px;font:700 15px/1.2 var(--msl-font);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.msl-btn:hover{background:var(--msl-orange-hover);transform:translateY(-1px);box-shadow:0 8px 20px #f5a31b55}
.msl-btn:focus-visible,.msl-link:focus-visible{outline:3px solid var(--msl-navy);outline-offset:2px}
.msl-link{display:block;margin:10px auto 0;background:none;border:0;padding:6px 10px;font:700 14px var(--msl-font);color:var(--msl-navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.msl.err .msl-chips{visibility:hidden}
.msl.err .msl-list li.active .d{animation:none;border-color:var(--msl-err);background:var(--msl-err)}
.msl.err .msl-list li.active .d::after{content:"!";font-weight:800}
.msl.err .msl-node.active{border-color:var(--msl-err);box-shadow:0 0 0 6px #b3252b22}
.msl.err .msl-plane span,.msl.err .msl-eyebrow i{animation:none}

/* success */
.msl.ok .msl-card{animation:msl-pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes msl-pop{50%{transform:scale(1.03)}}
.msl-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.msl-burst i{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0}
.msl.ok .msl-burst i{animation:msl-conf 1.1s ease-out forwards}
@keyframes msl-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}

/* mobile: bottom sheet */
@media (max-width:520px){
  .msl{align-items:flex-end;padding:0}
  .msl-card{max-width:none;border-radius:28px 28px 0 0;padding:26px 20px calc(22px + env(safe-area-inset-bottom));animation-name:msl-sheet}
  @keyframes msl-sheet{from{transform:translateY(100%)}}
  .msl .msl-title{font-size:22px}
  .msl-lab{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  .msl,.msl *,.msl *::before,.msl *::after{animation:none!important;transition:none!important}
}
[dir="rtl"] .msl{text-align:right}
