/* Pin bianco dell'immobile con il popup dell'indirizzo (components/map_pin.html). La punta sta sul punto: left/top 50% sulla
   foto della mappa, 0 nei segnaposto di misura zero di Leaflet e MapLibre. Comportamento in js/detail.js. */

@layer components {
  .map-pin {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    z-index: 2;
    translate: -50% -100%;
    display: grid;
    justify-items: center;
    pointer-events: none;
  }
  .leaflet-marker-icon .map-pin, .maplibregl-marker .map-pin { --x: 0; --y: 0; }

  .map-pin-btn {
    width: 46px;
    height: 58px;
    padding: 0;
    border: 0;
    background: none;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 8px 14px rgb(16 41 31 / .35));
    transform-origin: 50% 100%;
    transition: scale .25s var(--ease-spring);

    &:hover { scale: 1.08; }
    &:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
    & svg { display: block; width: 100%; height: 100%; }
  }
  .map-pin-body { fill: var(--ground); stroke: rgb(16 41 31 / .12); stroke-width: 1; }
  .map-pin-home { fill: var(--accent); }

  .map-pin-pop {
    position: relative;
    display: grid;
    gap: 1px;
    width: max-content;
    max-width: 240px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--ground);
    color: var(--ink);
    font: 400 13px/1.3 var(--font);
    text-align: center;
    box-shadow: 0 14px 32px rgb(16 41 31 / .22);
    pointer-events: auto;
    transform-origin: 50% 100%;
    transition: opacity .2s var(--ease), scale .25s var(--ease-spring), translate .25s var(--ease-spring);

    &::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; translate: -50% 0; rotate: 45deg; background: inherit; border-radius: 2px; }
    & b { font-size: var(--step-small); font-weight: 600; }
    & span { color: var(--ink-soft); }
  }
  .map-pin.closed .map-pin-pop { opacity: 0; translate: 0 6px; scale: .9; pointer-events: none; }

  .map-pin-pulse {
    position: absolute;
    left: 50%;
    bottom: -9px;
    z-index: -1;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 35%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .map-pin-pulse { animation: map-pin-pulse 2s ease-out infinite; }
    .map-pin.enter .map-pin-btn { animation: map-pin-drop .7s var(--ease-spring) .2s both; }
    .map-pin.enter .map-pin-pop { animation: map-pin-pop .45s var(--ease) .75s both; }
  }
  @keyframes map-pin-pulse { from { scale: .6; opacity: 1; } to { scale: 3.4; opacity: 0; } }
  @keyframes map-pin-drop { from { translate: 0 -40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes map-pin-pop { from { translate: 0 8px; scale: .9; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
}