/* =========================================================================
   Presence map — «حاضرون في جميع مناطق المملكة» (home) — 13 administrative regions
   ========================================================================= */
.presence{overflow:hidden;isolation:isolate}
.presence .container{position:relative;z-index:1}
.p-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.12fr);grid-template-areas:"head map" "body map";column-gap:clamp(32px,5vw,84px);row-gap:6px;align-items:start}
.p-head{grid-area:head;align-self:end}
.p-head .lead{max-width:560px}
.p-map{grid-area:map;align-self:center;position:relative}
.p-body{grid-area:body}

/* ---- map frame ---- */
.p-frame{position:relative;border-radius:34px;padding:clamp(14px,2.6vw,34px) clamp(10px,2vw,26px) clamp(46px,5vw,58px);
  background:radial-gradient(85% 70% at 48% 46%,rgba(58,215,5,.13),transparent 66%),linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 50px 110px -60px rgba(0,0,0,.85)}
.p-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background-image:radial-gradient(rgba(179,215,7,.22) 1px,transparent 1.5px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent);opacity:.55}
.p-frame::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--pa,0deg),transparent 0 62%,rgba(179,215,7,.7) 75%,rgba(0,198,184,.6) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  opacity:0;transition:opacity 1.2s ease 1.4s}
@property --pa{syntax:"<angle>";inherits:false;initial-value:0deg}
.presence.is-on .p-frame::after,.no-js .presence .p-frame::after{opacity:1;animation:pSpin 9s linear infinite}
@keyframes pSpin{to{--pa:360deg}}

.pm-svg{position:relative;width:100%;height:auto;overflow:visible}

/* regions */
.pm-base{fill:rgba(255,255,255,.035);stroke:rgba(207,218,215,.24);stroke-width:1.2;stroke-linejoin:round;cursor:pointer;transition:fill .3s ease}
.pm-base:hover{fill:rgba(255,255,255,.08)}
.pm-lits{pointer-events:none}
.pm-lit{fill-opacity:.24;stroke-width:1.8;stroke-linejoin:round;opacity:0;transition:opacity .8s var(--ease-out),fill-opacity .45s ease,stroke-width .45s ease;transition-delay:calc(.2s + var(--o) * .1s),0s,0s}
.presence.is-on .pm-lit,.no-js .presence .pm-lit{opacity:1}
.pm-lit.is-hot{fill-opacity:.6;stroke-width:3.2}

/* sonar sweep clipped to the Kingdom */
.pm-sonar{pointer-events:none}
.pm-sonar circle{transform-box:fill-box;transform-origin:center;transform:scale(.04);opacity:0}
.presence.is-on .pm-sonar circle{animation:pSonar 6.4s cubic-bezier(.3,.6,.4,1) 1.4s infinite}
.presence.is-on .pm-sonar circle+circle{animation-delay:4.6s}
@keyframes pSonar{0%{transform:scale(.04);opacity:0}12%{opacity:1}80%{opacity:.5}100%{transform:scale(1);opacity:0}}

/* network */
.pm-net{pointer-events:none}
.pm-link{fill:none;stroke:rgba(179,215,7,.42);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out);transition-delay:calc(1.55s + var(--k) * .035s)}
.presence.is-on .pm-link,.no-js .presence .pm-link{stroke-dashoffset:0}
.pm-flow{fill:none;stroke:#EFFFB8;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.07 .93;stroke-dashoffset:1;opacity:0}
.presence.is-on .pm-flow{animation:pFlow var(--fd,3s) linear calc(2.7s + var(--k) * .16s) infinite}
@keyframes pFlow{0%{stroke-dashoffset:1;opacity:0}8%{opacity:.95}88%{opacity:.95}100%{stroke-dashoffset:0;opacity:0}}

/* pins */
.pm-pins{pointer-events:none}
.pm-pin{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .7s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(.35s + var(--o) * .1s)}
.presence.is-on .pm-pin,.no-js .presence .pm-pin{transform:scale(1)}
.pm-dot{fill:#F2FFD6;stroke:#0B2724;stroke-width:2.2;transition:fill .3s ease}
.pm-halo{fill:rgba(179,215,7,.3)}
.pm-ring{fill:none;stroke:#B3D707;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0}
.presence.is-on .pm-ring{animation:pRing 2.6s ease-out calc(1.2s + var(--o) * .2s) infinite}
@keyframes pRing{0%{transform:scale(.35);opacity:.95}100%{transform:scale(1.7);opacity:0}}
.pm-pin.is-hot{transform:scale(1.45)!important;transition-delay:0s}
.pm-pin.is-hot .pm-dot{fill:#fff}
.pm-pin.is-hot .pm-halo{fill:rgba(179,215,7,.55)}

/* labels */
.pm-lbls{pointer-events:none}
.pm-lbl{font-family:var(--f-display);font-size:19px;font-weight:600;fill:rgba(231,239,237,.86);paint-order:stroke;stroke:rgba(11,39,36,.92);stroke-width:5px;stroke-linejoin:round;opacity:0;transition:opacity .6s ease,fill .3s ease;transition-delay:calc(.55s + var(--o) * .1s),0s}
.presence.is-on .pm-lbl,.no-js .presence .pm-lbl{opacity:1}
.pm-lbl.is-hot{fill:#D9FF6A;transition-delay:0s}

/* HUD, tooltip, live line */
.p-hud{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;font-size:.78rem;letter-spacing:.06em;color:var(--on-dark-3);pointer-events:none}
.p-hud--a{top:20px;left:22px;font-family:"Poppins",var(--f-body);font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid rgba(179,215,7,.28);background:rgba(6,28,25,.55);direction:ltr}
.p-hud--a b{color:#D9FF6A;font-size:.95rem}
.p-hud--a i{width:7px;height:7px;border-radius:50%;background:#B3D707;box-shadow:0 0 0 0 rgba(179,215,7,.6);animation:pBeat 2s ease-out infinite}
@keyframes pBeat{0%{box-shadow:0 0 0 0 rgba(179,215,7,.6)}100%{box-shadow:0 0 0 10px rgba(179,215,7,0)}}
.p-tip{position:absolute;z-index:3;left:0;top:0;transform:translate(-50%,calc(-100% - 14px)) scale(.92);padding:6px 12px;border-radius:10px;background:#fff;color:var(--em-950);font-family:var(--f-display);font-size:.86rem;font-weight:700;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.p-tip.is-on{opacity:1;transform:translate(-50%,calc(-100% - 14px)) scale(1)}
.p-live{position:absolute;z-index:2;left:20px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(6,28,25,.72);border:1px solid rgba(179,215,7,.26);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--on-dark-2);font-size:.92rem;line-height:1.4;pointer-events:none}
.p-live b{color:#fff;font-family:var(--f-display);font-weight:600;display:inline-block}
.p-live b.is-swap{animation:pSwap .55s var(--ease-out)}
@keyframes pSwap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.p-live__dot{width:8px;height:8px;border-radius:50%;background:#3AD705;animation:pBeat 1.6s ease-out infinite}

/* ---- KPIs ---- */
.p-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0 22px}
.p-kpi{position:relative;padding:16px 16px 14px;border-radius:18px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border:1px solid var(--line-dark);overflow:hidden}
.p-kpi .icon{width:18px;height:18px;color:var(--gold-400);margin-bottom:6px}
.p-kpi b{display:block;font-family:var(--f-num);font-size:clamp(2rem,3.2vw,2.6rem);font-weight:600;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;margin-bottom:6px;direction:ltr;text-align:right}
.p-kpi b .affix{font-size:.7em}
.p-kpi > span{display:block;font-size:.86rem;line-height:1.5;color:var(--on-dark-3)}

/* ---- region chips ---- */
.p-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.p-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px 6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:var(--on-dark-3);font-size:.88rem;line-height:1.5;opacity:.45;transition:opacity .5s ease,color .3s ease,background .3s ease,border-color .3s ease,transform .3s var(--ease-out);transition-delay:calc(.35s + var(--o) * .1s),0s,0s,0s,0s}
.p-chip .icon{width:14px;height:14px;color:var(--gold-400);transition:color .3s ease}
.presence.is-on .p-chip,.no-js .presence .p-chip{opacity:1;color:var(--on-dark-2);border-color:rgba(179,215,7,.26)}
.p-chip:hover,.p-chip:focus-visible,.p-chip.is-hot{background:var(--gold-btn);color:var(--em-950)!important;border-color:transparent!important;transform:translateY(-2px);transition-delay:0s}
.p-chip:hover .icon,.p-chip:focus-visible .icon,.p-chip.is-hot .icon{color:var(--em-950)}

/* ---- expansion journey ---- */
.p-journey{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 28px;padding:0}
.p-journey::before,.p-journey::after{content:"";position:absolute;top:5px;right:6px;left:calc(33.333% - 20px);height:2px;border-radius:2px;background:rgba(255,255,255,.12)}
.p-journey::after{background:linear-gradient(270deg,#B3D707,#3AD705 50%,#00C6B8);transform:scaleX(0);transform-origin:right;transition:transform 1.8s var(--ease-out) .9s}
.presence.is-on .p-journey::after,.no-js .presence .p-journey::after{transform:scaleX(1)}
.p-journey li{position:relative;padding-top:24px}
.p-journey li::before{content:"";position:absolute;top:0;right:0;width:12px;height:12px;border-radius:50%;background:var(--em-950);border:2px solid #3AD705;z-index:1}
.p-journey li.is-now::before{background:#B3D707;border-color:#B3D707;box-shadow:0 0 0 0 rgba(179,215,7,.6);animation:pBeat 2s ease-out infinite}
.p-journey b{display:block;font-family:var(--f-num);font-size:1.55rem;font-weight:600;line-height:1.1;color:#fff}
.p-journey li.is-now b{font-family:var(--f-display);font-size:1.25rem;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.p-journey span{display:block;font-size:.88rem;line-height:1.55;color:var(--on-dark-3);margin-top:4px}

/* ---- responsive ---- */
@media (max-width:980px){
  .p-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "body";row-gap:18px}
  .p-map{max-width:640px;width:100%;margin-inline:auto}
}
@media (max-width:620px){
  .p-frame{border-radius:24px;padding:46px 6px 50px}
  .pm-lbl{display:none}
  .p-hud--a{top:12px;left:12px}
  .p-live{left:auto;right:12px;bottom:12px;font-size:.84rem;padding:6px 13px}
  .p-kpis{gap:8px}
  .p-kpi{padding:12px 10px 10px;border-radius:14px}
  .p-kpi > span{font-size:.78rem}
  .p-chip{font-size:.82rem;padding:5px 11px 5px 10px}
  .p-journey{gap:8px}
  .p-journey span{font-size:.8rem}
}