/* ════════════════════════════════════════════════════════
   الأزهار — طبقة الحركة
   مبدأ: الحركة تشرح، ما تستعرض. دخول ٠٫٦–٠٫٨ث، تفاعل ≤٠٫١٥ث،
   تتابع ٧٠ملي، ولا شيء يتحرك مرتين.
   ════════════════════════════════════════════════════════ */

:root{
  --az-e-out:cubic-bezier(.22,1,.36,1);
  --az-e-io:cubic-bezier(.65,0,.35,1);
  --az-e-in:cubic-bezier(.4,0,1,1);
  --az-e-spring:cubic-bezier(.34,1.56,.64,1);
  --az-t-enter:.7s;
  --az-t-move:.32s;
  --az-t-tap:.14s;
}

/* ───────── ١. الكشف عند التمرير ─────────
   القاعدة تُخفي العنصر فقط قبل كشفه. بعد az-in ما فيه قاعدة إخفاء
   تطابقه أصلًا — فلا يوجد تعادل في الأولوية ولا احتمال بقاء عنصر مخفي. */
.az-reveal{transition:opacity var(--az-t-enter) var(--az-e-out),
  transform var(--az-t-enter) var(--az-e-out),
  clip-path var(--az-t-enter) var(--az-e-out);
  transition-delay:var(--az-d,0ms)}
.az-js .az-reveal:not(.az-in){opacity:0;transform:translateY(20px);
  will-change:opacity,transform}
.az-js .az-reveal:not(.az-in)[data-az="fade"]{transform:none}
.az-js .az-reveal:not(.az-in)[data-az="scale"]{transform:translateY(14px) scale(.975)}
.az-js .az-reveal:not(.az-in)[data-az="side"]{transform:translateX(24px)}
.az-js .az-reveal:not(.az-in)[data-az="clip"]{transform:none;clip-path:inset(0 0 100% 0)}
.az-js .az-reveal:not(.az-in)[data-az="rise"]{transform:translateY(38px)}

/* كلمات العنوان — تُقسم بالكلمة لا بالحرف (العربية تتصل) */
.az-w{display:inline-block;
  transition:opacity .62s var(--az-e-out),transform .62s var(--az-e-out);
  transition-delay:var(--az-d,0ms)}
.az-js .az-w:not(.az-won){opacity:0;transform:translateY(.42em)}

/* ───────── ٢. الترويسة ───────── */
#header,.ct-header{position:sticky;inset-block-start:0;z-index:60;background:var(--az-bg)}
.admin-bar #header,.admin-bar .ct-header{inset-block-start:32px}
@media(max-width:782px){.admin-bar #header,.admin-bar .ct-header{inset-block-start:46px}}
#header,.ct-header{transition:box-shadow .3s var(--az-e-io),backdrop-filter .3s}
body.az-scrolled #header,body.az-scrolled .ct-header{
  box-shadow:0 1px 0 0 var(--az-border),0 8px 28px -22px rgb(56 46 43/.4);
  backdrop-filter:saturate(1.1) blur(10px)}
body.az-scrolled #header [data-row],body.az-scrolled .ct-header [data-row]{
  transition:padding .3s var(--az-e-io)}

.az-topbar{overflow:hidden}
.az-topbar>*{display:inline-block}

/* شريط تقدّم القراءة أعلى الصفحة */
.az-progress{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:99;
  background:var(--az-accent);transform:scaleX(0);transform-origin:right center;
  transition:transform .1s linear;pointer-events:none}
html[dir="ltr"] .az-progress{transform-origin:left center}

/* ───────── ٣. الهيرو ───────── */
.az-hero-media{clip-path:inset(0 0 0 0)}
.az-hero-media img{will-change:transform}
.az-hero-media.az-in img{animation:az-kenburns 14s var(--az-e-io) both}
@keyframes az-kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}

.az-js .az-hero-copy:not(.az-in) .az-hero-cta .az-btn{opacity:0;transform:translateY(14px)}
.az-hero-cta .az-btn{
  transition:opacity .6s var(--az-e-out),transform .6s var(--az-e-out),
             background-color var(--az-t-tap) var(--az-e-io),
             border-color var(--az-t-tap) var(--az-e-io),
             color var(--az-t-tap) var(--az-e-io)}
.az-in .az-hero-cta .az-btn{opacity:1;transform:none}
.az-in .az-hero-cta .az-btn:nth-child(1){transition-delay:.42s}
.az-in .az-hero-cta .az-btn:nth-child(2){transition-delay:.5s}
.az-js .az-hero-copy:not(.az-in) .az-hero-trust>div{opacity:0;transform:translateY(10px)}
.az-hero-trust>div{
  transition:opacity .55s var(--az-e-out),transform .55s var(--az-e-out)}
.az-in .az-hero-trust>div{opacity:1;transform:none}
.az-in .az-hero-trust>div:nth-child(1){transition-delay:.58s}
.az-in .az-hero-trust>div:nth-child(2){transition-delay:.64s}
.az-in .az-hero-trust>div:nth-child(3){transition-delay:.70s}

/* ───────── ٤. الأزرار ───────── */
.az-btn{position:relative;overflow:hidden;isolation:isolate;
  transition:transform var(--az-t-tap) var(--az-e-io),
             background-color var(--az-t-tap) var(--az-e-io),
             border-color var(--az-t-tap) var(--az-e-io),
             color var(--az-t-tap) var(--az-e-io),
             box-shadow var(--az-t-move) var(--az-e-io)}
.az-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120px 60px at var(--az-mx,50%) var(--az-my,50%),
    rgb(255 255 255/.14),transparent 70%);
  opacity:0;transition:opacity .25s var(--az-e-io)}
.az-btn:hover::after{opacity:1}
.az-btn:hover{transform:translateY(-2px);box-shadow:var(--az-sh-1)}
.az-btn:active{transform:translateY(0) scale(.985);transition-duration:60ms}
.az-btn-o::after{background:radial-gradient(120px 60px at var(--az-mx,50%) var(--az-my,50%),
  rgb(185 137 130/.12),transparent 70%)}

/* ───────── ٥. بطاقة المنتج ───────── */
.az-prod{transition:transform var(--az-t-move) var(--az-e-out),
  box-shadow var(--az-t-move) var(--az-e-out),border-color var(--az-t-move)}
.az-prod:hover{transform:translateY(-4px)}
.az-prod-img img{transition:transform .7s var(--az-e-out),opacity .5s}
.az-prod:hover .az-prod-img img{transform:scale(1.055)}
.az-prod-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgb(56 46 43/.07),transparent 42%);
  opacity:0;transition:opacity .35s var(--az-e-io)}
.az-prod:hover .az-prod-img::after{opacity:1}
.az-js .az-reveal:not(.az-in) .az-prod-badges .az-tag{transform:translateY(-4px);opacity:0}
.az-prod-badges .az-tag{transition:transform .45s var(--az-e-out) .2s,opacity .45s var(--az-e-out) .2s}
.az-prod-name{transition:color var(--az-t-tap)}
.az-prod:hover .az-prod-name{color:var(--az-accent-ink)}

.az-qadd{transition:transform .2s var(--az-e-spring),background-color var(--az-t-tap)}
.az-qadd:hover{transform:scale(1.09) rotate(90deg)}
.az-qadd.loading{pointer-events:none}
.az-qadd.loading svg{animation:az-spin .7s linear infinite}
.az-qadd.added{background:var(--az-sage) !important;transform:scale(1)}
@keyframes az-spin{to{transform:rotate(360deg)}}

/* الطيران إلى شريط الروتين */
.az-fly{position:fixed;z-index:200;border-radius:10px;object-fit:cover;
  pointer-events:none;box-shadow:var(--az-sh-2)}

/* ───────── ٦. بطاقات الاحتياج ───────── */
.az-concern img{transition:transform .8s var(--az-e-out)}
.az-concern:hover img{transform:scale(1.06)}
.az-concern-t{transition:transform .4s var(--az-e-out)}
.az-concern:hover .az-concern-t{transform:translateY(-4px)}
.az-concern::after{transition:opacity .4s var(--az-e-io)}
.az-concern:hover::after{opacity:.92}

/* ───────── ٧. مسارات الدخول ───────── */
.az-path{position:relative;overflow:hidden}
.az-path::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:2px;
  background:var(--az-accent);transform:scaleX(0);transform-origin:right center;
  transition:transform .45s var(--az-e-out)}
.az-path:hover::before{transform:scaleX(1)}
.az-path-n{display:inline-block;transition:transform .35s var(--az-e-out),color .2s}
.az-path:hover .az-path-n{transform:translateY(-2px);color:var(--az-accent-ink)}

/* ───────── ٨. خطوات الروتين — خط يُرسم ───────── */
.az-steps{position:relative}
.az-steps::before{content:"";position:absolute;inset-block-start:46px;inset-inline:1.3rem;
  height:1px;background:var(--az-petal);transform:scaleX(var(--az-line,0));
  transform-origin:right center;transition:transform 1.1s var(--az-e-out);z-index:0}
@media(max-width:900px){.az-steps::before{display:none}}
.az-step{position:relative;z-index:1}
.az-step-badge{transition:transform .35s var(--az-e-spring),background-color .3s,color .3s}
.az-step:hover .az-step-badge{transform:scale(1.1);background:var(--az-cocoa);color:var(--az-ivory)}

/* ───────── ٩. شريط الماركات ───────── */
.az-marquee{overflow:hidden;mask-image:linear-gradient(to left,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to left,transparent,#000 8%,#000 92%,transparent)}
.az-marquee-t{display:flex;gap:.6rem;width:max-content;
  animation:az-march 42s linear infinite;animation-play-state:running}
.az-marquee:hover .az-marquee-t{animation-duration:110s}
@keyframes az-march{from{transform:translateX(0)}to{transform:translateX(50%)}}
.az-marquee .az-brand-p{white-space:nowrap}

/* ───────── ١٠. الأكورديون ───────── */
.az-acc summary{cursor:pointer;list-style:none;transition:color .2s}
.az-acc summary::-webkit-details-marker{display:none}
.az-acc summary:hover{color:var(--az-accent-ink)}
.az-acc summary svg{transition:transform .3s var(--az-e-out)}
.az-acc[open] summary svg{transform:rotate(180deg)}
.az-acc[open] .az-acc-b{animation:az-acc-in .38s var(--az-e-out) both}
@keyframes az-acc-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ───────── ١١. شريط الروتين ───────── */
.az-tray{transition:transform .45s var(--az-e-spring)}
.az-tdot{transition:background-color .3s var(--az-e-io),transform .35s var(--az-e-spring)}
.az-tdot.az-on{transform:scale(1.25)}
.az-tstep{transition:opacity .35s var(--az-e-io)}
.az-tray-panel .az-tstep{animation:az-pop .4s var(--az-e-out) both}
.az-tray-panel .az-tstep:nth-child(2){animation-delay:.05s}
.az-tray-panel .az-tstep:nth-child(3){animation-delay:.1s}
.az-tray-panel .az-tstep:nth-child(4){animation-delay:.15s}
@keyframes az-pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────── ١٢. التنبيه ───────── */
.az-toast{transition:transform .4s var(--az-e-spring),opacity .3s var(--az-e-io)}

/* ───────── ١٣. الفلاتر ───────── */
.az-fopt{transition:color var(--az-t-tap),transform var(--az-t-tap) var(--az-e-io)}
.az-fopt:hover{transform:translateX(-3px)}
.az-fbox{transition:background-color .2s var(--az-e-io),border-color .2s,transform .2s var(--az-e-spring)}
.az-fopt.az-on .az-fbox{transform:scale(1.05)}
.az-chip-x{animation:az-pop .3s var(--az-e-out) both}

/* ───────── ١٤. الاختبار ───────── */
.az-q{animation:az-q-in .45s var(--az-e-out) both}
@keyframes az-q-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.az-opt{transition:transform var(--az-t-tap) var(--az-e-io),border-color var(--az-t-tap),
  background-color var(--az-t-tap),color var(--az-t-tap),box-shadow var(--az-t-move)}
.az-opt:hover{transform:translateY(-2px);box-shadow:var(--az-sh-1)}
.az-opt.az-on{animation:az-tick .35s var(--az-e-spring)}
@keyframes az-tick{50%{transform:scale(1.03)}}
.az-quiz-bar i{transition:width .5s var(--az-e-out)}
.az-rstep{animation:az-pop .55s var(--az-e-out) both}
.az-rstep:nth-child(2){animation-delay:.07s}
.az-rstep:nth-child(3){animation-delay:.14s}
.az-rstep:nth-child(4){animation-delay:.21s}

/* ───────── ١٥. الصور — ظهور ناعم ───────── */
img{transition:opacity .45s var(--az-e-out)}
img.az-img-load{opacity:0}
img.az-img-in{opacity:1}

/* ───────── ١٦. الروابط ───────── */
.az-link-a{position:relative}
.az-link-a::after{content:"";position:absolute;inset-block-end:-3px;inset-inline:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform .35s var(--az-e-out)}
.az-link-a:hover::after{transform:scaleX(1)}
.az-foot a{transition:color var(--az-t-tap),transform var(--az-t-tap) var(--az-e-io)}
.az-foot a:hover{transform:translateX(-3px)}

/* ───────── ١٧. انتقال الصفحات ───────── */
@view-transition{navigation:auto}
::view-transition-old(root){animation:az-vt-out .2s var(--az-e-in) both}
::view-transition-new(root){animation:az-vt-in .38s var(--az-e-out) both}
@keyframes az-vt-out{to{opacity:0}}
@keyframes az-vt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ───────── ١٨. احترام تقليل الحركة ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
  .az-reveal,.az-w,.az-hero-cta .az-btn,.az-hero-trust>div{opacity:1 !important;transform:none !important;clip-path:none !important}
  .az-js .az-reveal:not(.az-in),.az-js .az-w:not(.az-won){opacity:1 !important;transform:none !important;clip-path:none !important}
  .az-marquee-t{animation:none !important}
  .az-steps::before{transform:scaleX(1) !important}
  img.az-img-load{opacity:1}
  @view-transition{navigation:none}
}