/* ==========================================================================
   Loader — شعار متحرك (components/logo_mark.html) + شاشة التحميل (components/page_loader.html)
   + شريط التقدم الرفيع أعلى الصفحة
   السرعة: --ui-logo-speed (1 عادي) · prefers-reduced-motion أو .ui-motion-reduce = بدون حركة
   ========================================================================== */

.ui-logo-mark {
  --ui-logo-blue: #2A6CB5;
  --ui-logo-orange: #F9A038;
  --ui-logo-loop: calc(1.6s * var(--ui-logo-speed, 1));
  --ui-logo-intro: calc(1.5s * var(--ui-logo-speed, 1));
  display: block;
  block-size: auto;
  overflow: visible;
}
.ui-logo-mark__shield { fill: var(--ui-logo-blue); }
.ui-logo-mark__chevron { fill: var(--ui-logo-orange); }
.ui-logo-mark__star { fill: var(--ui-logo-blue); }
.ui-logo-mark__track { fill: var(--blue-100, #dbe9f8); }
.ui-logo-mark__fill { fill: var(--ui-logo-blue); }
.ui-logo-mark__shield,
.ui-logo-mark__chevron,
.ui-logo-mark__star,
.ui-logo-mark__fill {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- أ) intro: رسم ثم تعبئة (مرة وحدة) ---------- */
.ui-logo-mark--intro .ui-logo-mark__shield,
.ui-logo-mark--intro-loop .ui-logo-mark__shield {
  stroke: var(--ui-logo-blue);
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: ui-logo-draw var(--ui-logo-intro) cubic-bezier(.65, 0, .35, 1) both;
}
.ui-logo-mark--intro .ui-logo-mark__chevron,
.ui-logo-mark--intro-loop .ui-logo-mark__chevron {
  animation: ui-logo-drop var(--ui-logo-intro) cubic-bezier(.34, 1.4, .64, 1) both;
}
.ui-logo-mark--intro .ui-logo-mark__star,
.ui-logo-mark--intro-loop .ui-logo-mark__star {
  animation: ui-logo-spark var(--ui-logo-intro) cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes ui-logo-draw {
  0%   { stroke-dashoffset: 1; fill-opacity: 0; }
  50%  { stroke-dashoffset: 0; fill-opacity: 0; }
  75%  { fill-opacity: 1; stroke-width: 6; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; }
}
@keyframes ui-logo-drop {
  0%, 40% { opacity: 0; transform: translateY(-45%); }
  75%     { opacity: 1; }
  100%    { opacity: 1; transform: none; }
}
@keyframes ui-logo-spark {
  0%, 62% { opacity: 0; transform: scale(0) rotate(-90deg); }
  100%    { opacity: 1; transform: none; }
}

/* ---------- ب) loop: نبض ولمعة (متكرر) ---------- */
.ui-logo-mark--loop .ui-logo-mark__shield { animation: ui-logo-breathe var(--ui-logo-loop) ease-in-out infinite; transform-origin: 50% 100%; }
.ui-logo-mark--loop .ui-logo-mark__chevron { animation: ui-logo-lift var(--ui-logo-loop) ease-in-out infinite; }
.ui-logo-mark--loop .ui-logo-mark__star { animation: ui-logo-twinkle var(--ui-logo-loop) ease-in-out infinite; }

/* intro ثم loop: التكرار يبدأ بعد ما تخلص المقدّمة */
.ui-logo-mark--intro-loop .ui-logo-mark__shield {
  animation: ui-logo-draw var(--ui-logo-intro) cubic-bezier(.65, 0, .35, 1) both,
             ui-logo-breathe var(--ui-logo-loop) ease-in-out var(--ui-logo-intro) infinite;
}
.ui-logo-mark--intro-loop .ui-logo-mark__chevron {
  animation: ui-logo-drop var(--ui-logo-intro) cubic-bezier(.34, 1.4, .64, 1) both,
             ui-logo-lift var(--ui-logo-loop) ease-in-out var(--ui-logo-intro) infinite;
}
.ui-logo-mark--intro-loop .ui-logo-mark__star {
  animation: ui-logo-spark var(--ui-logo-intro) cubic-bezier(.34, 1.56, .64, 1) both,
             ui-logo-twinkle var(--ui-logo-loop) ease-in-out var(--ui-logo-intro) infinite;
}

@keyframes ui-logo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes ui-logo-lift {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-14%); }
  70%      { transform: translateY(2%); }
}
@keyframes ui-logo-twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: 1; }
  40%      { transform: scale(.55) rotate(45deg); opacity: .55; }
  70%      { transform: scale(1.12) rotate(90deg); opacity: 1; }
}

/* ---------- ج) fill: الدرع يتعبّى من تحت ---------- */
.ui-logo-mark--fill .ui-logo-mark__fill { transform-origin: 50% 100%; animation: ui-logo-fill calc(2.2s * var(--ui-logo-speed, 1)) cubic-bezier(.65, 0, .35, 1) infinite; }
.ui-logo-mark--fill .ui-logo-mark__star { animation: ui-logo-twinkle var(--ui-logo-loop) ease-in-out infinite; }
.ui-logo-mark--fill.is-determinate .ui-logo-mark__fill { animation: none; transform: scaleY(var(--ui-progress, 0)); transition: transform .35s cubic-bezier(.65, 0, .35, 1); }
@keyframes ui-logo-fill {
  0%   { transform: scaleY(0); }
  70%  { transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: .85; }
}

/* ---------- شاشة التحميل (components/page_loader.html) ---------- */
.ui-page-loader {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: grid;
  place-items: center;
  background: rgb(255 255 255 / .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility 0s linear .2s;
}
.ui-page-loader.is-visible { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.ui-page-loader__box { display: flex; flex-direction: column; align-items: center; gap: var(--space-4, 1rem); }
.ui-page-loader__text { margin: 0; color: var(--color-text-muted, #64748b); font-size: var(--text-sm, .875rem); font-weight: var(--weight-medium, 500); }
.ui-page-loader__text::after { content: ""; display: inline-block; inline-size: 1.2em; text-align: start; animation: ui-loader-dots 1.2s steps(4, end) infinite; }
@keyframes ui-loader-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- شريط التقدم الرفيع أعلى الصفحة ---------- */
.ui-progress-bar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1100;
  block-size: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease .1s;
}
.ui-progress-bar.is-active { opacity: 1; transition-delay: 0s; }
.ui-progress-bar__fill {
  block-size: 100%;
  inline-size: 100%;
  background: linear-gradient(to left, var(--color-secondary, #F9A038), #fbbf6b);
  box-shadow: 0 0 10px rgb(249 160 56 / .6);
  transform: scaleX(0);
  transform-origin: right;
}
[dir="ltr"] .ui-progress-bar__fill { transform-origin: left; }
/* يتقدم بسرعة لـ 70% ثم يبطئ ويقف عند 90% لين تخلص الصفحة */
.ui-progress-bar.is-active .ui-progress-bar__fill { animation: ui-progress-run 8s cubic-bezier(.1, .7, .2, 1) forwards; }
.ui-progress-bar.is-done .ui-progress-bar__fill { animation: none; transform: scaleX(1); transition: transform .2s ease; }
@keyframes ui-progress-run { 0% { transform: scaleX(0); } 15% { transform: scaleX(.7); } 100% { transform: scaleX(.92); } }

/* ---------- تقليل الحركة: الشعار ثابت والنقاط بس ---------- */
@media (prefers-reduced-motion: reduce) {
  .ui-logo-mark *, .ui-progress-bar__fill { animation: none !important; }
  .ui-logo-mark--intro .ui-logo-mark__shield, .ui-logo-mark--intro-loop .ui-logo-mark__shield { stroke-width: 0; }
  .ui-logo-mark--fill:not(.is-determinate) .ui-logo-mark__fill { transform: none; }
  .ui-progress-bar.is-active .ui-progress-bar__fill { transform: scaleX(.6); }
}
.ui-motion-reduce .ui-logo-mark *, .ui-motion-reduce .ui-progress-bar__fill { animation: none !important; }
.ui-motion-reduce .ui-logo-mark--intro .ui-logo-mark__shield, .ui-motion-reduce .ui-logo-mark--intro-loop .ui-logo-mark__shield { stroke-width: 0; }
.ui-motion-reduce .ui-logo-mark--fill:not(.is-determinate) .ui-logo-mark__fill { transform: none; }
.ui-motion-reduce .ui-progress-bar.is-active .ui-progress-bar__fill { transform: scaleX(.6); }

/* ==========================================================================
   ردّ فعل الشعار (تسجيل الدخول) — يتحط كلاس على الـ svg من جافاسكربت ويتشال بعد الحركة:
   .is-reject : هز يمين ويسار (لا) + السقف يحمر ثم يرجع برتقالي + النجمة تذبل
   .is-accept : إيماءة فوق/تحت (نعم) + السقف يخضر ويبقى + النجمة تلمع بقوة + هالة خضراء
   ========================================================================== */
.ui-logo-mark { --ui-logo-red: var(--color-danger, #FF383C); --ui-logo-green: var(--color-success, #1F9D55); }

.ui-logo-mark.is-reject { animation: ui-logo-shake calc(.6s * var(--ui-logo-speed, 1)) cubic-bezier(.36, .07, .19, .97) both; }
.ui-logo-mark.is-reject .ui-logo-mark__chevron { animation: ui-logo-to-red calc(1.6s * var(--ui-logo-speed, 1)) ease both; }
.ui-logo-mark.is-reject .ui-logo-mark__star { animation: ui-logo-wilt calc(1.6s * var(--ui-logo-speed, 1)) ease both; }
@keyframes ui-logo-shake {
  10%, 90%      { transform: translateX(-2%); }
  20%, 80%      { transform: translateX(4%); }
  30%, 50%, 70% { transform: translateX(-7%); }
  40%, 60%      { transform: translateX(7%); }
}
@keyframes ui-logo-to-red {
  0%       { fill: var(--ui-logo-orange); }
  12%, 65% { fill: var(--ui-logo-red); }
  100%     { fill: var(--ui-logo-orange); }
}
@keyframes ui-logo-wilt {
  0%, 100% { transform: none; opacity: 1; }
  20%, 65% { transform: scale(.6) rotate(-25deg); opacity: .35; }
}

.ui-logo-mark.is-accept { animation: ui-logo-nod calc(.75s * var(--ui-logo-speed, 1)) cubic-bezier(.34, 1.3, .64, 1) both; }
.ui-logo-mark.is-accept .ui-logo-mark__chevron { animation: ui-logo-to-green calc(.5s * var(--ui-logo-speed, 1)) ease forwards; }
.ui-logo-mark.is-accept .ui-logo-mark__star { animation: ui-logo-burst calc(.9s * var(--ui-logo-speed, 1)) cubic-bezier(.34, 1.56, .64, 1) both; }
.ui-logo-mark.is-accept .ui-logo-mark__shield { animation: ui-logo-glow calc(1.1s * var(--ui-logo-speed, 1)) ease both; }
@keyframes ui-logo-nod {
  0%   { transform: none; }
  25%  { transform: translateY(7%); }
  45%  { transform: translateY(-2%); }
  65%  { transform: translateY(4%); }
  100% { transform: none; }
}
@keyframes ui-logo-to-green { to { fill: var(--ui-logo-green); } }
@keyframes ui-logo-burst {
  0%   { transform: none; }
  45%  { transform: scale(1.45) rotate(90deg); }
  100% { transform: rotate(90deg); }
}
@keyframes ui-logo-glow {
  0%   { filter: drop-shadow(0 0 0 rgb(31 157 85 / 0)); }
  40%  { filter: drop-shadow(0 0 18px rgb(31 157 85 / .55)); }
  100% { filter: drop-shadow(0 0 0 rgb(31 157 85 / 0)); }
}

/* تقليل الحركة: بدون هز أو إيماءة — اللون بس يتغيّر */
@media (prefers-reduced-motion: reduce) {
  .ui-logo-mark.is-reject, .ui-logo-mark.is-accept { animation: none !important; }
  .ui-logo-mark.is-reject .ui-logo-mark__chevron { animation: ui-logo-to-red 1.6s ease both !important; }
  .ui-logo-mark.is-accept .ui-logo-mark__chevron { animation: ui-logo-to-green .3s ease forwards !important; }
}
.ui-motion-reduce .ui-logo-mark.is-reject, .ui-motion-reduce .ui-logo-mark.is-accept { animation: none !important; }
.ui-motion-reduce .ui-logo-mark.is-reject .ui-logo-mark__chevron { animation: ui-logo-to-red 1.6s ease both !important; }
.ui-motion-reduce .ui-logo-mark.is-accept .ui-logo-mark__chevron { animation: ui-logo-to-green .3s ease forwards !important; }

/* ==========================================================================
   build — الشعار يتبنى مع النموذج (إنشاء الحساب — ui/js/pages/signup.js)
   الدرع مخطط فاتح ويتعبّى حسب --ui-build (البيانات الشخصية) · .has-roof السقف ينزل (بيانات العمل)
   · .has-star النجمة تلمع (بيانات الحساب) · .is-complete إيماءة وتوهّج (جاهز للإرسال)
   ========================================================================== */
.ui-logo-mark--build .ui-logo-mark__fill {
  transform-origin: 50% 100%;
  transform: scaleY(var(--ui-build, 0));
  transition: transform .55s cubic-bezier(.34, 1.2, .64, 1);
}
.ui-logo-mark--build .ui-logo-mark__chevron {
  opacity: .16;
  transform: translateY(-38%);
  transition: transform .65s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
.ui-logo-mark--build.has-roof .ui-logo-mark__chevron { opacity: 1; transform: none; }
.ui-logo-mark--build .ui-logo-mark__star {
  opacity: .15;
  transform: scale(.45);
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease;
}
.ui-logo-mark--build.has-star .ui-logo-mark__star { opacity: 1; transform: rotate(90deg); }
.ui-logo-mark--build.is-complete { animation: ui-logo-nod .75s cubic-bezier(.34, 1.3, .64, 1) both; }
.ui-logo-mark--build.is-complete .ui-logo-mark__fill,
.ui-logo-mark--build.is-complete .ui-logo-mark__track { animation: ui-logo-glow 1.1s ease both; }

/* احتفال إنشاء الحساب على صفحة الدخول: رسم ثم قبول (login.js) */
.ui-logo-mark.is-celebrate .ui-logo-mark__shield { stroke: var(--ui-logo-blue); stroke-width: 6; stroke-linejoin: round; stroke-dasharray: 1; animation: ui-logo-draw 1.4s cubic-bezier(.65, 0, .35, 1) both; }
.ui-logo-mark.is-celebrate .ui-logo-mark__chevron { animation: ui-logo-drop 1.4s cubic-bezier(.34, 1.4, .64, 1) both, ui-logo-to-green .5s ease 1.5s forwards; }
.ui-logo-mark.is-celebrate .ui-logo-mark__star { animation: ui-logo-spark 1.4s cubic-bezier(.34, 1.56, .64, 1) both, ui-logo-burst .9s cubic-bezier(.34, 1.56, .64, 1) 1.5s both; }

@media (prefers-reduced-motion: reduce) {
  .ui-logo-mark--build .ui-logo-mark__fill, .ui-logo-mark--build .ui-logo-mark__chevron, .ui-logo-mark--build .ui-logo-mark__star { transition: none; }
  .ui-logo-mark--build.is-complete, .ui-logo-mark.is-celebrate { animation: none !important; }
  .ui-logo-mark.is-celebrate .ui-logo-mark__shield { stroke-width: 0; }
  .ui-logo-mark.is-celebrate .ui-logo-mark__chevron { animation: ui-logo-to-green .3s ease forwards !important; }
}
.ui-motion-reduce .ui-logo-mark--build .ui-logo-mark__fill, .ui-motion-reduce .ui-logo-mark--build .ui-logo-mark__chevron, .ui-motion-reduce .ui-logo-mark--build .ui-logo-mark__star { transition: none; }