/* Nobal Sanat — where the machines run. Scoped under .nsc-mp. v3.0.0
   The band is the map and nothing else: no padding above or below it, no
   heading block, no framed panel. The caption and the country list sit on the
   map itself, in the empty ocean on the near side. */

.nsc-mp{
  --mp-bg:#111418;
  --mp-line:#C3CCD6;
  --mp-dim:#7C8794;
  --mp-acc:#FFC61E;
  /* the dot colours, as bare rgb triples: the canvas reads these, so the map
     is recoloured here and nowhere else */
  --mp-sea:122,134,148;
  --mp-land:163,176,190;
  --mp-hi:231,236,242;
  --mp-lit:255,198,30;
  position:relative; isolation:isolate; overflow:hidden;
  margin:0; padding:0;
  background:
    radial-gradient(90% 120% at 62% 30%, rgba(62,72,86,.6) 0%, rgba(17,20,24,0) 64%),
    var(--mp-bg);
  color:var(--mp-line);
  font-family:"Vazirmatn","IRANSans","Iranian Sans",Tahoma,sans-serif;
  line-height:1.7;
}
.nsc-mp[data-lang="en"]{font-family:"IBM Plex Sans",system-ui,sans-serif}
.nsc-mp *,.nsc-mp *::before,.nsc-mp *::after{box-sizing:border-box}

/* ------------------------------------------------------------------ stage */
.nsc-mp__stage{position:relative; display:block; width:100%}
.nsc-mp__canvas{display:block; width:100%; height:auto}

/* the video-wall the map is shown on */
.nsc-mp__grid{
  position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.45;
  background:
    repeating-linear-gradient(to right, rgba(200,212,224,.09) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(200,212,224,.09) 0 1px, transparent 1px 84px);
  mask-image:radial-gradient(110% 100% at 50% 45%, #000 45%, transparent 100%);
}

/* a scrim down the edge the caption and the list sit on, so words never have
   to fight the dots underneath them */
.nsc-mp__stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(to left, rgba(14,17,21,.94) 0%, rgba(14,17,21,.64) 14%, rgba(14,17,21,0) 36%);
}
.nsc-mp[data-lang="en"] .nsc-mp__stage::before{
  background:linear-gradient(to right, rgba(14,17,21,.94) 0%, rgba(14,17,21,.64) 14%, rgba(14,17,21,0) 36%);
}

/* one slow pass of light across the panel, the way a big screen refreshes */
.nsc-mp__stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:linear-gradient(105deg, transparent 38%, rgba(226,234,242,.10) 50%, transparent 62%);
  mix-blend-mode:screen;
  animation:nsc-mp-sweep 11s linear infinite;
}
@keyframes nsc-mp-sweep{ from{transform:translateX(-70%)} to{transform:translateX(70%)} }

.nsc-mp__pins{position:absolute; inset:0; z-index:3; pointer-events:none}

/* --------------------------------------------------------------- the pins */
.nsc-mp__pin{
  position:absolute; left:var(--x); top:var(--y);
  width:0; height:0; padding:0; margin:0; border:0; background:none;
  pointer-events:auto; cursor:pointer; appearance:none;
  color:var(--mp-acc);
}
.nsc-mp__pin:focus-visible{outline:none}

.nsc-mp__dot{
  position:absolute; left:0; top:0;
  width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--mp-acc);
  box-shadow:0 0 0 2px rgba(255,198,30,.18), 0 0 12px 2px rgba(255,198,30,.45);
  transition:box-shadow .25s ease;
}

/* Radar: only the country being named pings. Three rings out of one dot at a
   time reads as a signal; three dots pinging at once reads as decoration. */
.nsc-mp__ring{
  position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px;
  border:1px solid var(--mp-acc); border-radius:50%;
  opacity:0; transform:scale(.3);
}
.nsc-mp__pin.is-on .nsc-mp__ring{
  animation:nsc-mp-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite;
  animation-delay:var(--d,0s);
}
.nsc-mp__ring:nth-of-type(2){--d:.8s}
.nsc-mp__ring:nth-of-type(3){--d:1.6s}
@keyframes nsc-mp-ping{
  0%{opacity:0; transform:scale(.3)}
  12%{opacity:.9}
  100%{opacity:0; transform:scale(8)}
}

/* the thin line out to the label */
.nsc-mp__leader{
  position:absolute; left:0; top:0; height:1px; width:var(--len,80px);
  transform-origin:0 50%; transform:rotate(var(--ang,0deg));
  background:linear-gradient(to right, rgba(255,198,30,.75), rgba(255,198,30,.18));
  opacity:0; transition:opacity .28s ease;
}

/* the label itself: a plate that opens out of nothing */
.nsc-mp__chip{
  position:absolute; left:var(--dx,0px); top:var(--dy,0px);
  transform:translate(-50%,-50%) scaleX(.2);
  display:flex; align-items:baseline; gap:7px; white-space:nowrap;
  padding:7px 12px; border-radius:4px;
  border:1px solid rgba(255,198,30,.55);
  background:rgba(22,26,32,.95);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  color:#F2F7FC; font-size:.86rem; font-weight:700; line-height:1;
  opacity:0; transition:opacity .18s ease, transform .26s cubic-bezier(.2,.8,.25,1);
}
.nsc-mp__chip i{font-style:normal; font-size:.72rem; font-weight:500; color:var(--mp-acc); opacity:.9}

.nsc-mp__pin.is-on .nsc-mp__chip{opacity:1; transform:translate(-50%,-50%) scaleX(1)}
.nsc-mp__pin.is-on .nsc-mp__leader{opacity:1}
.nsc-mp__pin.is-on .nsc-mp__dot{box-shadow:0 0 0 3px rgba(255,198,30,.3), 0 0 22px 4px rgba(255,198,30,.7)}

/* -------------------------------------------------- caption and the list */
.nsc-mp__cap{
  position:absolute; z-index:4; margin:0;
  inset-block-start:clamp(18px,3.2vw,40px);
  inset-inline-start:clamp(18px,4vw,60px);
  display:flex; align-items:center; gap:12px;
  color:#E7ECF2; font-size:clamp(1.05rem,2vw,1.6rem); font-weight:800; line-height:1.3;
  text-shadow:0 2px 18px rgba(10,12,16,.9);
}
.nsc-mp__cap::before{
  content:""; width:clamp(22px,3vw,42px); height:2px; flex:none;
  background:var(--mp-acc);
}

.nsc-mp__list{
  position:absolute; z-index:4; margin:0; padding:0; list-style:none;
  inset-block-end:clamp(16px,3vw,38px);
  inset-inline-start:clamp(18px,4vw,60px);
  display:flex; flex-direction:column; gap:2px;
  text-shadow:0 2px 14px rgba(10,12,16,.9);
}
.nsc-mp__list button{
  display:flex; align-items:center; gap:9px;
  padding:5px 2px; border:0; background:none; cursor:pointer; appearance:none;
  color:#C3CCD6; font:inherit; font-size:.95rem; font-weight:600; line-height:1.5;
  transition:color .2s ease;
}
.nsc-mp__list button::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:rgba(255,198,30,.35); transition:background .2s ease, box-shadow .2s ease;
}
.nsc-mp__list button span{font-size:.78rem; font-weight:500; color:#8A95A2}
.nsc-mp__list button:hover,.nsc-mp__list button.is-on{color:#FFFFFF}
.nsc-mp__list button.is-on::before{background:var(--mp-acc); box-shadow:0 0 10px rgba(255,198,30,.7)}

/* On a phone the map is a couple of hundred pixels tall: a label would cover
   half the Gulf, and text sitting on it would be unreadable. Caption and list
   step out of the map and stack around it instead. */
@media (max-width:760px){
  .nsc-mp{padding-block:22px 24px}
  .nsc-mp__chip,.nsc-mp__leader{display:none}
  .nsc-mp__dot{width:6px; height:6px; margin:-3px 0 0 -3px}
  .nsc-mp__ring{width:9px; height:9px; margin:-4.5px 0 0 -4.5px}
  @keyframes nsc-mp-ping{
    0%{opacity:0; transform:scale(.3)}
    12%{opacity:.9}
    100%{opacity:0; transform:scale(5)}
  }
  .nsc-mp__cap,.nsc-mp__list{position:static; padding-inline:18px}
  .nsc-mp__cap{margin-bottom:14px}
  .nsc-mp__list{margin-top:12px; flex-direction:row; flex-wrap:wrap; gap:6px 20px}
}

@media (prefers-reduced-motion:reduce){
  .nsc-mp__stage::after{animation:none; opacity:.3}
  .nsc-mp__pin.is-on .nsc-mp__ring{animation:none}
  .nsc-mp__pin.is-on .nsc-mp__chip{transform:translate(-50%,-50%)}
}