/* SDS قريب — طبقة الحركة والتفاعل (تُحمَّل بعد styles.css) */
:root{--ease:cubic-bezier(.2,.8,.2,1)}

/* ---- التنقل ---- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--blue));transform:scaleX(0);transform-origin:right;z-index:40;pointer-events:none}
.topbar{height:var(--topbar-h,76px);transition:height .3s var(--ease),box-shadow .3s,background .3s}
body.scrolled{--topbar-h:62px}
body.scrolled .topbar{box-shadow:0 10px 30px rgba(11,31,58,.08);background:rgba(251,253,255,.97)}
.offline-banner{top:var(--topbar-h,76px);transition:top .3s var(--ease)}
.nav{position:relative}
.nav a{position:relative;padding:6px 2px;transition:color .25s}
.nav a.active{color:var(--blue);font-weight:700}
.nav-ind{position:absolute;bottom:-4px;left:0;height:3px;width:var(--w,0);border-radius:3px;background:var(--cyan);transform:translateX(var(--x,0));opacity:0;transition:transform .4s var(--ease),width .4s var(--ease),opacity .25s}
.nav-ind.on{opacity:1}
.to-top{position:fixed;bottom:22px;left:18px;width:44px;height:44px;border-radius:50%;border:0;background:var(--navy);color:#fff;font-size:20px;box-shadow:0 10px 24px rgba(11,31,58,.25);opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:.3s var(--ease);z-index:24}
.to-top.show{opacity:1;transform:none;pointer-events:auto}.to-top:hover{background:var(--blue)}
.dock{display:none}
@media(max-width:850px){
  body{padding-bottom:88px}
  .dock{display:flex;gap:4px;position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);padding:6px;border-radius:22px;background:rgba(11,31,58,.93);backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(7,25,45,.35);z-index:25}
  .dock a,.dock button{display:grid;justify-items:center;gap:1px;min-width:76px;padding:7px 10px;border:0;border-radius:16px;background:transparent;color:#a8bfd2;font-size:11px;text-decoration:none;transition:background .3s var(--ease),color .3s}
  .dock b{font-size:18px;line-height:1;font-weight:400}
  .dock a.active{background:#1c70b9;color:#fff}
  .toast{bottom:92px}.to-top{bottom:92px}
}

/* ---- الظهور عند التمرير ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s var(--ease);transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}

/* ---- الهيرو ---- */
.map-orbit{translate:calc(var(--px,0)*14px) calc(var(--py,0)*14px);transition:translate .3s ease-out}
.orbit{translate:calc(var(--px,0)*-9px) calc(var(--py,0)*-9px);transition:translate .3s ease-out}
.orbit-one{animation:spin 46s linear infinite}.orbit-two{animation:spin 32s linear infinite reverse}
.pin-main{animation:bob 4.2s ease-in-out infinite}
.pin-small{animation:ping 2.6s ease-in-out infinite}.p2{animation-delay:.8s}.p3{animation-delay:1.6s}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{50%{translate:0 -10px}}
@keyframes ping{50%{scale:1.35;box-shadow:0 0 0 12px #18b6e800}}
.hero-card-caption{transition:transform .4s var(--ease)}.hero-card:hover .hero-card-caption{transform:translateY(-4px)}

/* ---- البطاقات الذكية ---- */
.service-card{--rx:0deg;--ry:0deg;--accent:var(--blue);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),box-shadow .3s,border-color .3s;animation:cardIn .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms);will-change:transform}
.service-card.quiet{animation:none}
.service-card:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px)}
.service-card.tilting{transition:transform .08s linear,box-shadow .3s,border-color .3s}
.service-card[data-cat=health]{--accent:#1aa37a}.service-card[data-cat=education]{--accent:#1c70b9}.service-card[data-cat=daily]{--accent:#d89a2b}
.service-card::before{content:'';position:absolute;top:0;inset-inline-start:0;height:3px;width:34%;background:var(--accent);border-radius:0 0 3px 3px;transition:width .5s var(--ease)}
.service-card:hover::before{width:100%}
.card-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(24,182,232,.16),transparent 70%)}
.service-card:hover .card-glow{opacity:1}
.service-card:hover h3{color:var(--blue)}.service-card h3{transition:color .25s}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) translateY(30px) scale(.95)}}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;min-height:0}.chips:empty{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:#eef1f5;color:#4b5f73}
.chip i{width:7px;height:7px;border-radius:50%;background:currentColor}
.chip.open{background:#e4f6ec;color:var(--green)}.chip.open i{animation:pulse 1.6s infinite}
.chip.closed{background:#fdeaea;color:var(--red)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,131,75,.5)}100%{box-shadow:0 0 0 7px rgba(22,131,75,0)}}
.meter{height:4px;border-radius:4px;background:#e7f0f7;margin-top:9px;overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--green),#47c17f);animation:grow .9s var(--ease) backwards;animation-delay:calc(var(--i,0)*70ms + 250ms)}
.meter.old i{background:linear-gradient(90deg,var(--amber),#e8b341)}
@keyframes grow{from{width:0}}
.card-actions button,.card-call{transition:transform .2s var(--ease),color .2s}
.card-actions button:hover,.card-call:hover{transform:translateX(-3px)}
.card-actions .fav:hover{transform:scale(1.2)}
.fav.pop{animation:pop .5s var(--ease)}
@keyframes pop{30%{transform:scale(1.55) rotate(-10deg)}60%{transform:scale(.9)}}
.results-grid.list-view .service-card{transform:none}.results-grid.list-view .service-card:hover{transform:translateX(-4px)}
.quick-filters button{transition:transform .2s var(--ease),background .25s,border-color .25s}.quick-filters button:hover{transform:translateY(-2px)}
.chip+.chip{margin:0}.detail-block .chip{margin-inline-start:8px}

/* ---- أزرار (تموّج) ---- */
.primary-btn,.outline-btn,.load-more,.clear-btn,.detail-actions a,.detail-actions button{position:relative;overflow:hidden;transition:transform .2s var(--ease),background .25s,box-shadow .25s}
.primary-btn:active,.outline-btn:active,.load-more:active{transform:scale(.97)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
.outline-btn .ripple,.load-more .ripple,.clear-btn .ripple,.detail-actions .secondary .ripple{background:rgba(0,82,204,.18)}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* ---- النوافذ ---- */
.modal:not([hidden]) .modal-backdrop{animation:fade .3s ease}
.modal:not([hidden]) .modal-card{animation:modalIn .4s var(--ease)}
.modal:not([hidden]) .detail-block dl{animation:rise .5s var(--ease) backwards}
.detail-block dl:nth-child(2){animation-delay:.06s!important}.detail-block dl:nth-child(3){animation-delay:.12s!important}.detail-block dl:nth-child(4){animation-delay:.18s!important}
.modal-close{transition:transform .3s var(--ease),background .2s}.modal-close:hover{transform:rotate(90deg);background:#e3eef7}
@keyframes fade{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.94)}}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}

@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.service-card,.service-card:hover{transform:none}.scroll-progress{display:none}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.orbit,.pin-main,.pin-small,.service-card,.chip.open i,.modal:not([hidden]) .modal-backdrop,.modal:not([hidden]) .modal-card,.modal:not([hidden]) .detail-block dl{animation:none!important}.topbar,.nav-ind,.to-top,.map-orbit,.orbit,.hero-card-caption,.service-card,.modal-close,.dock a,.dock button{transition:none!important}}

.service-card[data-cat=government]{--accent:#7a5af8}.service-card[data-cat=finance]{--accent:#0e9f9f}.service-card[data-cat=transport]{--accent:#e0662b}.service-card[data-cat=emergency]{--accent:#b54747}.service-card[data-cat=telecom]{--accent:#6252a0}.service-card[data-cat=humanitarian]{--accent:#16834b}

/* أضِف في آخر fx.css: ألوان تمييز الفئات على البطاقات */
.service-card[data-cat=government]{--accent:#7a5af8}.service-card[data-cat=finance]{--accent:#0e9f9f}.service-card[data-cat=transport]{--accent:#e0662b}
.service-card[data-cat=emergency]{--accent:#e5484d}.service-card[data-cat=telecom]{--accent:#d946a8}.service-card[data-cat=humanitarian]{--accent:#b45309}