/* Amenities & attractions — scroll-triggered motion.
   Every selector is scoped under #amenities so nothing leaks into the rest of the site.
   Animation lives inside @media (prefers-reduced-motion: no-preference); with reduce,
   the section renders in its final, fully-readable state. */

#amenities {
  /* Category accents (fallbacks; property-landing may override these tokens). */
  --cat-education: #3f7cc4;
  --cat-medical: #d4564f;
  --cat-lifestyle: #2fa37a;
  --cat-hotels: #b8863b;
  --amenities-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-pin accent so hover/focus can brighten the category colour. */
#amenities .map__pin[data-category="education"] { --pin-accent: var(--cat-education); }
#amenities .map__pin[data-category="medical"]   { --pin-accent: var(--cat-medical); }
#amenities .map__pin[data-category="lifestyle"] { --pin-accent: var(--cat-lifestyle); }
#amenities .map__pin[data-category="hotels"]    { --pin-accent: var(--cat-hotels); }

#amenities .legend__item[data-category="education"] { --pin-accent: var(--cat-education); }
#amenities .legend__item[data-category="medical"]   { --pin-accent: var(--cat-medical); }
#amenities .legend__item[data-category="lifestyle"] { --pin-accent: var(--cat-lifestyle); }
#amenities .legend__item[data-category="hotels"]    { --pin-accent: var(--cat-hotels); }

/* Filtering (interaction, motion-independent — always applied). */
#amenities .legend__item { cursor: pointer; }
#amenities .legend__item[aria-pressed="false"] { opacity: 0.4; }
#amenities .map__pin.is-hidden {
  opacity: 0.12;
  pointer-events: none;
  filter: grayscale(1);
}

/* Hover / focus callout — reveal the label, always available. */
#amenities .map__pin .pin__label {
  opacity: 0;
  visibility: hidden;
}
#amenities .map__pin:hover .pin__label,
#amenities .map__pin:focus-within .pin__label,
#amenities .map__pin.is-active .pin__label {
  opacity: 1;
  visibility: visible;
}
#amenities .map__pin:focus-visible { outline: 2px solid var(--pin-accent, currentColor); outline-offset: 3px; }

/* ---- Animated behaviour: only when the visitor allows motion ---- */
@media (prefers-reduced-motion: no-preference) {

  /* Initial hidden/offset states (before #amenities gains .is-revealed). */
  #amenities #map-base {
    opacity: 0;
    transform: scale(0.6);
    transform-origin: center center; /* expands outward from the hub */
    transition: opacity 0.7s var(--amenities-ease), transform 0.9s var(--amenities-ease);
  }
  #amenities #hub-tower {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
    transition: opacity 0.5s var(--amenities-ease), transform 0.6s var(--amenities-ease);
  }
  #amenities .map__pin {
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transition:
      opacity 0.5s var(--amenities-ease),
      transform 0.5s var(--amenities-ease),
      filter 0.25s ease;
    /* --pin-index is set per pin in motion.js, nearest-first (by data-distance). */
    transition-delay: calc(0.35s + var(--pin-index, 0) * 0.09s);
  }
  #amenities .pin__label {
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  /* Revealed states. Hub settles first, then rings expand, then pins stagger in. */
  #amenities.is-revealed #map-base { opacity: 1; transform: scale(1); transition-delay: 0.15s; }
  #amenities.is-revealed #hub-tower { opacity: 1; transform: translateY(0) scale(1); }
  #amenities.is-revealed .map__pin { opacity: 1; transform: translateY(0) scale(1); }
  #amenities.is-revealed .map__pin.is-hidden { opacity: 0.12; }

  /* Gentle hover lift. */
  #amenities .map__pin:hover,
  #amenities .map__pin:focus-within {
    transform: translateY(-4px) scale(1.06);
    z-index: 3;
  }

  /* Slow, quiet pulse on the near cluster (0.1–0.5 km) — a few cycles, then rest. */
  #amenities.is-revealed .map__pin.is-near {
    animation: amenities-near-pulse 3.2s ease-in-out 1.4s 3 both;
  }
  #amenities .map__pin.is-near:hover,
  #amenities .map__pin.is-near:focus-within { animation: none; }

  @keyframes amenities-near-pulse {
    0%, 100% { filter: none; }
    50% { filter: drop-shadow(0 0 6px var(--pin-accent, rgba(0, 0, 0, 0.25))); }
  }
}