/* ==========================================================
   GOLMACHI FEST / コースマップの点灯表示（トップとイベントページで共有）
   style.css の変数を前提にする。
   ========================================================== */

/* course map stage */
.map-stage { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.22); background: #05060f; isolation: isolate; }
.map-stage .img { position: absolute; inset: 0; background: url("../images/course-map.jpg") center / cover no-repeat; filter: saturate(.7) brightness(.72); transform-origin: 50% 60%; animation: map-drift 36s ease-in-out infinite alternate; }
.map-stage .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 9, 20, 0.78), rgba(8, 9, 20, 0.1) 55%), radial-gradient(circle at 50% 50%, transparent 40%, rgba(8, 9, 20, 0.55)); }
.map-stage .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(119, 231, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(119, 231, 255, 0.07) 1px, transparent 1px); background-size: 12.5% 12.5%; }
.map-label { position: absolute; top: 12px; left: 14px; color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: 8px; letter-spacing: .18em; }
.map-legend { position: absolute; right: 12px; bottom: 10px; display: flex; gap: 12px; color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: 7px; letter-spacing: .12em; }
.map-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: middle; }
.map-legend .on i { background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.map-legend .off i { border: 1px solid var(--muted); }
.map-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-route path { fill: none; stroke: var(--lime); stroke-width: 1; stroke-dasharray: 4 5; stroke-dashoffset: 1000; opacity: .45; animation: route-draw 3.2s 1.2s ease-out forwards; }
.marker { position: absolute; top: var(--y); left: var(--x); display: grid; place-items: center; transform: translate(-50%, -50%); }
.marker .core { width: clamp(22px, 4.2vw, 40px); height: clamp(22px, 4.2vw, 40px); display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(8, 9, 20, 0.75); color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: clamp(8px, 1.3vw, 12px); font-weight: 800; }
.marker .name { margin-top: 5px; padding: 2px 5px; border-radius: 2px; background: rgba(8, 9, 20, 0.82); color: var(--muted); font-family: var(--font-geist-mono), monospace; font-size: clamp(6px, 1vw, 9px); font-weight: 700; letter-spacing: .1em; white-space: nowrap; opacity: 0; transform: translateY(-4px); }
.marker.on .core { border-color: var(--pink); background: var(--pink); color: var(--ink); opacity: 0; animation: light-up 600ms cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: var(--delay); }
.marker.on .name { color: var(--white); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); animation: name-in 500ms ease forwards; animation-delay: calc(var(--delay) + 250ms); }
.marker.on::before { content: ""; position: absolute; width: clamp(30px, 6vw, 60px); height: clamp(30px, 6vw, 60px); border: 1px solid var(--pink); border-radius: 50%; opacity: 0; animation: pulse 2.6s ease-out infinite; animation-delay: calc(var(--delay) + 600ms); }
.marker.off .core { opacity: .55; }
.marker.off .name { opacity: .7; transform: none; }
@keyframes light-up { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes name-in { to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes map-drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.5%, -2%); } }
@keyframes route-draw { to { stroke-dashoffset: 0; } }


@media (prefers-reduced-motion: reduce) {
  .map-stage .img, .map-route path, .marker.on::before { animation: none !important; }
  .marker.on .core, .marker.on .name { animation: none !important; opacity: 1; transform: none; }
  .map-route path { stroke-dashoffset: 0; }
}