/* === Neo Classic Map – original-look: statisk ljusring + tydlig våg === */
.nc-map-layer{position:absolute; inset:0; z-index:50}

/* ---- Tokens ---- */
:root{
  /* Kärna + mörk kant */
  --dot-size: 12px;                 /* vit kärna */
  --edge-width: 2px;                /* mörk tunn ring runt kärnan */
  --edge-color: rgba(0,0,0,.22);
  --core: #fff;

  /* STATISK ljusring (fylld, ligger still) */
  --static-size: 30px;              /* diameter på fasta ringen */
  --static-alpha: .22;              /* ljusstyrka */
  --static-blur: 6px;

  /* VÅG-ring (kontur som pulserar utåt) */
  --wave-start-size: var(--static-size); /* börjar vid statiska ringens kant */
  --wave-start-offset: 1px;         /* starta precis utanför statiska ringen */
  --wave-end-scale: 1.65;           /* hur stor ringen blir innan den dör ut */
  --wave-border: 2px;               /* ringens tjocklek */
  --wave-alpha: .85;                /* startopacitet på ringen */
  --wave-fill-alpha: .18;           /* svag fyllning innanför ringen */
  --wave-blur: 0px;                 /* skarp ring (0–1px) */
  --wave-glow: 8px;                 /* yttre glow runt vågen */
  --wave-duration: 1.6s;            /* puls-hastighet */
  --wave-ease: cubic-bezier(.4,0,.2,1);

  /* Övrigt */
  --off: .55;                       /* dämpning när inaktiv */
}

/* ---- Punktens grundform ---- */
.neo-dot{
  position:absolute; left:0; top:0;
  transform:translate(-50%,-50%);
  width:var(--dot-size); height:var(--dot-size);
  border-radius:50%;
  background:var(--core);
  box-shadow:0 0 0 var(--edge-width) var(--edge-color);
  pointer-events:auto;
}

/* STATISK ljusring (fylld) – helt centrerad och orörlig */
.neo-dot::before{
  content:"";
  position:absolute; left:50%; top:50%;
  width:var(--static-size); height:var(--static-size);
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(255,255,255,var(--static-alpha));
  filter:blur(var(--static-blur));
  pointer-events:none;
}

/* VÅG-ringen (kontur) – startar strax utanför statiska ringen och pulserar utåt */
.neo-dot::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: calc(var(--wave-start-size) + var(--wave-start-offset));
  height: calc(var(--wave-start-size) + var(--wave-start-offset));
  transform:translate(-50%,-50%) scale(1);
  border-radius:50%;
  /* kontur + mycket svag fyllning så den syns över ljus grå karta */
  background: radial-gradient(circle,
              rgba(255,255,255,var(--wave-fill-alpha)) 0%,
              rgba(255,255,255,0) 65%);
  border: var(--wave-border) solid rgba(255,255,255,var(--wave-alpha));
  filter: blur(var(--wave-blur));
  box-shadow: 0 0 var(--wave-glow) rgba(255,255,255,.35);
  opacity: 0; /* visas av animationen */
  pointer-events: none;
}

/* Endast vågen animeras; kärna + statisk ring står still */
.neo-dot.neo-on::after{
  animation: nc-wave var(--wave-duration) var(--wave-ease) infinite;
}

/* Inaktiv = samma form men dämpad, utan puls */
.neo-dot.neo-off{ opacity: var(--off); }

/* Subtil hover */
.neo-dot:hover{
  box-shadow:
    0 0 0 var(--edge-width) var(--edge-color),
    0 0 6px rgba(255,255,255,.28);
}

/* ---- Animation: vågen expanderar och tonar ut ---- */
@keyframes nc-wave{
  0%{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    border-color:rgba(255,255,255,var(--wave-alpha));
    box-shadow:0 0 var(--wave-glow) rgba(255,255,255,.35);
  }
  55%{
    opacity:.9;     /* håll den stark längre för tydlighet */
  }
  85%{
    opacity:.45;
  }
  100%{
    transform:translate(-50%,-50%) scale(var(--wave-end-scale));
    opacity:0;
    border-color:rgba(255,255,255,0);
    box-shadow:0 0 var(--wave-glow) rgba(255,255,255,0);
  }
}

/* Reduced motion – stäng av vågen */
@media (prefers-reduced-motion: reduce){
  .neo-dot::after{ animation:none !important; }
}

/* (Admin) etikett om du använder labels i previewn */
#nc-map-preview .nc-label{
  position:absolute;
  transform:translate(-50%, calc(-100% - 6px));
  font:12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff; background:rgba(0,0,0,.55);
  padding:2px 6px; border-radius:6px; pointer-events:none;
}

/* Responsiva småjusteringar */
@media (max-width:1024px){
  :root{
    --dot-size:11px;
    --static-size:28px;
    --wave-start-size: var(--static-size);
  }
}
@media (max-width:640px){
  :root{
    --dot-size:10px;
    --static-size:26px;
    --wave-start-size: var(--static-size);
  }
}