/* ==========================================================================
   مُزان — تحسينات الواجهة والحركة (calm, professional)
   يُحمّل بعد style.css. كل الحركات تحترم prefers-reduced-motion.
   ========================================================================== */

/* ---------- 1) نظام الظهور عند التمرير (scroll reveal) ---------- */
.mz-anim .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
.mz-anim .reveal-scale{opacity:0;transform:scale(.965);transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-scale.in{opacity:1;transform:none}

/* أطفال متتالية (stagger) لأي حاوية عليها .stagger */
.mz-anim .stagger > *{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}
.stagger.in > *{opacity:1;transform:none}
.stagger.in > *:nth-child(1){transition-delay:.05s}
.stagger.in > *:nth-child(2){transition-delay:.12s}
.stagger.in > *:nth-child(3){transition-delay:.19s}
.stagger.in > *:nth-child(4){transition-delay:.26s}
.stagger.in > *:nth-child(5){transition-delay:.33s}
.stagger.in > *:nth-child(6){transition-delay:.40s}

/* ---------- 2) الهيدر: إبراز «مُزان» + وضوح اسم الأخصائية ---------- */
.brand{overflow:visible}
.brand img{object-fit:contain;flex:none}
.brand .brand-name{display:flex;flex-direction:column;line-height:1.2;overflow:visible}
.brand .brand-name strong{font-size:20px !important;font-weight:800;letter-spacing:-.01em;color:var(--green-700);line-height:1.4;overflow:visible}
.brand .brand-name small{font-size:12.5px;font-weight:700;color:var(--green-ink);opacity:.92;margin-top:2px;letter-spacing:.005em;white-space:nowrap}
@media (max-width:520px){.brand .brand-name strong{font-size:18px !important}.brand .brand-name small{font-size:11px}}
.brand img{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.brand:hover img{transform:rotate(-6deg) scale(1.06)}
/* الشعار يظهر كاملاً بلا قصّ في كل الحاويات (هيرو + بطاقة الأخصائية) */
.about-photo .ph img{object-fit:contain;height:auto;max-height:100%}
.hero-card .apple-bg img{object-fit:contain;max-width:100%;height:auto}
.hero-card .apple-bg{display:grid;place-items:center;overflow:visible}

/* ---------- 3) الهيرو: حركة هادئة + عناصر تغذية تطفو ---------- */
.hero{position:relative;overflow:hidden}
.hero-float{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-float .orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5;animation:mz-float 16s ease-in-out infinite}
.hero-float .leaf{position:absolute;color:var(--green);opacity:.14;animation:mz-drift 22s linear infinite}
.hero-float .leaf svg{display:block;width:100%;height:100%}
/* توهّج متدرّج ناعم يتنفّس خلف المحتوى */
.hero::before{content:"";position:absolute;z-index:0;inset:-20% 40% auto -10%;height:520px;
  background:radial-gradient(closed,transparent);background:radial-gradient(420px 320px at 20% 20%,rgba(29,175,76,.16),transparent 70%);
  animation:mz-breathe 9s ease-in-out infinite}
.hero .container{position:relative;z-index:1}

@keyframes mz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes mz-drift{0%{transform:translateY(10px) rotate(0)}100%{transform:translateY(-30px) rotate(360deg)}}
@keyframes mz-breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}

/* دخول الهيرو عند تحميل الصفحة */
.mz-anim .hero-text > *{opacity:0;transform:translateY(20px);animation:mz-rise .7s cubic-bezier(.22,.61,.36,1) forwards}
.hero-text .eyebrow{animation-delay:.05s}
.hero-text h1{animation-delay:.15s}
.hero-text .lead{animation-delay:.28s}
.hero-text .hero-actions{animation-delay:.40s}
.hero-text .hero-stats{animation-delay:.52s}
.mz-anim .hero-visual{opacity:0;transform:translateY(24px) scale(.97);animation:mz-rise-card .9s cubic-bezier(.22,.61,.36,1) .35s forwards}
.hero-card{animation:mz-float-card 7s ease-in-out infinite 1.2s}

@keyframes mz-rise{to{opacity:1;transform:none}}
@keyframes mz-rise-card{to{opacity:1;transform:none}}
@keyframes mz-float-card{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* الشارة العلوية: نبض لطيف للورقة */
.hero .eyebrow{transition:transform .3s ease}
.hero .eyebrow:hover{transform:translateY(-2px)}

/* ---------- 4) تفاعلات دقيقة (micro-interactions) ---------- */
.card,.panel,.stat,.about-credentials .cred,.pkg,.service-card,.tip-card,.post-card{
  transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s ease,border-color .25s ease}
.card:hover,.pkg:hover,.service-card:hover,.tip-card:hover,.post-card:hover{
  transform:translateY(-6px);box-shadow:0 18px 40px rgba(29,58,40,.10)}
.hero-stats .stat{transition:transform .25s ease}
.hero-stats .stat:hover{transform:translateY(-4px)}
/* أزرار: لمعة خفيفة عند المرور */
.btn{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn-primary:hover::after{left:120%}

/* روابط التنقّل: خط سفلي يتمدّد */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;inset-inline:12px;bottom:4px;height:2px;background:var(--green);
  transform:scaleX(0);transform-origin:center;transition:transform .28s cubic-bezier(.22,.61,.36,1);border-radius:2px}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* واتساب العائم: نبض جذب لطيف */
.wa-float,.whatsapp-float,a[href*="wa.me"].float{animation:mz-pulse 2.6s ease-in-out infinite}
@keyframes mz-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.45)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}}

/* ---------- 5) صقل عام (polish) ---------- */
:focus-visible{outline:3px solid rgba(29,175,76,.45);outline-offset:2px;border-radius:6px}
a,button,.btn{cursor:pointer}
img{max-width:100%}
html{scroll-behavior:smooth}
::selection{background:rgba(29,175,76,.18)}
/* عدّاد الإحصاءات يبرز */
.hero-stats .stat b{transition:color .3s ease}

/* ---------- 6) احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .reveal,.reveal-scale,.stagger > *{opacity:1 !important;transform:none !important}
  .hero-text > *,.hero-visual{opacity:1 !important;transform:none !important;animation:none !important}
  html{scroll-behavior:auto}
}