/* The label pins (see js/labels.js): a small marker with the place's name
   beside it, laid on .labels (map.css).

   The lettering is the printed map's (EB Garamond: tracked capitals for places,
   italic for areas and water, each over a cream halo). The states follow the
   house rules: they move by transform and opacity only, and none of them is
   told by colour alone. */

.pin {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pin-hit);
  height: var(--pin-hit);
  margin: calc(var(--pin-hit) / -2) 0 0 calc(var(--pin-hit) / -2);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--map-ink);
  font: 400 13.5px/1.25 var(--font-map);
  cursor: pointer;
  pointer-events: auto;
  touch-action: none; /* a drag that starts here turns the model, as one beside it does */
  will-change: transform;
  transition: opacity var(--dur-3) var(--ease-estate), visibility 0s;
  -webkit-tap-highlight-color: transparent;
}

.pin[hidden] {
  display: none;
}

.pin.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur-3) var(--ease-exit), visibility 0s var(--dur-3);
}

.pin.is-blocked {
  opacity: 0.45;
}

.pin:focus-visible {
  outline: none;
}

/* ---- The marker -------------------------------------------------------- */

/* An ink dot ringed in the map's cream, so it reads on paint of any colour. */
.pin__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--pin-dot);
  height: var(--pin-dot);
  margin: calc(var(--pin-dot) / -2) 0 0 calc(var(--pin-dot) / -2);
  border-radius: 50%;
  background: var(--map-ink);
  box-shadow: 0 0 0 1.5px var(--halo), 0 0 0 2.5px rgb(46 32 24 / 0.18), 0 1px 4px 2px rgb(46 32 24 / 0.2);
  transition: transform var(--dur-2) var(--ease-estate);
}

/* An internal name's marker is a ring, not a dot: the two sets tell apart by shape. */
.pin--internal .pin__dot {
  background: var(--halo);
  box-shadow: 0 0 0 1.5px var(--map-ink), 0 0 0 3px var(--halo), 0 1px 4px 3px rgb(46 32 24 / 0.2);
}

/* The selected pin stands out at a glance: a cream disc lifts it off the paint,
   ringed in the estate's accent between cream edges, and a ripple runs out from
   the dot once. The disc is the pin's own, at z-index -1 in the pin's stacking
   context, so it lies under the dot and the name (on the dot itself it would
   cover the dot as soon as the dot's scale made it a stacking context). Both
   are always there, scaled away, so selecting moves no colour. */
.pin::after,
.pin__dot::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}

.pin::after {
  z-index: -1;
  top: 50%;
  left: 50%;
  width: calc(var(--pin-dot) + 20px);
  height: calc(var(--pin-dot) + 20px);
  margin: calc(var(--pin-dot) / -2 - 10px) 0 0 calc(var(--pin-dot) / -2 - 10px);
  background: rgb(247 241 227 / 0.7);
  box-shadow: inset 0 0 0 2.5px var(--accent), inset 0 0 0 3.5px var(--halo), 0 0 0 1px var(--halo),
    0 3px 12px 1px rgb(46 32 24 / 0.3);
  transform: scale(0.4);
  transition: opacity var(--dur-2) var(--ease-estate), transform var(--dur-3) var(--ease-estate);
}

.pin__dot::before {
  inset: -10px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 3px var(--halo);
}

@media (hover: hover) {
  .pin:hover .pin__dot {
    transform: scale(1.3);
  }
}

.pin.is-highlighted .pin__dot {
  transform: scale(1.3);
}

.pin:focus-visible .pin__dot {
  box-shadow: var(--focus-ring);
  transform: scale(1.3);
}

.pin.is-selected .pin__dot {
  background: var(--accent-text);
  transform: scale(1.25);
}

.pin--internal.is-selected .pin__dot {
  background: var(--halo);
  box-shadow: 0 0 0 1.5px var(--accent-text), 0 0 0 3px var(--halo), 0 1px 4px 3px rgb(46 32 24 / 0.2);
}

.pin.is-selected::after {
  opacity: 1;
  transform: scale(1);
}

.pin.is-selected .pin__dot::before {
  animation: pin-ripple var(--dur-6) var(--ease-rise) 1;
}

@keyframes pin-ripple {
  from {
    opacity: 0.8;
    transform: scale(0.9);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* A short leader from the pin up to its name, as on the printed map. */
.pin::before {
  content: "";
  position: absolute;
  bottom: calc(50% + 6px);
  left: calc(50% - 0.5px);
  width: 1px;
  height: 8px;
  background: var(--map-ink);
  box-shadow: 0 0 2px 1px var(--halo);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-estate);
}

/* ---- The name ---------------------------------------------------------- */

/* labels.js decides where a name sits and hands over its offset from the pin
   (--dx, --dy: the name's top left corner, measured from the pin's centre). */
.pin__name {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1px 4px 1px calc(4px + 0.17em); /* the extra left pad re-centres tracked text */
  color: var(--map-ink);
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: 0.17em;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 3.5px var(--halo);
  paint-order: stroke fill;
  text-shadow: var(--halo-glow);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--dx, -50%), calc(var(--dy, -40px) + 4px));
  transition: opacity var(--dur-2) var(--ease-estate), transform var(--dur-3) var(--ease-estate);
}

/* A long place name is stacked on two lines (see nameLines in label-data.js),
   set a little tighter than running text so the pair reads as one name. */
.pin__line {
  display: block;
  line-height: 1.14;
}

.pin--area .pin__name {
  padding-left: calc(4px + 0.3em);
  color: var(--map-ink-area);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.3em;
}

.pin--water .pin__name {
  padding-left: calc(4px + 0.19em);
  color: var(--map-ink-water);
  font-size: 18px;
  font-style: italic;
  letter-spacing: 0.19em;
}

/* The leader is only drawn for a name straight above or below its pin; a name
   beside or diagonally off the pin already touches it. */
.pin.is-above::before,
.pin.is-below::before {
  opacity: 0.85;
}

.pin.is-below::before {
  top: calc(50% + 6px);
  bottom: auto;
}

/* A selected pin's disc reaches up to its name, so a leader would only cross it. */
.pin.is-selected::before {
  opacity: 0;
}

/* A name on show is part of its pin's button: it can be pointed at and picked. */
.pin.is-named .pin__name {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--dx, -50%), var(--dy, -40px));
}

/* The selected name: the accent's ink, and a hairline drawn under it. */
.pin__name::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -1px;
  left: 4px;
  height: 1px;
  background: var(--accent-text);
  box-shadow: 0 0 0 1px var(--halo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-4) var(--ease-estate);
}

.pin.is-selected .pin__name {
  color: var(--accent-text);
}

.pin.is-selected .pin__name::after {
  transform: scaleX(1);
}

/* ---- Entrance ----------------------------------------------------------

   When pins come on show (the first time, and when the names switch brings a
   set in) each marker grows in and its name rises into place, one after
   another: labels.js sets --enter-delay per pin. The page may hold the whole
   entrance back by setting --pins-enter-delay on .labels. Reduced motion
   never starts it. */

.pin.is-entering .pin__dot,
.pin.is-entering .pin__name,
.pin.is-entering::before {
  animation: var(--dur-5) var(--ease-rise) calc(var(--pins-enter-delay, 0ms) + var(--enter-delay, 0ms)) backwards;
}

.pin.is-entering .pin__dot {
  animation-name: pin-dot-in;
  animation-duration: var(--dur-4);
}

.pin.is-entering .pin__name {
  animation-name: pin-name-in;
}

.pin.is-entering::before {
  animation-name: pin-leader-in;
}

@keyframes pin-dot-in {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes pin-name-in {
  from {
    opacity: 0;
    transform: translate(var(--dx, -50%), calc(var(--dy, -40px) + 7px));
  }
}

@keyframes pin-leader-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .pin::after {
    background: var(--halo);
  }
}

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 640px) {
  .pin__name {
    font-size: 12.5px;
  }

  .pin--area .pin__name {
    font-size: 14px;
  }

  .pin--water .pin__name {
    font-size: 16px;
  }
}