/* ==========================================================================
   Cyber City · "Find the store" (template-parts/store-map.php, inc/store-map.php)
   The streets around the store, drawn by the theme itself: a field of voxels at rest, the drawn streets when the
   card is pressed. Three sizes: wide, compact, mini (a small card that grows in place).
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-loc-defs { position: absolute; }
.ecc-loc { min-width: 0; perspective: calc(var(--ecc-s-9) * 12); }
.ecc-loc__card { position: relative; display: grid; overflow: hidden; transform-style: preserve-3d; will-change: transform; }

/* ---- the map window ---- */
.ecc-loc__map { position: relative; height: calc(var(--ecc-s-9) * 1.75); overflow: hidden; transition: height var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-loc.is-open .ecc-loc__map { height: calc(var(--ecc-s-9) * 3.25); }
.ecc-loc__vox, .ecc-loc__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ecc-loc__vox { color: var(--ecc-ink); caret-color: var(--ecc-spark); transition: opacity var(--ecc-d-base) var(--ecc-ease-out); } /* the script reads the two colours from here */
.ecc-loc__svg { --_px: 50%; --_py: 50%; } /* where the store sits in the window */

/* the streets: thin for the small ones, strong for the ones a driver knows */
.ecc-loc__road { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ecc-loc__road--res { stroke: var(--ecc-ink-2); stroke-width: 1; opacity: .42; }
.ecc-loc__road--ter { stroke: var(--ecc-ink-2); stroke-width: 1; opacity: .7; }
.ecc-loc__road--sec { stroke: var(--ecc-ink-2); stroke-width: 2; }
.ecc-loc__road--pri { stroke: var(--ecc-ink); stroke-width: 3; }
.ecc-loc__road--fwy-case { stroke: var(--ecc-ink-2); stroke-width: 7; }
.ecc-loc__road--fwy { stroke: var(--ecc-panel); stroke-width: 3; }
.ecc-loc__names text { font-family: var(--ecc-f-mono); font-weight: var(--ecc-fw-strong); fill: var(--ecc-ink-2); }
.ecc-loc__pin-ring { fill: none; stroke: var(--ecc-spark); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.ecc-loc__pin-body { fill: var(--ecc-spark); }
.ecc-loc__pin-eye { fill: var(--ecc-panel); }
.ecc-loc__pin-name { font-family: var(--ecc-f-mono); font-weight: var(--ecc-fw-strong); font-size: var(--ecc-t-micro); fill: var(--ecc-ink); paint-order: stroke; stroke: var(--ecc-panel); stroke-width: 4; }

/* With the script on: at rest the voxels show, the drawn map waits folded into the pin. */
.ecc-loc--on .ecc-loc__svg { clip-path: circle(0 at var(--_px) var(--_py)); transition: clip-path var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-loc--on .ecc-loc__names, .ecc-loc--on .ecc-loc__pin-name { opacity: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-loc--on.is-open .ecc-loc__svg { clip-path: circle(150% at var(--_px) var(--_py)); }
.ecc-loc--on.is-open .ecc-loc__vox { opacity: 0; }
.ecc-loc--on.is-open .ecc-loc__names, .ecc-loc--on.is-open .ecc-loc__pin-name { opacity: 1; transition-delay: var(--ecc-d-base); }
.ecc-loc--on.is-open .ecc-loc__pin-ring { animation: ecc-loc-ring var(--ecc-shimmer-loop) var(--ecc-ease-out) infinite; }
@keyframes ecc-loc-ring { 0% { transform: scale(.6); opacity: 1; } 70%, 100% { transform: scale(1.7); opacity: 0; } }

/* the whole window is the button; its words sit in a corner */
.ecc-loc__toggle { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; padding: var(--ecc-s-3); border: 0; background: none; color: var(--ecc-ink); cursor: pointer; }
.ecc-loc__toggle:focus-visible { outline: var(--ecc-focus-ring); outline-offset: calc(var(--ecc-s-1) * -1); }
.ecc-loc__hint { display: inline-flex; align-items: center; gap: var(--ecc-s-2); min-height: var(--ecc-s-6); padding: 0 var(--ecc-s-3); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r-sm); background: var(--ecc-panel); }
.ecc-loc__hint i { width: var(--ecc-s-2); height: var(--ecc-s-2); border-radius: var(--ecc-r-voxel); background: var(--ecc-spark); }
.ecc-loc__hint [data-close], .ecc-loc.is-open .ecc-loc__hint [data-open] { display: none; }
.ecc-loc.is-open .ecc-loc__hint [data-close] { display: inline; }
html:not(.ecc-js) .ecc-loc__toggle { display: none; }

/* ---- the words ---- */
.ecc-loc__info { position: relative; display: grid; gap: var(--ecc-s-2); align-content: start; padding: var(--ecc-s-5); }
.ecc-loc__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ecc-s-2) var(--ecc-s-4); margin-bottom: var(--ecc-s-2); }
.ecc-loc__top p { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-loc__state { color: var(--ecc-ink-2); }
.ecc-loc__state i { width: var(--ecc-s-2); height: var(--ecc-s-2); border: 1px solid var(--ecc-ink-2); border-radius: var(--ecc-r-voxel); }
.ecc-loc__state.is-on { color: var(--ecc-ink); }
.ecc-loc__state.is-on i { border-color: var(--ecc-spark); background: var(--ecc-spark); }
.ecc-loc__addr, .ecc-loc__city, .ecc-loc__coords { margin: 0; }
.ecc-loc__city, .ecc-loc__coords { color: var(--ecc-ink-2); }
.ecc-loc__line { display: block; width: 30%; height: 2px; background: var(--ecc-spark); transition: width var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-loc.is-open .ecc-loc__line, .ecc-loc.is-near .ecc-loc__line { width: 100%; }
.ecc-loc__acts { display: flex; flex-wrap: wrap; gap: var(--ecc-s-2); margin-top: var(--ecc-s-3); }
.ecc-loc__credit { margin: var(--ecc-s-2) 0 0; color: var(--ecc-ink-2); font-size: var(--ecc-t-micro); }
.ecc-loc__credit a { display: inline-block; margin-block: calc(var(--ecc-s-4) * -1); padding-block: var(--ecc-s-4); color: inherit; } /* a 44px target on a 14px line */

/* ---- wide, from a tablet up: the map is the whole card, the words sit on its left ---- */
@media (min-width: 761px) {
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__card { min-height: calc(var(--ecc-s-9) * 3.5); transition: min-height var(--ecc-d-slow) var(--ecc-ease-out); }
  .ecc-loc.is-open:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__card { min-height: calc(var(--ecc-s-9) * 5.5); }
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__map { position: absolute; inset: 0; height: auto; }
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--ecc-panel) 0%, var(--ecc-panel) 26%, color-mix(in srgb, var(--ecc-panel) 70%, transparent) 40%, transparent 58%); }
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__info { align-self: end; max-width: 30em; padding: var(--ecc-s-6); pointer-events: none; }
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__info a { pointer-events: auto; }
  .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__svg { --_px: 68%; }
}

/* ---- mini: a place name on a quiet card; pressed, it grows in place and shows the map ----
   Written open first (that is what a browser without the script shows), then the rest state the script adds. */
.ecc-loc--mini { width: min(100%, calc(var(--ecc-s-9) * 4.5)); transition: width var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-loc--mini .ecc-loc__card { height: calc(var(--ecc-s-9) * 3.75); border: 1px solid var(--ecc-line-strong); border-radius: var(--ecc-r); background: var(--ecc-panel); transition: height var(--ecc-d-slow) var(--ecc-ease-out); }
.ecc-loc--mini .ecc-loc__map { position: absolute; inset: 0; height: auto; }
.ecc-loc--mini .ecc-loc__svg { --_py: 30%; }
.ecc-loc--mini .ecc-loc__map::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--ecc-panel) 0%, color-mix(in srgb, var(--ecc-panel) 92%, transparent) 48%, transparent 70%); }
.ecc-loc--mini .ecc-loc__toggle { align-items: flex-start; }
.ecc-loc--mini .ecc-loc__info { display: flex; flex-direction: column; justify-content: space-between; gap: var(--ecc-s-3); height: 100%; padding: var(--ecc-s-4); pointer-events: none; }
.ecc-loc--mini .ecc-loc__info a { pointer-events: auto; }
.ecc-loc__mark { display: block; color: var(--ecc-spark); line-height: 0; transition: opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-loc__foot { display: grid; gap: var(--ecc-s-2); }
.ecc-loc__place { margin: 0; transition: transform var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-loc--mini .ecc-loc__state { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }
.ecc-loc__street { margin: 0; color: var(--ecc-ink); }
.ecc-loc__more { display: grid; gap: var(--ecc-s-1); max-height: calc(var(--ecc-s-9) * 1.5); overflow: hidden; opacity: 1; transition: max-height var(--ecc-d-slow) var(--ecc-ease-out), opacity var(--ecc-d-base) var(--ecc-ease-out); }
.ecc-loc--mini .ecc-loc__acts { display: flex; margin-top: 0; }
.ecc-loc--mini .ecc-loc__credit { margin: 0; }
.ecc-loc--mini.ecc-loc--on.is-open .ecc-loc__mark { opacity: 0; }
/* the island (React and Motion) owns the size, the lean and the lines: the sheet steps back */
.ecc-loc--mini.ecc-loc--react, .ecc-loc--mini.ecc-loc--react.ecc-loc--on:not(.is-open) { width: fit-content; max-width: 100%; transition: none; }
.ecc-loc--mini.ecc-loc--react .ecc-loc__card, .ecc-loc--react .ecc-loc__place, .ecc-loc--react .ecc-loc__mark { transition: none; }
.ecc-loc--react .ecc-loc__line, .ecc-loc--react.is-open .ecc-loc__line, .ecc-loc--react.is-near .ecc-loc__line { width: 100%; transition: none; }
.ecc-loc__extra { display: grid; gap: var(--ecc-s-1); overflow: hidden; }
.ecc-loc__extra.ecc-loc__acts { display: flex; overflow: visible; }
/* at rest */
.ecc-loc--mini.ecc-loc--on:not(.is-open) { width: min(100%, calc(var(--ecc-s-9) * 3)); }
.ecc-loc--mini.ecc-loc--on:not(.is-open) .ecc-loc__card { height: calc(var(--ecc-s-9) * 2); }
.ecc-loc--mini.ecc-loc--on:not(.is-open) .ecc-loc__vox { opacity: .5; }
.ecc-loc--mini.ecc-loc--on:not(.is-open) .ecc-loc__more { max-height: 0; opacity: 0; visibility: hidden; }
.ecc-loc--mini.ecc-loc--on:not(.is-open).is-near .ecc-loc__place { transform: translateX(var(--ecc-s-1)); }

/* ---- calm: the motion switch and the device setting stop the spread, the ring, the growth and the tilt ---- */
html[data-ecc-motion="paused"] .ecc-loc__card,
html[data-ecc-motion="paused"] .ecc-loc__map,
html[data-ecc-motion="paused"] .ecc-loc__vox,
html[data-ecc-motion="paused"] .ecc-loc--on .ecc-loc__svg,
html[data-ecc-motion="paused"] .ecc-loc--on .ecc-loc__names,
html[data-ecc-motion="paused"] .ecc-loc--on .ecc-loc__pin-name,
html[data-ecc-motion="paused"] .ecc-loc--on.is-open .ecc-loc__names,
html[data-ecc-motion="paused"] .ecc-loc--on.is-open .ecc-loc__pin-name,
html[data-ecc-motion="paused"] .ecc-loc--on.is-open .ecc-loc__pin-ring,
html[data-ecc-motion="paused"] .ecc-loc__line,
html[data-ecc-motion="paused"] .ecc-loc--mini,
html[data-ecc-motion="paused"] .ecc-loc--mini .ecc-loc__card,
html[data-ecc-motion="paused"] .ecc-loc__more,
html[data-ecc-motion="paused"] .ecc-loc__place,
html[data-ecc-motion="paused"] .ecc-loc__mark,
html[data-ecc-motion="paused"] .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__card { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  html .ecc-loc__card,
  html .ecc-loc__map,
  html .ecc-loc__vox,
  html .ecc-loc--on .ecc-loc__svg,
  html .ecc-loc--on .ecc-loc__names,
  html .ecc-loc--on .ecc-loc__pin-name,
  html .ecc-loc--on.is-open .ecc-loc__names,
  html .ecc-loc--on.is-open .ecc-loc__pin-name,
  html .ecc-loc--on.is-open .ecc-loc__pin-ring,
  html .ecc-loc__line,
  html .ecc-loc--mini,
  html .ecc-loc--mini .ecc-loc__card,
  html .ecc-loc__more,
  html .ecc-loc__place,
  html .ecc-loc__mark,
  html .ecc-loc:not(.ecc-loc--compact):not(.ecc-loc--mini) .ecc-loc__card { transition: none; animation: none; }
}