/* =========================================================
   PalPrints — Interactions
   حركات الأزرار وظهور العناصر — مشتركة بين كل الصفحات

   File: assets/css/interactions.css

   تُحمّل بعد ملفات CSS الأخرى لأنها تعتمد على متغيراتها،
   وكل الأصناف هنا يضيفها assets/js/interactions.js
   حتى تبقى الصفحة كاملة الظهور إذا تعطّل الجافاسكربت.

   الترتيب:
   01. متغيرات الحركة
   02. العنصر القابل للضغط
   03. موجة الضغط
   04. الضغط والارتداد والتحويم
   05. حلقة التركيز
   06. بروز الأزرار عند مرور الماوس
   07. ظهور العناصر عند التمرير
   08. ظهور الصفحة عند الفتح
   09. حركة الهيدر عند مرور الماوس
   10. البطاقات والنوافذ والرسائل
   11. تقليل الحركة
   ========================================================= */


/* =========================================================
   01. متغيرات الحركة
   ========================================================= */

:root {
  --pal-press-scale: 0.965;

  --pal-ripple-time: 620ms;
  --pal-pop-time: 340ms;
  --pal-reveal-time: 620ms;

  --pal-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --pal-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =========================================================
   02. العنصر القابل للضغط
   ========================================================= */

.pal-pressable {
  overflow: hidden;

  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* الموجة تُرسم داخل العنصر، فإن كان تموضعه static
   نمنحه مرجعاً خاصاً به — والصنف يضيفه الجافاسكربت
   فقط للعناصر التي لا تملك تموضعاً أصلاً */

.pal-pressable.pal-anchor {
  position: relative;
}


/* =========================================================
   03. موجة الضغط
   ========================================================= */

.pal-ripple {
  position: absolute;

  display: block;

  background: currentcolor;
  border-radius: 50%;

  opacity: 0.26;
  transform: scale(0);

  pointer-events: none;

  animation: palRipple var(--pal-ripple-time) var(--pal-ease-out) forwards;
}

@keyframes palRipple {
  to {
    opacity: 0;
    transform: scale(1);
  }
}


/* =========================================================
   04. الضغط والارتداد والتحويم
   ========================================================= */

.pal-pressable {
  transition:
    transform 0.16s var(--pal-ease-out),
    box-shadow var(--profile-transition, 0.22s ease),
    background var(--profile-transition, 0.22s ease),
    border-color var(--profile-transition, 0.22s ease),
    color var(--profile-transition, 0.22s ease);
}

/* أثناء الضغط ينكمش قليلاً */

.pal-pressable.is-pressed {
  transform: scale(var(--pal-press-scale));
}

/* وعند رفع الإصبع يبرز ثم يستقر */

.pal-pressable.is-popped {
  animation: palPop var(--pal-pop-time) var(--pal-ease-spring);
}

@keyframes palPop {
  0% {
    transform: scale(var(--pal-press-scale));
  }

  55% {
    transform: scale(1.035);
  }

  100% {
    transform: scale(1);
  }
}

/* العناصر المعطّلة لا تتفاعل */

.pal-pressable[disabled],
.pal-pressable[aria-disabled="true"] {
  transform: none;
  animation: none;
}


/* =========================================================
   05. حلقة التركيز
   ========================================================= */

.pal-pressable:focus-visible {
  outline: 2px solid var(--profile-primary, #6815ed);
  outline-offset: 2px;
}


/* =========================================================
   06. بروز الأزرار عند مرور الماوس
   =========================================================
   كل زر في كل صفحة — بما فيها روابط القائمة الجانبية —
   يرتفع قليلاً مع ظل تحته فيبدو بارزاً عن سطح الصفحة.

   ملاحظات:
   - الأسماء الصريحة تعمل حتى لو تعطّل الجافاسكربت،
     و .pal-pressable تلتقط أي زر آخر يضيفه أي صفحة لاحقاً.
   - يأتي هذا القسم قبل قسم الهيدر عمداً، ليبقى للهيدر
     ظله البنفسجي الخاص ومقدار ارتفاعه.
   - القائمة الجانبية تُمرَّر عمودياً مع overflow-x: hidden،
     لذلك الحركة رأسية فقط حتى لا يقصّها الإطار.
   ========================================================= */

:root {
  --pal-hover-lift: -3px;
  --pal-hover-shadow: 0 9px 20px rgb(26 33 74 / 14%);
}

html[data-bs-theme="dark"] {
  --pal-hover-shadow: 0 9px 22px rgb(0 0 0 / 45%);
}

.profile-button,
.profile-sidebar-link,
.profile-sidebar-logout,
.profile-sidebar-close,
.profile-dialog-close,
.profile-card-link,
.profile-avatar-upload,
.customer-address-action,
.customer-library-item,
.designer-portfolio-link,
.btn-brand,
.btn-brand-outline,
.navbar-toggler,
.pal-pressable {
  transition:
    color var(--profile-transition, 0.22s ease),
    background var(--profile-transition, 0.22s ease),
    border-color var(--profile-transition, 0.22s ease),
    box-shadow 0.26s var(--pal-ease-out),
    transform 0.26s var(--pal-ease-spring);
}

@media (hover: hover) {
  .profile-button:hover,
  .profile-sidebar-link:hover,
  .profile-sidebar-logout:hover,
  .profile-sidebar-close:hover,
  .profile-dialog-close:hover,
  .profile-card-link:hover,
  .profile-avatar-upload:hover,
  .customer-address-action:hover,
  .customer-library-item:hover,
  .designer-portfolio-link:hover,
  .btn-brand:hover,
  .btn-brand-outline:hover,
  .navbar-toggler:hover,
  .pal-pressable:hover {
    transform: translateY(var(--pal-hover-lift));
  }

  /* ظل الارتفاع — عدا الأزرار الأساسية
     (.is-primary و .btn-brand) فلها توهّجها البنفسجي */

  .profile-button:hover:not(.is-primary),
  .profile-sidebar-link:hover,
  .profile-sidebar-logout:hover,
  .profile-sidebar-close:hover,
  .profile-dialog-close:hover,
  .profile-card-link:hover,
  .profile-avatar-upload:hover,
  .customer-address-action:hover,
  .customer-library-item:hover,
  .designer-portfolio-link:hover,
  .btn-brand-outline:hover,
  .navbar-toggler:hover,
  .pal-pressable:hover:not(.is-primary):not(.btn-brand) {
    box-shadow: var(--pal-hover-shadow);
  }

  /* أثناء الضغط تعود حركة الانكماش،
     والمعطّل لا يرتفع أصلاً
     (حالة الارتداد تتكفل بها حركة palPop نفسها) */

  .pal-pressable.is-pressed:hover {
    transform: scale(var(--pal-press-scale));
  }

  .profile-button[disabled]:hover,
  .customer-address-action[disabled]:hover,
  .pal-pressable[disabled]:hover,
  .pal-pressable[aria-disabled="true"]:hover {
    transform: none;

    box-shadow: none;
  }
}


/* =========================================================
   07. ظهور العناصر عند التمرير
   ========================================================= */

.pal-reveal {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity var(--pal-reveal-time) var(--pal-ease-out),
    transform var(--pal-reveal-time) var(--pal-ease-out);

  transition-delay: var(--pal-delay, 0ms);

  will-change: opacity, transform;
}

.pal-reveal.is-revealed {
  opacity: 1;
  transform: none;

  will-change: auto;
}

/* أرقام الإحصائيات تُعدّ تصاعدياً،
   والعرض الثابت للأرقام يمنع اهتزاز السطر */

[data-counter] {
  font-variant-numeric: tabular-nums;
}


/* =========================================================
   08. ظهور الصفحة عند الفتح
   ========================================================= */

/* fill-mode: backwards يمسك الحالة الأولى أثناء التأخير فقط،
   ثم يعود العنصر إلى تنسيقه الطبيعي دون تحويل عالق */

.pal-enter {
  animation: palRise 520ms var(--pal-ease-out) backwards;
  animation-delay: calc(var(--pal-index, 0) * 45ms);
}

@keyframes palRise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.pal-enter-fade {
  animation: palFade 460ms ease backwards;
  animation-delay: calc(var(--pal-index, 0) * 45ms);
}

@keyframes palFade {
  from {
    opacity: 0;
  }
}


/* =========================================================
   09. حركة الهيدر عند مرور الماوس
   =========================================================
   يغطي الشريط العلوي في صفحات الملف الشخصي
   وهيدر المكوّنات المشترك (.header-icon-btn).

   لكل أيقونة حركة تناسب معناها، والحركات كلها داخل
   @media (hover: hover) حتى لا تعلق على شاشات اللمس.
   ========================================================= */

.profile-action-button,
.profile-sidebar-toggle,
.header-icon-btn,
.storefront-page .icon-button {
  transition:
    color var(--profile-transition, 0.22s ease),
    background var(--profile-transition, 0.22s ease),
    border-color var(--profile-transition, 0.22s ease),
    box-shadow 0.26s var(--pal-ease-out),
    transform 0.26s var(--pal-ease-spring);
}

/* الأيقونة تتحرك مستقلة عن الزر */

.profile-action-button > i,
.profile-sidebar-toggle > i,
.header-icon-btn > i,
.storefront-page .icon-button > i,
.profile-card-link > i {
  display: inline-block;

  transition: transform 0.32s var(--pal-ease-spring);
}

@media (hover: hover) {
  /* الزر نفسه يرتفع قليلاً مع هالة ناعمة،
     ما لم يكن مضغوطاً في تلك اللحظة */

  .profile-action-button:hover:not(.is-pressed),
  .profile-sidebar-toggle:hover:not(.is-pressed),
  .header-icon-btn:hover:not(.is-pressed),
  .storefront-page .icon-button:hover:not(.is-pressed) {
    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgb(104 21 237 / 18%);
  }

  /* الجرس يرنّ */

  .profile-action-button:hover > .bi-bell,
  .header-icon-btn:hover > .bi-bell,
  .storefront-page .icon-button:hover > .bi-bell {
    transform-origin: top center;

    animation: palBellRing 0.72s ease;
  }

  /* السلة تتقدّم خطوة */

  .profile-action-button:hover > .bi-cart3,
  .header-icon-btn:hover > .bi-cart3,
  .storefront-page .icon-button:hover > .bi-cart3 {
    animation: palCartNudge 0.62s ease;
  }

  /* القمر والشمس يميلان ويكبران */

  .profile-action-button:hover > .bi-moon-stars,
  .profile-action-button:hover > .bi-sun,
  .header-icon-btn:hover > .bi-moon-stars,
  .header-icon-btn:hover > .bi-sun,
  .storefront-page .icon-button:hover > .bi-moon-stars,
  .storefront-page .icon-button:hover > .bi-sun {
    transform: rotate(-18deg) scale(1.14);
  }

  /* الكرة الأرضية تدور دورة كاملة */

  .profile-action-button:hover > .bi-globe2,
  .header-icon-btn:hover > .bi-globe2,
  .storefront-page .icon-button:hover > .bi-globe2 {
    animation: palSpin 1.1s ease;
  }

  /* العدسة تقترب */

  .header-icon-btn:hover > .bi-search,
  .storefront-page .icon-button:hover > .bi-search {
    transform: scale(1.2);
  }

  /* القلب ينبض */

  .header-icon-btn:hover > .bi-heart,
  .storefront-page .icon-button:hover > .bi-heart {
    animation: palBeat 0.72s ease;
  }

  /* قائمة الهاتف تتمدد */

  .navbar-toggler:hover > .bi-list,
  .storefront-page .sidebar-toggle:hover > .bi-list {
    transform: scaleX(1.18);
  }

  /* السهم ينزلق في اتجاهه — والصنف نفسه يتبدل
     مع اللغة فتصح الحركة في RTL و LTR معاً */

  .profile-sidebar-toggle:hover > .bi-arrow-left {
    transform: translateX(-3px);
  }

  .profile-sidebar-toggle:hover > .bi-arrow-right {
    transform: translateX(3px);
  }

  .profile-card-link:hover > .bi-arrow-left {
    transform: translateX(-4px);
  }

  .profile-card-link:hover > .bi-arrow-right {
    transform: translateX(4px);
  }

  /* عدّاد السلة ينط، ونقطة الإشعارات تنبض */

  .profile-action-button:hover .profile-action-badge,
  .storefront-page .icon-button:hover .icon-badge {
    transform: scale(1.16);
  }

  .profile-action-button:hover .profile-action-dot {
    animation: palDotPulse 1.1s ease infinite;
  }

  /* الشعار */

  .profile-brand:hover .profile-brand-image,
  .navbar-brand:hover .main-logo,
  .auth-header a:hover .main-logo {
    transform: scale(1.05);
  }
}

.profile-action-badge,
.storefront-page .icon-badge {
  transition: transform 0.3s var(--pal-ease-spring);
}

.profile-brand-image,
.main-logo {
  transition: transform 0.35s var(--pal-ease-out);
}

@keyframes palBellRing {
  0%,
  100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(14deg);
  }

  40% {
    transform: rotate(-11deg);
  }

  60% {
    transform: rotate(7deg);
  }

  80% {
    transform: rotate(-4deg);
  }
}

@keyframes palCartNudge {
  0%,
  100% {
    transform: translateX(0) rotate(0);
  }

  35% {
    transform: translateX(3px) rotate(-8deg);
  }

  70% {
    transform: translateX(-2px) rotate(4deg);
  }
}

@keyframes palSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes palBeat {
  0%,
  100% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.22);
  }

  45% {
    transform: scale(0.96);
  }

  70% {
    transform: scale(1.12);
  }
}

@keyframes palDotPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.35);
    opacity: 0.7;
  }
}


/* =========================================================
   10. البطاقات والنوافذ والرسائل
   ========================================================= */

/* ارتفاع خفيف للبطاقة عند التحويم — على الأجهزة ذات المؤشر فقط */

@media (hover: hover) {
  .pal-hover-lift {
    transition:
      transform 0.24s var(--pal-ease-out),
      box-shadow 0.24s var(--pal-ease-out);
  }

  .pal-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--profile-shadow-hover, 0 18px 44px rgb(26 33 74 / 12%));
  }

  /* لا يرتفع ما دام لم يظهر بعد */
  .pal-reveal:not(.is-revealed).pal-hover-lift:hover {
    transform: translateY(18px);
  }
}

/* النوافذ المنبثقة */

.profile-dialog[open] {
  animation: palDialogIn 320ms var(--pal-ease-out);
}

.profile-dialog[open]::backdrop {
  animation: palFade 320ms ease;
}

@keyframes palDialogIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
}

/* رسالة النجاح والخطأ */

.profile-toast.is-visible {
  animation: palToastIn 380ms var(--pal-ease-spring);
}

@keyframes palToastIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
}


/* =========================================================
   11. تقليل الحركة
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .pal-ripple {
    display: none;
  }

  /* حركات الهيدر تتوقف، ويبقى تغيّر اللون وحده
     دلالةً على مرور الماوس.

     قواعد التحويم أعلاه أعلى تخصيصاً من هذه،
     فنستخدم !important كما يفعل profile-core.css
     في كتلته الخاصة بتقليل الحركة */

  .profile-action-button:hover,
  .profile-sidebar-toggle:hover,
  .header-icon-btn:hover,
  .storefront-page .icon-button:hover,
  .profile-action-button:hover > i,
  .profile-sidebar-toggle:hover > i,
  .header-icon-btn:hover > i,
  .storefront-page .icon-button:hover > i,
  .profile-card-link:hover > i,
  .navbar-toggler:hover > i,
  .profile-action-button:hover .profile-action-badge,
  .profile-action-button:hover .profile-action-dot,
  .storefront-page .icon-button:hover .icon-badge,
  .profile-brand:hover .profile-brand-image,
  .navbar-brand:hover .main-logo,
  .auth-header a:hover .main-logo {
    transform: none !important;

    animation: none !important;
    transition: none !important;
  }

  .pal-pressable.is-pressed,
  .pal-pressable.is-popped,
  .pal-enter,
  .pal-enter-fade,
  .profile-dialog[open],
  .profile-dialog[open]::backdrop,
  .profile-toast.is-visible {
    animation: none;
    transform: none;
  }

  .pal-reveal,
  .pal-reveal.is-revealed {
    opacity: 1;
    transform: none;

    transition: none;
  }

  .pal-hover-lift:hover {
    transform: none;
  }

  /* بروز الأزرار يتوقف، ويبقى تغيّر اللون دلالةً كافية */

  .profile-button:hover,
  .profile-sidebar-link:hover,
  .profile-sidebar-logout:hover,
  .profile-sidebar-close:hover,
  .profile-dialog-close:hover,
  .profile-card-link:hover,
  .profile-avatar-upload:hover,
  .customer-address-action:hover,
  .customer-library-item:hover,
  .designer-portfolio-link:hover,
  .btn-brand:hover,
  .btn-brand-outline:hover,
  .navbar-toggler:hover,
  .pal-pressable:hover {
    transform: none !important;

    transition: none !important;
  }
}