/* Portalmar Map Block (scoped styles) */
.wp-block-portalmar-map.portalmar-map{
  --portalmar-ink: #312019;
  --portalmar-halo-ink: #53443D;
  --portalmar-ease: cubic-bezier(.2,.9,.2,1);

  /* Optional tuning (SVG viewBox units / numeric multipliers) */
  --portalmar-pin-scale: 1;
  --portalmar-halo-radius-mult: 1;
  --portalmar-halo-offset-x: 0;
  --portalmar-halo-offset-y: 0;

  background: transparent;
  padding: 24px 12px;
  overflow: hidden;
}

.wp-block-portalmar-map.portalmar-map svg{
  width: 100%;
  height: auto;
  display: block;
}

/* ===== PIN animation =====
   By default (no JS), the SVG pin stays visible.
   When JS prepares the block it sets data-portalmar-prepared="1",
   and only then we hide + animate the pin. */
.wp-block-portalmar-map.portalmar-map[data-portalmar-prepared="1"] #portalmar-pin,
.wp-block-portalmar-map.portalmar-map[data-portalmar-prepared="1"] .portalmar-pin{
  opacity: 0;
  transform: translateY(-28px) scale(var(--portalmar-pin-scale));
  transform-box: fill-box;
  /* Scale around the lower body so it stays visually aligned with the halo placement */
  transform-origin: 50% 87%;
  will-change: transform, opacity;
}

.wp-block-portalmar-map.portalmar-map[data-portalmar-prepared="1"] #portalmar-pin.is-visible,
.wp-block-portalmar-map.portalmar-map[data-portalmar-prepared="1"] .portalmar-pin.is-visible{
  animation: portalmarPinDrop 900ms var(--portalmar-ease) both;
}

@keyframes portalmarPinDrop{
  0%   { transform: translateY(-28px) scale(var(--portalmar-pin-scale)); opacity: 0; }
  55%  { transform: translateY(4px)   scale(var(--portalmar-pin-scale)); opacity: 1; }
  78%  { transform: translateY(-3px)  scale(var(--portalmar-pin-scale)); opacity: 1; }
  100% { transform: translateY(0)     scale(var(--portalmar-pin-scale)); opacity: 1; }
}

/* ===== Halo loop around the pin ===== */
.wp-block-portalmar-map.portalmar-map .portalmar-halo{
  stroke: var(--portalmar-halo-ink);
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.wp-block-portalmar-map.portalmar-map .portalmar-halo.is-active{
  opacity: .9;
  /* 25% faster than v7 (2800ms -> 2100ms) */
  animation: portalmarHalo 2100ms ease-out infinite;
}

@keyframes portalmarHalo{
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Reduced motion: keep things visible but stop movement */
@media (prefers-reduced-motion: reduce){
  .wp-block-portalmar-map.portalmar-map #portalmar-pin,
  .wp-block-portalmar-map.portalmar-map .portalmar-pin{
    opacity: 1 !important;
    transform: scale(var(--portalmar-pin-scale)) !important;
    animation: none !important;
  }

  .wp-block-portalmar-map.portalmar-map .portalmar-halo.is-active{
    animation: none !important;
    opacity: .6 !important;
    transform: scale(1) !important;
  }
}