/* ============================================================
   أي تحميل في الموقع بيبقى باللوجو (كل الصفحات، والإدارة كمان)
   - .mloader: اللوجو بيتنفّس وعليه لمعة دهب (عرض الدعوة، الشات، ...)
   - الصفحة وهي بتحمّل: شاشة باللوجو بتظهر لو التحميل طوّل (js/loader.js)
   - .is-busy على أي زرار بيستنى: لوجو صغير بلون الكلام قبل النص
   ============================================================ */
.mloader {
  position: relative; display: inline-block; flex: none;
  width: 140px; aspect-ratio: 1400 / 520;
  background: url(../assets/brand/logo-nav.webp) center / contain no-repeat;
  animation: mlBreath 1.8s ease-in-out infinite;
}
.mloader::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url(../assets/brand/logo-nav.webp) center / contain no-repeat;
  mask: url(../assets/brand/logo-nav.webp) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 247, 222, .95) 50%, transparent 65%);
  background-size: 260% 100%;
  animation: mlShine 1.8s ease-in-out infinite;
}
@keyframes mlBreath { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.96); } }
@keyframes mlShine { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* عرض الدعوة على الموبايل وهي بتحمّل */
.viewer__load .mloader { width: 170px; height: auto; border: 0; border-radius: 0; animation: mlBreath 1.8s ease-in-out infinite; }

/* الشات وهو بيكتب الرد */
.cw__typing .mloader { width: 62px; }

/* الصفحة وهي بتحمّل */
html.pl-on::before, html.pl-on::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
html.pl-on::before {
  background:
    url(../assets/brand/logo-nav.webp) center / min(56vw, 250px) auto no-repeat,
    radial-gradient(ellipse 75% 65% at 50% 45%, #fffaf1 0%, #f5ead7 60%, #e6d5b8 100%);
}
html.pl-on::after {
  -webkit-mask: url(../assets/brand/logo-nav.webp) center / min(56vw, 250px) auto no-repeat;
  mask: url(../assets/brand/logo-nav.webp) center / min(56vw, 250px) auto no-repeat;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 247, 222, .95) 50%, transparent 62%);
  background-size: 260% 100%;
  animation: mlShine 1.6s ease-in-out infinite;
}
html.pl-show::before, html.pl-show::after { opacity: 1; visibility: visible; transition: opacity .25s ease; }

/* زرار بيستنى */
.is-busy::before {
  content: ""; display: inline-block; flex: none;
  width: 3.4em; aspect-ratio: 1400 / 520; margin-inline-end: .45em; vertical-align: middle;
  background: currentColor;
  -webkit-mask: url(../assets/brand/logo-nav.webp) center / contain no-repeat;
  mask: url(../assets/brand/logo-nav.webp) center / contain no-repeat;
  animation: mlBreath 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .mloader, .mloader::after, html.pl-on::after, .is-busy::before { animation: none; }
}