/* sheep.jp map pins: shadow, selected state (bigger + hopping)
 *
 * Markup (the element your map library positions is the OUTER one; never animate it):
 *   <span class="sheep-pin sheep-pin--l [is-selected]">
 *     <span class="sheep-pin__ground"></span>
 *     <img class="sheep-pin__img" src="pins/svg/pin-red.svg" alt="">
 *   </span>
 * Sizes: --m = 32x41px, --l = 42x54px. The tip of the pin (bottom centre) is the location.
 * Do NOT set `position` on .sheep-pin: Leaflet / MapLibre set it on their own marker element.
 */
:root {
  --sheep-pin-selected-scale: 1.2;   /* "a little bigger" when selected */
  --sheep-pin-hop-height: 16px;
  --sheep-pin-hop-duration: 1s;
}

.sheep-pin { display: block; }
.sheep-pin--m { width: 32px; height: 41px; }
.sheep-pin--l { width: 42px; height: 54px; }

.sheep-pin__img {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;               /* grow / squash from the tip so the location never moves */
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
  transition: transform .18s ease-out;
  will-change: transform;
  pointer-events: none;
}

/* shadow on the ground under the tip (only shown while selected) */
.sheep-pin__ground {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 60%;
  height: 7px;
  margin-left: -30%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
}

/* selected: bigger + hop (raise it above the other pins with zIndexOffset / CSS z-index on the marker) */
.sheep-pin.is-selected .sheep-pin__img {
  transform: scale(var(--sheep-pin-selected-scale));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
  animation: sheep-pin-hop var(--sheep-pin-hop-duration) infinite;
}
.sheep-pin.is-selected .sheep-pin__ground {
  opacity: .3;
  animation: sheep-pin-ground var(--sheep-pin-hop-duration) infinite;
}

@keyframes sheep-pin-hop {
  0%   { transform: translateY(0) scale(var(--sheep-pin-selected-scale));
         animation-timing-function: ease-out; }
  10%  { transform: translateY(0) scale(calc(var(--sheep-pin-selected-scale) * 1.07), calc(var(--sheep-pin-selected-scale) * .93));   /* crouch */
         animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  38%  { transform: translateY(calc(var(--sheep-pin-hop-height) * -1)) scale(calc(var(--sheep-pin-selected-scale) * .96), calc(var(--sheep-pin-selected-scale) * 1.06));  /* top of the hop */
         animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  62%  { transform: translateY(0) scale(calc(var(--sheep-pin-selected-scale) * 1.09), calc(var(--sheep-pin-selected-scale) * .91));  /* landing */
         animation-timing-function: ease-out; }
  72%  { transform: translateY(0) scale(var(--sheep-pin-selected-scale)); }
  100% { transform: translateY(0) scale(var(--sheep-pin-selected-scale)); }
}
@keyframes sheep-pin-ground {
  0%, 10% { opacity: .3;  transform: scale(1); }
  38%     { opacity: .14; transform: scale(.6); }
  62%     { opacity: .34; transform: scale(1.1); }
  72%, 100% { opacity: .3; transform: scale(1); }
}

/* people who turned off motion in their OS: keep the bigger size, skip the hopping */
@media (prefers-reduced-motion: reduce) {
  .sheep-pin.is-selected .sheep-pin__img,
  .sheep-pin.is-selected .sheep-pin__ground { animation: none; }
}