/* AAED — branded loading animation (guide §09 «حركة الشعار»)
   Stage 1: the grey outbound route appears.
   Stage 2: the return begins and the payload (square) enters.
   Stage 3: the route fills in and forms «ع» with the arrow.
   Stage 4: the name «عائد», then the tagline.
   Only stroke-dashoffset / opacity / transform are animated. */

.aaed-mark{display:block;overflow:visible}
.aaed-mark .m-out{stroke-dasharray:1 2;stroke-dashoffset:1.05}
.aaed-mark .m-ret{stroke-dasharray:1 2;stroke-dashoffset:1.05}
.aaed-mark .m-pay{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.55)}
.aaed-mark .m-arr{opacity:0;transform-box:fill-box;transform-origin:center}

/* Full-screen first-load overlay — one-shot, shown once per session (see js/loader.js) */
#aaed-loader{position:fixed;inset:0;z-index:1000;background:var(--petrol);display:none;align-items:center;justify-content:center;flex-direction:column;gap:var(--s-5);transition:opacity 360ms var(--ease),visibility 360ms}
html.has-loader #aaed-loader{display:flex}
#aaed-loader.is-leaving{opacity:0;visibility:hidden}
.aaed-loader__mark{width:clamp(84px,18vw,120px)}
.aaed-loader__word{font-weight:700;font-size:clamp(2.2rem,8vw,3.2rem);color:var(--cream);line-height:1;opacity:0;transform:translateY(8px);margin:0}
.aaed-loader__tag{color:var(--text-on-petrol-muted);font-size:var(--fs-lg);margin:0;opacity:0;transform:translateY(8px)}
.aaed-loader__stage{min-height:7.5rem;text-align:center;display:flex;flex-direction:column;gap:var(--s-3);align-items:center}

#aaed-loader .m-out{animation:m-out 2.4s var(--ease) forwards}
#aaed-loader .m-pay{animation:m-pay 2.4s var(--ease) forwards}
#aaed-loader .m-ret{animation:m-ret 2.4s cubic-bezier(.45,.05,.3,1) forwards}
#aaed-loader .m-arr{animation:m-arr 2.4s var(--ease) forwards}
.aaed-loader__word{animation:m-text 2.4s var(--ease) forwards}
.aaed-loader__tag{animation:m-tag 2.4s var(--ease) forwards}

/* Compact looping version for async work (search, submit…) */
.aaed-loading{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);padding:var(--s-6) var(--s-4);color:var(--text-muted);font-size:var(--fs-sm);text-align:center}
.aaed-loading .aaed-mark{width:56px}
.aaed-loading--inline{flex-direction:row;padding:0;gap:var(--s-2)} .aaed-loading--inline .aaed-mark{width:22px}
.aaed-loading .m-out{animation:m-out-loop 1.9s var(--ease) infinite}
.aaed-loading .m-pay{animation:m-pay-loop 1.9s var(--ease) infinite}
.aaed-loading .m-ret{animation:m-ret-loop 1.9s cubic-bezier(.45,.05,.3,1) infinite}
.aaed-loading .m-arr{animation:m-arr-loop 1.9s var(--ease) infinite}
.aaed-loading .m-wrap{animation:m-fade-loop 1.9s linear infinite}
.btn.is-loading .aaed-mark{width:20px}

@keyframes m-out{0%{stroke-dashoffset:1.05}22%,100%{stroke-dashoffset:0}}
@keyframes m-pay{0%,22%{opacity:0;transform:scale(.55)}32%,100%{opacity:1;transform:scale(1)}}
@keyframes m-ret{0%,32%{stroke-dashoffset:1.05}72%,100%{stroke-dashoffset:0}}
@keyframes m-arr{0%,68%{opacity:0;transform:translateX(-10px)}78%,100%{opacity:1;transform:none}}
@keyframes m-text{0%,78%{opacity:0;transform:translateY(8px)}88%,100%{opacity:1;transform:none}}
@keyframes m-tag{0%,86%{opacity:0;transform:translateY(8px)}96%,100%{opacity:1;transform:none}}
@keyframes m-out-loop{0%{stroke-dashoffset:1.05}22%,100%{stroke-dashoffset:0}}
@keyframes m-pay-loop{0%,22%{opacity:0;transform:scale(.55)}32%,100%{opacity:1;transform:scale(1)}}
@keyframes m-ret-loop{0%,32%{stroke-dashoffset:1.05}72%,100%{stroke-dashoffset:0}}
@keyframes m-arr-loop{0%,68%{opacity:0;transform:translateX(-10px)}78%,100%{opacity:1;transform:none}}
@keyframes m-fade-loop{0%,86%{opacity:1}96%,100%{opacity:0}}

/* Reduced motion: show the finished logo, no movement */
@media (prefers-reduced-motion:reduce){
  .aaed-mark .m-out,.aaed-mark .m-ret{stroke-dashoffset:0;animation:none!important}
  .aaed-mark .m-pay,.aaed-mark .m-arr{opacity:1;transform:none;animation:none!important}
  .aaed-loader__word,.aaed-loader__tag{opacity:1;transform:none;animation:none!important}
  .aaed-loading .m-wrap{animation:none!important}
  #aaed-loader{transition:none}
}

/* Failsafe: if scripts never run, the overlay still disappears */
html.has-loader #aaed-loader{animation:loader-failsafe 0s linear 8s forwards}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}