/* fx.css · sell/map-pins, pins drop onto a map one by one · owner: Lizzy East · all rights reserved */

/* An inline SVG map. Every pin is a real link (an SVG <a> with its own name), and
   its visible label shows on hover and on keyboard focus. Unanimated, every pin is
   simply in place. Still to come with motion allowed, the pins wait above the map
   and drop in one after another, landing with a small bounce, once. All timing
   follows --fx-dur, so a pin reached by keyboard before it drops lands at once. */
[data-fx~="sell/map-pins"] {
  --fx-lead: calc(var(--fx-delay) + var(--fx-i) * var(--fx-stagger));
  margin: 0;
}
[data-fx~="sell/map-pins"] > svg { display: block; width: 100%; height: auto; border-radius: var(--fx-map-radius, 18px); }
[data-fx~="sell/map-pins"] a { cursor: pointer; }
[data-fx~="sell/map-pins"] a:focus { outline: none; }
[data-fx~="sell/map-pins"] a:focus-visible { outline: 3px solid var(--fx-pin-ring, #2340ff); outline-offset: 4px; }
[data-fx~="sell/map-pins"] [data-fx-shadow] { transform-box: fill-box; transform-origin: 50% 50%; }
/* On a phone the map is small, so the pins (and their labels) grow about their tips,
   and each carries a clear circle, so every pin is a comfortable tap. */
@media (max-width: 40rem) {
  [data-fx~="sell/map-pins"] [data-fx-pin] { scale: var(--fx-pin-phone, 1.8); }
}
[data-fx~="sell/map-pins"] [data-fx-label] { opacity: 0; }
[data-fx~="sell/map-pins"] a:focus-visible [data-fx-label] { opacity: 1; }
@media (hover: hover) {
  [data-fx~="sell/map-pins"] a:hover [data-fx-label] { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  [data-fx~="sell/map-pins"] [data-fx-label] { transition: opacity 180ms var(--fx-ease); }
}

/* Each pin's place in the drop order (up to twelve pins). */
[data-fx~="sell/map-pins"] a:nth-child(2) > * { --fx-i: 1; }
[data-fx~="sell/map-pins"] a:nth-child(3) > * { --fx-i: 2; }
[data-fx~="sell/map-pins"] a:nth-child(4) > * { --fx-i: 3; }
[data-fx~="sell/map-pins"] a:nth-child(5) > * { --fx-i: 4; }
[data-fx~="sell/map-pins"] a:nth-child(6) > * { --fx-i: 5; }
[data-fx~="sell/map-pins"] a:nth-child(7) > * { --fx-i: 6; }
[data-fx~="sell/map-pins"] a:nth-child(8) > * { --fx-i: 7; }
[data-fx~="sell/map-pins"] a:nth-child(9) > * { --fx-i: 8; }
[data-fx~="sell/map-pins"] a:nth-child(10) > * { --fx-i: 9; }
[data-fx~="sell/map-pins"] a:nth-child(11) > * { --fx-i: 10; }
[data-fx~="sell/map-pins"] a:nth-child(12) > * { --fx-i: 11; }

html.fx-armed [data-fx~="sell/map-pins"].is-pending [data-fx-pin] {
  opacity: 0;
  translate: 0 calc(var(--fx-pin-drop, 90px) * -1);
}
html.fx-armed [data-fx~="sell/map-pins"].is-pending [data-fx-shadow] {
  opacity: 0;
  scale: 0.3;
}
html.fx-armed [data-fx~="sell/map-pins"].is-in [data-fx-pin] {
  transition: translate var(--fx-pin-dur, var(--fx-dur)) cubic-bezier(0.3, 1.45, 0.55, 1), opacity calc(var(--fx-dur) * 0.3) linear;
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-i) * var(--fx-pin-stagger, calc(var(--fx-dur) * 0.2)));
}
html.fx-armed [data-fx~="sell/map-pins"].is-in [data-fx-shadow] {
  transition: scale var(--fx-pin-dur, var(--fx-dur)) var(--fx-ease), opacity var(--fx-pin-dur, var(--fx-dur)) var(--fx-ease);
  transition-delay: calc(var(--fx-lead, 0ms) + var(--fx-i) * var(--fx-pin-stagger, calc(var(--fx-dur) * 0.2)));
}