/* "Pick a square, get it in 3D" section (_square-to-3d.html), v2 adds the district-creation demo. Self-contained so it reads the same on every homepage design. */
.s2d { --s2d-bg:#061114; --s2d-ink:#eef5f4; --s2d-muted:#9fb3b6; --s2d-line:rgba(255,255,255,.14); --s2d-gold:#e7b75a; --s2d-green:#60f5b2;
  background:var(--s2d-bg); color:var(--s2d-ink); border-top:1px solid var(--s2d-line); border-bottom:1px solid var(--s2d-line); padding:clamp(56px,8vw,96px) 0; }
.s2d-inner { width:min(1180px,calc(100% - 32px)); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,56px); align-items:center; }
.s2d-eyebrow { margin:0 0 14px; color:var(--s2d-green); font:600 .78rem "SFMono-Regular",Consolas,"Liberation Mono",monospace; letter-spacing:.14em; }
.s2d h2 { margin:0; font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.08; letter-spacing:-.03em; color:var(--s2d-ink); }
.s2d h2 em { font-style:normal; color:var(--s2d-gold); }
.s2d-lede { margin:18px 0 0; max-width:36em; color:var(--s2d-muted); font-size:1.05rem; line-height:1.6; }
.s2d-figure { margin:0; }
.s2d-figure svg { display:block; width:100%; height:auto; }
.s2d-tile { fill:rgba(255,255,255,.04); stroke:var(--s2d-line); stroke-width:1.5; }
.s2d-grid { fill:none; stroke:rgba(255,255,255,.12); stroke-width:1; }
.s2d-pick { fill:rgba(231,183,90,.28); stroke:var(--s2d-gold); stroke-width:2.5; }
.s2d-arrow { fill:none; stroke:var(--s2d-gold); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.s2d-side { fill:#0f2a2c; stroke:var(--s2d-gold); stroke-width:1.5; }
.s2d-side-r { fill:#0b2022; }
.s2d-terrain { fill:#1c4a3f; stroke:var(--s2d-gold); stroke-width:2; stroke-linejoin:round; }
.s2d-contour { fill:none; stroke:rgba(96,245,178,.45); stroke-width:1.2; stroke-linejoin:round; }
.s2d-bldg { fill:#dfe9ea; stroke:#061114; stroke-width:1; }
.s2d-steps { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:clamp(8px,2vw,20px) 0 0; padding:0; list-style:none; }
.s2d-steps li { padding:22px 24px 24px; border:1px solid var(--s2d-line); background:rgba(255,255,255,.03); }
.s2d-steps span { color:var(--s2d-gold); font:.8rem "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; }
.s2d-steps h3 { margin:6px 0 8px; font-size:1.25rem; letter-spacing:-.01em; color:var(--s2d-ink); }
.s2d-steps p { margin:0; color:var(--s2d-muted); line-height:1.55; }
@media (max-width: 860px) {
  .s2d-inner { grid-template-columns:1fr; }
  .s2d-figure { max-width:520px; }
  .s2d-steps { grid-template-columns:1fr; }
}

/* v2: district-creation demo (four steps, auto-playing). Without JS every step shows, stacked. */
.s2d-demo { grid-column:1 / -1; margin-top:clamp(28px,5vw,64px); }
.s2d-demo-head { max-width:980px; margin:0 auto 18px; }
.s2d-demo-title { margin:0; font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.15; letter-spacing:-.02em; color:var(--s2d-ink); }
.s2d-tabs { max-width:980px; margin:0 auto 14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.s2d-tabs[hidden] { display:none; }
.s2d-tab { position:relative; overflow:hidden; display:flex; align-items:baseline; gap:10px; min-width:0; margin:0; padding:13px 14px 15px;
  border:1px solid var(--s2d-line); border-radius:0; background:rgba(255,255,255,.03); color:var(--s2d-muted);
  font:600 .95rem/1.2 inherit; text-align:left; cursor:pointer; box-shadow:none; transition:background .2s, color .2s, border-color .2s; }
.s2d-tab:hover { color:var(--s2d-ink); background:rgba(255,255,255,.06); }
.s2d-tab:focus-visible { outline:2px solid var(--s2d-green); outline-offset:2px; }
.s2d-tab[aria-selected="true"] { color:var(--s2d-ink); border-color:rgba(231,183,90,.55); background:rgba(231,183,90,.08); }
.s2d-tab-num { color:var(--s2d-gold); font:.78rem "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; }
.s2d-tab-label { min-width:0; }
.s2d-tab-bar { position:absolute; left:0; bottom:0; height:3px; width:100%; background:var(--s2d-gold); transform:scaleX(0); transform-origin:left; }
.s2d-tab[aria-selected="true"] .s2d-tab-bar { transform:scaleX(1); }
.s2d-demo.is-live .s2d-tab[aria-selected="true"] .s2d-tab-bar { animation:s2d-progress var(--s2d-dur,5s) linear forwards; }
@keyframes s2d-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }

.s2d-panels { max-width:980px; margin:0 auto; display:grid; gap:36px; }
.s2d-panel { margin:0; min-width:0; }
.s2d-window { border:1px solid rgba(255,255,255,.18); border-radius:10px; overflow:hidden; background:#0c1b1e; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.s2d-chrome { display:flex; align-items:center; gap:6px; height:32px; padding:0 12px; background:#14262a; border-bottom:1px solid var(--s2d-line); }
.s2d-chrome i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); flex:none; }
.s2d-chrome i:first-child { background:#e8705f; } .s2d-chrome i:nth-child(2) { background:#e7b75a; } .s2d-chrome i:nth-child(3) { background:#60c98a; }
.s2d-chrome span { margin-left:10px; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--s2d-muted); font:.74rem "SFMono-Regular",Consolas,monospace; letter-spacing:.04em; }
.s2d-shot { position:relative; aspect-ratio:5 / 3; overflow:hidden; background:#0c1b1e; }
.s2d-shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.s2d-panel figcaption { margin-top:14px; color:var(--s2d-muted); line-height:1.55; max-width:52em; }
.s2d-panel figcaption strong { display:block; margin:2px 0 4px; color:var(--s2d-ink); font-size:1.12rem; letter-spacing:-.01em; }
.s2d-cap-num { color:var(--s2d-gold); font:.78rem "SFMono-Regular",Consolas,monospace; letter-spacing:.1em; }

/* Live (JS) mode: steps share one frame and cross-fade. */
.s2d-demo.is-live .s2d-panels { gap:0; }
.s2d-demo.is-live .s2d-panel { grid-area:1 / 1; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility 0s linear .6s; }
.s2d-demo.is-live .s2d-panel.is-active { opacity:1; visibility:visible; transition:opacity .6s ease, visibility 0s; }
.s2d-demo.is-live .s2d-panel.is-active .s2d-shot img { animation:s2d-drift var(--s2d-dur,5s) ease-out both; }
.s2d-demo.is-live .s2d-panel-select.is-active .s2d-shot img { animation:none; }
@keyframes s2d-drift { from { transform:scale(1.045); } to { transform:scale(1); } }

/* Step 1: a cursor drags the selection square corner to corner, it snaps, then the label appears.
   Geometry is a 2 km square on this map (the source's 300 m scale bar is ~65 px of 1068). */
.s2d-select { --x:30%; --y:15%; --w:40.7%; --h:68%; position:absolute; inset:0; pointer-events:none; }
.s2d-box { position:absolute; left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  border:2px solid var(--s2d-gold); background:rgba(231,183,90,.16); box-shadow:0 0 0 9999px rgba(4,12,14,.38); }
.s2d-box-label { position:absolute; left:var(--x); top:calc(var(--y) + var(--h) + 8px); padding:6px 10px; background:#061114; border:1px solid var(--s2d-gold);
  color:var(--s2d-ink); font:600 clamp(.68rem,1.6vw,.85rem)/1.2 "SFMono-Regular",Consolas,monospace; white-space:nowrap; }
.s2d-box-label b { color:var(--s2d-gold); }
.s2d-cursor { position:absolute; left:calc(var(--x) + var(--w)); top:calc(var(--y) + var(--h)); width:clamp(22px,3.4vw,32px); height:auto; margin:-3px 0 0 -4px; opacity:0;
  fill:#fff; stroke:#061114; stroke-width:1.5; stroke-linejoin:round; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@media (prefers-reduced-motion: no-preference) {
  .s2d-panel-select .s2d-box { animation:s2d-drag var(--s2d-sel,7.5s) cubic-bezier(.45,.05,.3,1) both; }
  .s2d-panel-select .s2d-box-label { animation:s2d-label var(--s2d-sel,7.5s) ease both; }
  .s2d-panel-select .s2d-cursor { animation:s2d-cursor var(--s2d-sel,7.5s) cubic-bezier(.45,.05,.3,1) both; }
  /* Without JS the drag loops; in live mode it plays once each time step 1 comes round. */
  .s2d-demo:not(.is-live) .s2d-panel-select :is(.s2d-box,.s2d-box-label,.s2d-cursor) { animation-iteration-count:infinite; }
  .s2d-demo.is-live .s2d-panel-select:not(.is-active) :is(.s2d-box,.s2d-box-label,.s2d-cursor) { animation:none; }
}
@keyframes s2d-drag {
  0%, 12% { width:0; height:0; border-color:rgba(231,183,90,0); box-shadow:0 0 0 9999px rgba(4,12,14,0); }
  14% { border-color:var(--s2d-gold); }
  52% { width:calc(var(--w) * 1.05); height:calc(var(--h) * 1.05); box-shadow:0 0 0 9999px rgba(4,12,14,.38); }
  58% { width:var(--w); height:var(--h); border-color:var(--s2d-green); }
  66%, 100% { width:var(--w); height:var(--h); border-color:var(--s2d-gold); box-shadow:0 0 0 9999px rgba(4,12,14,.38); }
}
@keyframes s2d-cursor {
  0% { left:calc(var(--x) - 8%); top:calc(var(--y) - 10%); opacity:0; }
  8% { left:var(--x); top:var(--y); opacity:1; transform:scale(1); }
  12% { left:var(--x); top:var(--y); transform:scale(.86); }
  52% { left:calc(var(--x) + var(--w) * 1.05); top:calc(var(--y) + var(--h) * 1.05); opacity:1; transform:scale(.86); }
  58% { left:calc(var(--x) + var(--w)); top:calc(var(--y) + var(--h)); transform:scale(1); opacity:1; }
  74% { opacity:1; }
  84%, 100% { left:calc(var(--x) + var(--w) + 4%); top:calc(var(--y) + var(--h) + 6%); opacity:0; }
}
@keyframes s2d-label { 0%, 60% { opacity:0; transform:translateY(6px); } 68%, 100% { opacity:1; transform:none; } }

/* Pause everything (the progress bar is the step timer) on hover, focus, or when scrolled away. */
.s2d-demo:is(:hover,:focus-within,.is-offscreen) :is(.s2d-tab-bar,.s2d-shot img,.s2d-box,.s2d-box-label,.s2d-cursor) { animation-play-state:paused; }

@media (prefers-reduced-motion: reduce) {
  .s2d-demo.is-live .s2d-tab-bar { animation:none !important; }
  .s2d-demo.is-live .s2d-panel, .s2d-demo.is-live .s2d-panel.is-active { transition:none; }
  .s2d-demo.is-live .s2d-panel.is-active .s2d-shot img { animation:none; }
}

@media (max-width: 860px) {
  .s2d-tabs { grid-template-columns:repeat(2,1fr); }
  .s2d-tab { padding:11px 12px 13px; font-size:.88rem; }
  .s2d-window { border-radius:8px; }
  .s2d-chrome { height:26px; }
  .s2d-box-label { top:calc(var(--y) + var(--h) + 4px); padding:4px 7px; }
}