/* Section 04 (.lae): slider <-> map pin synchronisation. State rules only - load after local-attractions-exact.css.
   Nothing here changes the section's layout, type or art; it adds the active / inactive pin states,
   the two stops the map had no pin for (Tall Ship ELISSA, Moody Gardens), and route highlighting.
   JS: local-attractions-live-sync.js */

.lae { --pin-active: #0b7180; --pin-ease: cubic-bezier(.22,1,.36,1); }

/* the two added stops, drawn with the existing .lae-map__label look */
.lae-map__label--elissa { left: 11%; top: 18.5%; }
.lae-map__label--moody  { left: 10%; top: 61%; }

/* ---------- pins: inactive (muted) ---------- */
.lae-map__label[data-lae-marker] {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: .62;
  transition: opacity .35s ease, color .35s ease;
  -webkit-tap-highlight-color: transparent;
}
.lae-map__label[data-lae-marker]::before {
  transition: transform .45s var(--pin-ease), border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.lae-map__label[data-lae-marker]:hover { opacity: .9; }

/* ---------- pins: active ---------- */
.lae-map__label[data-lae-marker][aria-pressed="true"] {
  opacity: 1;
  color: var(--blue);
}
.lae-map__label[data-lae-marker][aria-pressed="true"]::before {
  border-color: var(--pin-active);
  background: var(--pin-active);
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 0 rgba(11,113,128,.45);
  transform: scale(1.45);
  animation: lae-pin-pulse 2.2s ease-out .45s infinite;
}
@keyframes lae-pin-pulse {
  0%   { box-shadow: 0 0 0 2px var(--cream), 0 0 0 0 rgba(11,113,128,.45); }
  70%  { box-shadow: 0 0 0 2px var(--cream), 0 0 0 11px rgba(11,113,128,0); }
  100% { box-shadow: 0 0 0 2px var(--cream), 0 0 0 0 rgba(11,113,128,0); }
}

/* ---------- routes: the active stop's route draws in teal, the rest step back ---------- */
.lae-map__routes path[data-lae-route] { transition: opacity .35s ease; }
.lae-map__routes path[data-lae-route]:not(.is-active) { opacity: .5; }
.lae-map__routes path.lae-map__route-hi {
  stroke: var(--pin-active);
  stroke-width: 2.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset .7s var(--pin-ease), opacity .25s ease;
}
.lae-map__routes path.lae-map__route-hi.is-active { stroke-dashoffset: 0; opacity: .95; }

/* ---------- swipe: horizontal drags go to the slider, vertical scrolling stays native ---------- */
.lae__cards { touch-action: pan-y; }
.lae__cards.is-dragging, .lae__cards.is-dragging * { cursor: grabbing; user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .lae-map__label[data-lae-marker],
  .lae-map__label[data-lae-marker]::before,
  .lae-map__routes path { transition: none; }
  .lae-map__label[data-lae-marker][aria-pressed="true"]::before { animation: none; }
}