/* ================= شعار المسايل المتحرك (نسخة احترافية) — انسخ من هنا ================= */
@property --coop-sweep { syntax: "<angle>";      inherits: false; initial-value: -8deg; }
@property --coop-reveal{ syntax: "<percentage>"; inherits: false; initial-value: -20%; }

.masayel-logo{
  --ease-out: cubic-bezier(.16,1,.3,1);      /* حركة ناعمة تهدأ في النهاية */
  --ease-io : cubic-bezier(.65,0,.35,1);
  position:relative; width:min(380px,80vw); aspect-ratio:809/551; display:block;
}
.masayel-logo .l{ position:absolute; inset:0; width:100%; height:100%;
  user-select:none; -webkit-user-drag:none; will-change:transform,opacity,filter; }

/* 1) القوس: مسح دائري بحافة ناعمة مع تكبير خفيف */
.masayel-logo .arc{
  transform-origin:64.3% 51.7%;
  -webkit-mask-image:conic-gradient(from 0deg at 64.3% 51.7%,#000 calc(var(--coop-sweep) - 9deg),transparent var(--coop-sweep));
          mask-image:conic-gradient(from 0deg at 64.3% 51.7%,#000 calc(var(--coop-sweep) - 9deg),transparent var(--coop-sweep));
  animation:coop-arc 1.35s var(--ease-io) .15s both;
}
@keyframes coop-arc{
  from{ --coop-sweep:-8deg;  transform:scale(.94); }
  to  { --coop-sweep:100deg; transform:scale(1);  }
}

/* 2) كلمة المسايل: كشف من اليمين لليسار بحافة ناعمة + انزلاق + إزالة ضبابية */
.masayel-logo .word{
  -webkit-mask-image:linear-gradient(to left,#000 var(--coop-reveal),transparent calc(var(--coop-reveal) + 22%));
          mask-image:linear-gradient(to left,#000 var(--coop-reveal),transparent calc(var(--coop-reveal) + 22%));
  animation:coop-word 1.25s var(--ease-out) 1.0s both;
}
@keyframes coop-word{
  from{ --coop-reveal:-22%; transform:translateX(5%) scale(.96); filter:blur(5px); }
  to  { --coop-reveal:100%; transform:none;                       filter:blur(0);  }
}

/* 3) السطران: صعود ناعم متتابع */
.masayel-logo .ar,.masayel-logo .en{ opacity:0; }
.masayel-logo .ar{ animation:coop-rise .95s var(--ease-out) 1.95s both; }
.masayel-logo .en{ animation:coop-rise .95s var(--ease-out) 2.15s both; }
@keyframes coop-rise{
  from{ opacity:0; transform:translateY(22px); filter:blur(4px); }
  to  { opacity:1; transform:none;             filter:blur(0);  }
}

/* 5) استقرار خفيف للشعار كله في النهاية */
.masayel-logo{ animation:coop-settle 1s var(--ease-out) 3.2s both; }
@keyframes coop-settle{ 0%{transform:scale(1)} 40%{transform:scale(1.015)} 100%{transform:scale(1)} }

/* احترام "تقليل الحركة" + متصفحات قديمة لا تدعم @property */
@media (prefers-reduced-motion:reduce){
  .masayel-logo,.masayel-logo .l,.masayel-logo .sheen{ animation:none!important; }
  .masayel-logo .arc,.masayel-logo .word{ -webkit-mask-image:none; mask-image:none; }
  .masayel-logo .ar,.masayel-logo .en{ opacity:1; }
  .masayel-logo .sheen{ display:none; }
}
.masayel-logo.static,.masayel-logo.static .l,.masayel-logo.static .sheen{ animation:none!important; }
.masayel-logo.static .arc,.masayel-logo.static .word{ -webkit-mask-image:none; mask-image:none; }
.masayel-logo.static .ar,.masayel-logo.static .en{ opacity:1; }
.masayel-logo.static .sheen{ display:none; }

.about-logo-frame{width:fit-content;max-width:100%;align-self:flex-start;margin:12px 0; padding:20px;background:transparent;border:0;box-shadow:none;}
.about-logo-frame .masayel-logo{width:220px;max-width:100%;}
.masayel-logo .static-brand{display:block;width:100%;height:100%;aspect-ratio:809/551;object-fit:contain;border:0;background:transparent;filter:none;box-shadow:none;}
.masayel-logo .l{display:none;}
.masayel-logo.is-playing .l{display:block;}
.masayel-logo.is-playing .static-brand{opacity:0;}
.masayel-logo:not(.is-playing){animation:none!important;}
@media(max-width:600px){.about-logo-frame{padding:16px;}.about-logo-frame .masayel-logo{width:180px;}}
@media(prefers-reduced-motion:reduce){.masayel-logo.is-playing .l{display:none;}.masayel-logo.is-playing .static-brand{opacity:1;}}
@media print{.masayel-logo .l{display:none!important;}.masayel-logo .static-brand{opacity:1!important;}.masayel-logo{animation:none!important;}}