/* ===== Interactive walkthrough — scroll-driven sections ===== */
.xp-intro { padding: 64px 0 40px; max-width: 68ch; }
.xp-intro h1 { font-size: clamp(32px, 5vw, 52px); margin: 12px 0 0; }
.xp-intro .lede { color: var(--ink-soft); font-size: 18px; margin-top: 18px; }
.xp-hint { margin-top: 34px; display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.xp-mouse { width: 22px; height: 34px; border: 2px solid var(--hair); border-radius: 12px; position: relative; flex: none; }
.xp-mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; background: var(--brand); border-radius: 2px; animation: xpwheel 1.6s infinite; }
@keyframes xpwheel { 0%{opacity:0;transform:translateY(0)} 30%{opacity:1} 100%{opacity:0;transform:translateY(10px)} }

/* pinned scrub scaffold */
.xp-pin { position: relative; height: var(--len, 300vh); }
.xp-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; background: var(--panel); }
.xp-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px clamp(18px, 5vw, 56px) 40px;
  background: linear-gradient(to top, color-mix(in srgb, var(--ground) 92%, transparent), transparent); }
.xp-label h2 { font-size: clamp(22px, 3.4vw, 38px); margin: 8px 0 0; max-width: 20ch; }
.xp-label p { margin: 10px 0 0; color: var(--ink-soft); font-size: 15.5px; max-width: 46ch; }
.xp-prog { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: color-mix(in srgb, var(--hair) 60%, transparent); }
.xp-prog i { display: block; height: 100%; width: 0%; background: var(--gold); }

/* 1 · site plan reveal */
.xp-planwrap { position: relative; width: 100%; height: 100%; display: grid; place-items: center; overflow: hidden; }
.xp-planwrap img { width: 100%; height: 100%; object-fit: contain; will-change: transform; transform-origin: 40% 45%; }
.xp-callout { position: absolute; transform: translate(-50%, -50%) scale(.92); opacity: 0; transition: opacity .35s ease, transform .35s ease;
  background: var(--brand); color: var(--ground); font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  padding: 7px 13px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.28); pointer-events: none; }
.xp-callout.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 2 · day → night */
.xp-fade { position: relative; width: 100%; height: 100%; }
.xp-fade img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xp-fade [data-night] { clip-path: inset(0 0 0 100%); will-change: clip-path; }
.xp-wipe-edge { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: .9; pointer-events: none; box-shadow: 0 0 18px 4px color-mix(in srgb, var(--gold) 55%, transparent); }

/* 3 · drive map */
.xp-map { width: min(1200px, 96vw); }
.xp-mapinner { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair);
  width: min(100%, calc(70vh * 1700 / 1356)); aspect-ratio: 1700 / 1356; margin: 0 auto; }
.xp-mapinner img { width: 100%; height: 100%; object-fit: fill; display: block; }
.xp-mapinner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xp-attrib { margin: 8px auto 0; text-align: center; font-size: 10.5px; color: var(--ink-soft); opacity: .8; }


#xp-routebase { fill: none; stroke: rgba(0,0,0,.45); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
#xp-route { fill: none; stroke: #F2C14E; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px rgba(0,0,0,.55)); }
.xp-stops circle { fill: #fff; stroke: #1E3A5F; stroke-width: 3; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.xp-stops text { fill: #fff; font-size: 15px; font-weight: 700; text-anchor: middle; font-family: inherit; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 4px; stroke-linejoin: round; }
.xp-stops g { opacity: .35; transition: opacity .4s ease; }
.xp-stops g.on { opacity: 1; }
.xp-stops g.on circle { fill: #F2C14E; stroke: #1E3A5F; }
.xp-carbg { fill: var(--brand); }
.xp-caricon { fill: none; stroke: var(--ground); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xp-carwheel { fill: var(--ground); }

/* 4 · interactive lot map */
.xp-lots { padding: 72px 0 20px; }
.xp-legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin: 26px 0 18px; font-size: 14px; color: var(--ink-soft); }
.xp-legend b { color: var(--ink); margin-left: 4px; }
.xp-legend .d { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.d.avail { background: #1F9D55; } .d.pend { background: #C98A16; } .d.sold { background: #9AA3B2; }
.xp-filter { margin-left: auto; display: flex; gap: 8px; }
.xp-filter button { border: 1px solid var(--hair); background: transparent; color: var(--ink); border-radius: 999px; padding: 7px 15px; font-size: 13.5px; cursor: pointer; font-family: inherit; }
.xp-filter button.on { background: var(--brand); color: var(--ground); border-color: var(--brand); }

.xp-lotgrid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .xp-lotgrid { grid-template-columns: 1fr; } }
.xp-lotmapwrap { position: relative; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; background: #fff; min-width: 0; }
.xp-lotmapwrap img { width: 100%; height: auto; display: block; }
.xp-dot { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2.5px solid #fff;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .15s ease, opacity .2s ease; padding: 0; }
.xp-dot:hover, .xp-dot:focus-visible { transform: scale(1.28); outline: none; z-index: 3; }
.xp-dot.sel { transform: scale(1.4); box-shadow: 0 0 0 4px var(--gold-soft), 0 2px 10px rgba(0,0,0,.4); z-index: 4; }
.xp-dot.Available { background: #1F9D55; } .xp-dot.Pending { background: #C98A16; } .xp-dot.Sold { background: #9AA3B2; }
.xp-dot.dim { opacity: .18; pointer-events: none; }

.xp-lotpanel { position: sticky; top: 96px; background: var(--panel); border: 1px solid var(--hair); border-radius: 14px; padding: 24px 22px; }
.xp-empty strong { display: block; font-size: 17px; margin-bottom: 8px; }
.xp-empty p, .xp-note { color: var(--ink-soft); font-size: 14px; margin: 0; }
.xp-badge { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: #fff; }
.xp-badge.Available { background: #1F9D55; } .xp-badge.Pending { background: #C98A16; } .xp-badge.Sold { background: #9AA3B2; }
.xp-detail h3 { font-size: 26px; margin: 14px 0 4px; }
.xp-spec { color: var(--ink-soft); font-size: 14px; }
.xp-price { font-size: 30px; font-weight: 700; color: var(--gold); margin: 12px 0 14px; font-variant-numeric: tabular-nums; }
.xp-detail .btn { width: 100%; text-align: center; margin-top: 16px; }
.xp-detail .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.xp-clear { display: block; width: 100%; margin-top: 10px; background: none; border: none; color: var(--ink-soft); font-size: 13.5px; cursor: pointer; font-family: inherit; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .xp-pin { height: auto !important; }
  .xp-stick { position: static; height: auto; padding: 40px 0; }
  .xp-callout { opacity: 1; transform: translate(-50%,-50%); }
  .xp-fade [data-night] { clip-path: none; }
  .xp-stops g { opacity: 1; }
  .xp-mouse::after { animation: none; }
}