/* ===== حركات هادية وخفيفة ===== */

/* 1) الهيرو: الصورة تتحرك ببطء + العنوان يظهر + لمعة دهبية مرة واحدة */
@keyframes dcPan{from{background-position:0 0,28% 35%}to{background-position:0 0,38% 65%}}
@keyframes dcPanLtr{from{background-position:0 0,72% 35%}to{background-position:0 0,62% 65%}}
.hero{animation:dcPan 26s ease-in-out infinite alternate}
html[dir="ltr"] .hero{animation-name:dcPanLtr}
@keyframes dcUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes dcShine{from{background-position:100% 0}to{background-position:0 0}}
.hero-text h1{animation:dcUp .9s ease .15s both}
.hero-text h1 span{background:linear-gradient(110deg,#C6A16B 35%,#FFF1CF 50%,#C6A16B 65%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:dcShine 1.8s ease 1s 1 both}
.hero-text p{animation:dcUp .9s ease .55s both}
.hero-actions{animation:dcUp .9s ease 1.05s both}

/* 2) ظهور الأقسام مع السكرول */
html.js-anim .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
html.js-anim .rv.in{opacity:1;transform:none}
html.js-anim .lower-title.rv:not(.in)::after{transform:scaleX(0)}
.lower-title::after{transition:transform 1s ease .35s;transform-origin:center}

/* 3) كروت الخدمات: خط دهبي + لون الاسم */
.service-card::after{content:"";position:absolute;left:16%;right:16%;bottom:0;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#C6A16B,transparent);transform:scaleX(0);transition:transform .45s ease;pointer-events:none}
.service-card:hover::after{transform:scaleX(1)}
.service-card h3{transition:color .3s}
.service-card:hover h3{color:#A8854F}
.service-card:hover{transform:translateY(-5px)}

/* 4) المعرض */
.work-caption{transform:translateY(8px);opacity:.9;transition:transform .35s ease,opacity .35s ease}
.work-item:hover .work-caption{transform:none;opacity:1}
@keyframes dcLb{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.lightbox.open{animation:dcFade .3s ease}
.lightbox.open img{animation:dcLb .35s ease}
@keyframes dcFade{from{opacity:0}to{opacity:1}}

/* 5) زرار الواتساب: نبضة خفيفة كل فترة */
@keyframes dcWa{0%,14%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}4%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}14%{box-shadow:0 0 0 16px rgba(37,211,102,0)}}
.wa-float{animation:dcWa 9s ease-in-out 4s infinite}

/* 6) زرار الرجوع للأعلى */
.dc-top{position:fixed;left:28px;bottom:96px;z-index:90;width:44px;height:44px;border-radius:50%;border:1px solid rgba(198,161,107,.7);background:rgba(27,42,35,.88);color:#E2C9A0;font-size:20px;line-height:1;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .35s,transform .35s,background .25s}
.dc-top.show{opacity:1;transform:none;pointer-events:auto}
.dc-top:hover{background:#24382F}

@media (prefers-reduced-motion:reduce){
  .hero,.hero-text h1,.hero-text h1 span,.hero-text p,.hero-actions,.wa-float,.lightbox.open,.lightbox.open img{animation:none!important}
  html.js-anim .rv{opacity:1!important;transform:none!important;transition:none!important}
}
@media (max-width:760px){.hero{animation:none}}