/* Visit section: living illustrated map, pin drop, live map on demand. Belongs to index8.html. */

.visit-section { background: var(--bg); }
.visit-notes { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.visit-notes li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; }
.visit-notes .icon { width: 18px; height: 18px; color: var(--gold); flex: 0 0 auto; }

/* ── Stage holds both maps and the toggle ── */
.map-stage { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #0c1b16; box-shadow: 0 30px 80px #0005; }
/* width: 100% so min-height + aspect-ratio cannot push the width past the column (was 375px on a 320px phone). */
.map-scene, .map-live { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 360px; overflow: hidden; }
.map-live[hidden] { display: none; }
.map-entrance { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 640px; overflow: hidden; background: #0c1b16; }
.map-entrance[hidden] { display: none; }
.map-entrance video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-scene[hidden] { display: none; }

.map-art-image, .map-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
}
.map-video { opacity: 0; transition: opacity 1400ms ease; pointer-events: none; }
.map-video.is-playing { opacity: 1; }
.map-scene::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, #081c17cc, transparent 40%), linear-gradient(180deg, #081c1755, transparent 30%);
}

/* ── Route line draws in from the road to the church ── */
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--gold); z-index: 2; pointer-events: none; }
.map-route-line { stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px #e3bc79aa); }
.is-arrived .map-route-line { animation: map-route-draw 1600ms cubic-bezier(.4, 0, .2, 1) 300ms forwards; }
@keyframes map-route-draw { to { stroke-dashoffset: 0; } }

/* ── Pin drop with bounce, then rippling rings ── */
.map-pin-drop {
  position: absolute; left: 60%; top: 56%; width: 0; height: 0; z-index: 3; pointer-events: none;
}
.map-pin-head {
  position: absolute; left: -26px; bottom: 0; width: 52px; height: 52px; border-radius: 50% 50% 50% 0;
  transform: translateY(-140px) rotate(-45deg) scale(.6); opacity: 0;
  background: var(--red); border: 2px solid #fff5df; display: grid; place-items: center;
  box-shadow: 0 14px 30px #0008, 0 0 0 4px #a72e3533;
}
.map-pin-head .icon { width: 22px; height: 22px; color: #fff5df; transform: rotate(45deg); stroke-width: 1.8; }
.map-pin-shadow {
  position: absolute; left: -14px; top: -4px; width: 28px; height: 8px; border-radius: 50%;
  background: #00000088; filter: blur(3px); transform: scale(0); opacity: 0;
}
.map-pin-ring {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0; transform: scale(.3);
}
.is-arrived .map-pin-head { animation: map-pin-drop 1100ms cubic-bezier(.34, 1.56, .64, 1) 1500ms forwards; }
.is-arrived .map-pin-shadow { animation: map-pin-shadow 1100ms ease 1500ms forwards; }
.is-arrived .map-pin-ring { animation: map-pin-ring 3s ease-out 2500ms infinite; }
.is-arrived .map-pin-ring:nth-child(3) { animation-delay: 4000ms; }
@keyframes map-pin-drop {
  0% { transform: translateY(-140px) rotate(-45deg) scale(.6); opacity: 0; }
  55% { transform: translateY(0) rotate(-45deg) scale(1.05); opacity: 1; }
  75% { transform: translateY(-14px) rotate(-45deg) scale(1); }
  100% { transform: translateY(0) rotate(-45deg) scale(1); opacity: 1; }
}
@keyframes map-pin-shadow { 0% { transform: scale(0); opacity: 0; } 55% { transform: scale(1.2); opacity: .8; } 100% { transform: scale(1); opacity: .7; } }
@keyframes map-pin-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }

/* ── Address card slides up after the pin lands ── */
.map-card {
  position: absolute; left: 22px; bottom: 22px; z-index: 3; max-width: calc(100% - 44px);
  padding: 14px 18px; background: #081c17e6; border: 1px solid #e3bc7955; border-left: 3px solid var(--gold);
  backdrop-filter: blur(8px); opacity: 0; transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease); transition-delay: 2400ms;
}
.is-arrived .map-card { opacity: 1; transform: none; }
.map-card-name { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.map-card-address { display: block; margin-top: 4px; font-size: .74rem; color: var(--muted); }
.map-caption { position: absolute; left: auto; right: 18px; bottom: 18px; z-index: 3; color: #fff5df88; font-size: .55rem; letter-spacing: .12em; text-transform: uppercase; }

/* ── Live map ── */
.map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.map-live::before {
  content: "Loading map…"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--muted); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
}
.map-live.is-ready::before { display: none; }

/* ── Toggle ── */
.map-toggle { display: flex; border-top: 1px solid var(--line); }
.map-toggle-button {
  flex: 1; min-height: 46px; background: none; border: 0; color: var(--muted);
  font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  transition: background 250ms, color 250ms;
}
.map-toggle-button + .map-toggle-button { border-left: 1px solid var(--line); }
.map-toggle-button:hover { color: var(--cream); background: #fff5df0a; }
.map-toggle-button.is-active { color: var(--deep); background: var(--gold); }

@media (max-width: 900px) {
  .map-scene, .map-live { aspect-ratio: 4 / 3; min-height: 320px; }
}
@media (max-width: 640px) {
  .visit-notes li { font-size: .84rem; }
  .map-scene, .map-live { aspect-ratio: 5 / 4; min-height: 300px; }
  .map-card { left: 14px; bottom: 14px; padding: 12px 14px; }
  .map-caption { left: auto; right: 12px; bottom: 12px; }
  .map-pin-head { width: 44px; height: 44px; left: -22px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-video { display: none; }
  .map-route-line { stroke-dashoffset: 0; animation: none; }
  .map-pin-head { transform: rotate(-45deg); opacity: 1; animation: none; }
  .map-pin-shadow { transform: scale(1); opacity: .7; animation: none; }
  .map-pin-ring { display: none; }
  .map-card { opacity: 1; transform: none; transition: none; }
}
html.save-data .map-video { display: none; }