/* All hotspot coordinates are percentages of the visible 756 × 570 map. */
.map-overlay {
  position: relative;
  width: 100%;
  aspect-ratio: 756 / 570;
  overflow: hidden;
  isolation: isolate;
  border-radius: 24px;
  background: #fcf9f0;
}
.map-overlay img { display: block; position: absolute; max-width: none; pointer-events: none; user-select: none; }
.map-background { left: -107.936508%; top: -35.087719%; width: 221.164021%; height: 165.087719%; }
.map-hotspot, .map-compass {
  position: absolute;
  cursor: pointer !important;
  will-change: transform, filter;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Keep hit areas stationary; animate the grouped illustration, label and pin. */
.map-hotspot { pointer-events: none; outline: none; }
.map-hotspot__visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateY(0) scale(1);
  transform-origin: center;
  filter: drop-shadow(0 0 0 rgba(0,0,0,0));
  will-change: transform, filter;
  transition: all 0.25s ease-out;
  transition-delay: 0s;
}
.map-hotspot__crop { position: absolute; inset: 0; overflow: hidden; clip-path: var(--asset-clip); }
.map-hotspot__crop img { left: var(--asset-left); top: var(--asset-top); width: var(--asset-width); height: var(--asset-height); }
.map-hotspot__hit { position: absolute; inset: 0; pointer-events: auto; cursor: pointer !important; clip-path: var(--hit-clip, none); }
.map-hotspot:is(:hover, :focus-visible, [data-active=true]) { z-index: 2; }
.map-hotspot:hover, .map-hotspot__hit:hover, .map-compass:hover { cursor: pointer !important; }
.map-hotspot:is(:hover, :focus-visible, [data-active=true]) .map-hotspot__visual {
  transform: translateY(-5px) scale(1.05);
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.15));
}
.map-hotspot:focus-visible::after { content: ''; position: absolute; inset: 2px; border: 2px solid #087d83; border-radius: 10px; pointer-events: none; }

.map-hotspot--the-strand {
  left: 4.232804%; top: 6.666667%;
  width: 38.888889%; height: 25.614035%;
  --asset-left: -288.435374%; --asset-top: -163.013699%;
  --asset-width: 568.707483%; --asset-height: 644.520548%;
  --asset-clip: polygon(2.3810% 52.0548%, 13.6054% 47.2603%, 22.4490% 44.5205%, 29.5918% 32.8767%, 37.4150% 28.0822%, 41.8367% 19.8630%, 46.9388% 26.7123%, 54.0816% 23.9726%, 62.9252% 24.6575%, 70.0680% 27.3973%, 73.1293% 13.6986%, 76.8707% 6.1644%, 81.6327% 6.8493%, 87.0748% 13.6986%, 86.0544% 27.3973%, 90.4762% 31.5068%, 91.1565% 54.1096%, 95.2381% 63.6986%, 93.1973% 71.2329%, 87.0748% 73.9726%, 87.7551% 94.5205%, 39.1156% 94.5205%, 38.7755% 71.9178%, 21.7687% 69.1781%, 8.5034% 62.3288%);
}

.map-hotspot--bishops-palace {
  left: 2.777778%; top: 30.526316%;
  width: 42.989418%; height: 24.035088%;
  --asset-left: -257.538462%; --asset-top: -272.992701%;
  --asset-width: 514.461538%; --asset-height: 686.861314%;
  --asset-clip: polygon(2.1538% 84.6715%, 3.6923% 55.4745%, 6.1538% 37.2263%, 10.1538% 32.1168%, 13.8462% 41.6058%, 17.5385% 39.4161%, 18.7692% 19.7080%, 23.0769% 18.2482%, 25.8462% 5.1095%, 28.6154% 16.7883%, 31.3846% 19.7080%, 35.0769% 16.0584%, 37.8462% 27.7372%, 40.9231% 29.9270%, 43.0769% 32.8467%, 98.4615% 32.8467%, 98.4615% 57.6642%, 51.0769% 57.6642%, 55.6923% 68.6131%, 57.2308% 82.4818%, 54.7692% 95.6204%, 1.8462% 95.6204%);
}

.map-hotspot--pleasure-pier {
  left: 15.740741%; top: 57.368421%;
  width: 36.375661%; height: 25.614035%;
  --asset-left: -340.000000%; --asset-top: -360.958904%;
  --asset-width: 608.000000%; --asset-height: 644.520548%;
  --asset-clip: polygon(32.0000% 0.0000%, 40.0000% 0.0000%, 40.0000% 10.2740%, 99.2727% 10.2740%, 99.2727% 32.8767%, 63.6364% 32.8767%, 64.3636% 53.4247%, 72.0000% 58.2192%, 72.3636% 76.0274%, 68.7273% 87.6712%, 54.5455% 94.5205%, 10.9091% 94.5205%, 1.8182% 86.9863%, 0.0000% 71.2329%, 5.4545% 57.5342%, 14.9091% 53.4247%, 16.3636% 32.1918%, 22.1818% 23.2877%, 29.8182% 17.1233%, 36.7273% 24.6575%, 32.0000% 15.7534%);
}

.map-hotspot--stewart-beach {
  left: 48.677249%; top: 44.210526%;
  width: 33.597884%; height: 19.824561%;
  --asset-left: -466.141732%; --asset-top: -400.000000%;
  --asset-width: 658.267717%; --asset-height: 832.743363%;
  --asset-clip: polygon(0.7874% 12.3894%, 66.5354% 12.3894%, 70.4724% 1.7699%, 76.3780% 0.8850%, 81.8898% 3.5398%, 82.2835% 28.3186%, 89.3701% 31.8584%, 91.7323% 51.3274%, 96.0630% 61.9469%, 97.6378% 85.8407%, 88.1890% 92.9204%, 25.9843% 92.9204%, 26.3780% 72.5664%, 32.6772% 54.8673%, 48.8189% 43.3628%, 49.2126% 39.8230%, 0.7874% 39.8230%);
  --hit-clip: polygon(0.0000% 0.0000%, 100.0000% 0.0000%, 100.0000% 100.0000%, 29.9213% 100.0000%, 29.9213% 46.9027%, 0.0000% 46.9027%);
}

/* The compass remains anchored at the right side; only its dial animates. */
.map-compass { right: 3.174603%; top: 72.631579%; width: 8.994709%; height: 15.789474%; outline: none; }
.map-compass__dial {
  position: absolute;
  left: 5.882353%; top: 26.666667%; width: 88.235294%; height: 66.666667%;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  transform: rotate(0deg);
  will-change: transform, filter;
}
.map-compass__dial img { left: -2473.333333%; top: -1063.333333%; width: 2786.666667%; height: 1568.333333%; }
.map-compass:is(:hover, :focus-visible, [data-active=true]) .map-compass__dial { animation: compassWiggle 0.8s ease-in-out infinite; }
.map-compass:focus-visible { outline: 2px solid #087d83; outline-offset: 3px; border-radius: 50%; }
@keyframes compassWiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .map-hotspot, .map-compass, .map-hotspot__visual, .map-compass__dial { will-change: auto; }
  .map-hotspot__visual { transition: none; }
  .map-hotspot:is(:hover, :focus-visible, [data-active=true]) .map-hotspot__visual { transform: none; }
  .map-compass:is(:hover, :focus-visible, [data-active=true]) .map-compass__dial { animation: none; }
}