/* ===========================================================================
   LOCATION PAGES

   The accent tokens are set inline, per city, by fxvps_location_palette().
   Nothing in this file hard-codes a colour that should follow the city —
   everything reads var(--accent) / var(--accent-rgb) so all 35 pages inherit
   their own palette without a stylesheet each.

   data-art picks the backdrop. Six motifs, so neighbouring cities do not
   look like the same page with the hue slider moved.
   ======================================================================== */

/* --- the per-city backdrop --------------------------------------------- */
.fxvps-loc .prod-bg .art{
  position:absolute;inset:0;pointer-events:none;
  opacity:.5;
}

/* rings — concentric pulses out of the upper right */
[data-art="rings"] .prod-bg .art{
  background:
    radial-gradient(circle at 78% 22%,transparent 0 118px,rgba(var(--accent-rgb),.10) 119px 120px,transparent 121px),
    radial-gradient(circle at 78% 22%,transparent 0 208px,rgba(var(--accent-rgb),.07) 209px 210px,transparent 211px),
    radial-gradient(circle at 78% 22%,transparent 0 318px,rgba(var(--accent-rgb),.05) 319px 320px,transparent 321px);
  animation:fx-art-breathe 14s ease-in-out infinite;
}

/* grid — a tilted lattice that drifts */
[data-art="grid"] .prod-bg .art{
  background-image:
    linear-gradient(rgba(var(--accent-rgb),.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--accent-rgb),.055) 1px,transparent 1px);
  background-size:62px 62px;
  transform:perspective(620px) rotateX(58deg) scale(2.1);
  transform-origin:50% 0;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.85),transparent 62%);
  animation:fx-art-drift 22s linear infinite;
}

/* beam — two wide shafts sweeping across */
[data-art="beam"] .prod-bg .art{
  background:
    linear-gradient(104deg,transparent 28%,rgba(var(--accent-rgb),.09) 40%,transparent 52%),
    linear-gradient(104deg,transparent 56%,rgba(var(--accent-rgb),.055) 66%,transparent 76%);
  animation:fx-art-sweep 19s ease-in-out infinite;
}

/* orbit — one ellipse carrying a bright node */
[data-art="orbit"] .prod-bg .art{
  background:
    radial-gradient(ellipse 640px 240px at 68% 30%,transparent 0 60%,rgba(var(--accent-rgb),.10) 61% 62%,transparent 63%),
    radial-gradient(circle at 68% 30%,rgba(var(--accent-rgb),.16),transparent 56%);
  animation:fx-art-tilt 24s ease-in-out infinite;
}

/* wave — stacked sine bands low on the page */
[data-art="wave"] .prod-bg .art{
  background:
    repeating-linear-gradient(
      -14deg,
      transparent 0 44px,
      rgba(var(--accent-rgb),.05) 44px 46px
    );
  mask-image:radial-gradient(ellipse 120% 70% at 50% 85%,#000,transparent 72%);
  animation:fx-art-drift 26s linear infinite reverse;
}

/* pulse — a soft core that swells */
[data-art="pulse"] .prod-bg .art{
  background:radial-gradient(circle at 72% 34%,rgba(var(--accent-rgb),.20),transparent 46%);
  animation:fx-art-breathe 11s ease-in-out infinite;
}

/* transform/opacity only — these sit under a long scrolling page */
@keyframes fx-art-breathe{0%,100%{opacity:.38;transform:scale(1)}50%{opacity:.62;transform:scale(1.07)}}
@keyframes fx-art-drift{to{background-position:62px 62px}}
@keyframes fx-art-sweep{0%,100%{transform:translateX(-6%)}50%{transform:translateX(6%)}}
@keyframes fx-art-tilt{0%,100%{transform:rotate(-3deg) scale(1)}50%{transform:rotate(3deg) scale(1.05)}}

@media (prefers-reduced-motion:reduce){
  .fxvps-loc .prod-bg .art{animation:none}
}

/* --- hero badge --------------------------------------------------------- */
.loc-badge .fx-flag{width:20px;height:15px;border-radius:3px;display:block}
.loc-badge i.is-hub{
  font-style:normal;margin-left:2px;padding:3px 7px;border-radius:5px;
  font-size:9px;font-weight:800;letter-spacing:.12em;
  color:var(--accent-ink);background:var(--accent);
}

.fxvps-loc .loc-clock{font-variant-numeric:tabular-nums}

/* --- the routing card --------------------------------------------------- */
.loc-route{padding:16px 18px 4px}
.loc-route-hub{
  display:flex;align-items:flex-start;gap:11px;margin:0 0 12px;
  font-size:13px;line-height:1.6;color:var(--muted);
}
.loc-route-hub svg{flex:0 0 auto;margin-top:1px;color:var(--accent)}
.loc-route-hub b{color:var(--ink);font-weight:700}

.loc-route-rows{margin:0;display:grid;gap:10px}
.loc-route-rows > div{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.loc-route-rows > div:last-child{border-bottom:0;padding-bottom:0}
.loc-route-rows dt{font-size:11.5px;color:var(--muted-2);letter-spacing:.02em}
.loc-route-rows dd{
  margin:0;display:flex;align-items:center;gap:7px;
  font-size:13.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
}
.loc-route-rows dd .fx-flag{width:18px;height:13px;border-radius:2px}
.loc-route-rows dd i{
  font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;color:var(--accent);
}

.loc-nearby{padding:14px 18px 16px;border-top:1px solid var(--line)}
.loc-nearby-l{
  display:block;margin-bottom:9px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.loc-nearby ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.loc-nearby li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.loc-nearby li .fx-flag{width:17px;height:13px;border-radius:2px;flex:0 0 auto}
.loc-nearby li b{font-weight:600;color:var(--ink)}
.loc-nearby li i{
  margin-left:auto;font-style:normal;font-size:11.5px;color:var(--muted-2);
  font-variant-numeric:tabular-nums;
}

/* --- the physics caveat ------------------------------------------------- */
.loc-caveat{
  display:flex;align-items:flex-start;gap:10px;
  max-width:860px;margin:0 auto;padding:0 clamp(16px,4vw,24px);
  font-size:12.5px;line-height:1.7;color:var(--muted-2);
}
.loc-caveat svg{flex:0 0 auto;margin-top:4px;color:var(--accent)}
.loc-caveat a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(var(--accent-rgb),.35)}
.loc-caveat a:hover{border-bottom-color:var(--accent)}

/* --- the market brief --------------------------------------------------- */
.loc-brief-in{
  display:grid;gap:clamp(18px,2.4vw,30px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  align-items:start;
}
@media (max-width:860px){.loc-brief-in{grid-template-columns:1fr}}

.loc-brief-copy p{margin:0 0 16px;font-size:14.5px;line-height:1.78;color:var(--muted)}
.loc-pairs-l{
  font-size:9.5px!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:9px!important;
}
.loc-pairs{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.loc-pairs li{
  padding:7px 13px;border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--accent);background:rgba(var(--accent-rgb),.1);
  border:1px solid rgba(var(--accent-rgb),.26);
  font-variant-numeric:tabular-nums;
}
.loc-peak{
  display:flex;align-items:flex-start;gap:9px;
  font-size:12.5px!important;color:var(--muted-2)!important;margin:0!important;
}
.loc-peak svg{flex:0 0 auto;margin-top:3px;color:var(--accent)}

.loc-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.loc-facts li{
  padding:15px 17px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-left:2px solid rgba(var(--accent-rgb),.5);
}
.loc-fact-k{
  display:block;margin-bottom:4px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.loc-fact-v{display:block;margin-bottom:5px;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.loc-fact-n{display:block;font-size:12.5px;line-height:1.6;color:var(--muted-2)}

/* --- the session strip -------------------------------------------------- */
.loc-ses{
  max-width:780px;margin-inline:auto;display:grid;gap:9px;
  padding:clamp(16px,2vw,22px);border-radius:18px;
  background:rgba(255,255,255,.026);border:1px solid var(--line);
}
.loc-ses-row{
  display:grid;align-items:center;gap:12px;
  grid-template-columns:86px minmax(0,1fr) 128px 58px;
}
@media (max-width:700px){
  .loc-ses-row{grid-template-columns:72px minmax(0,1fr) 54px}
  .loc-ses-when{display:none}
}
.loc-ses-name{font-size:13px;font-weight:700;color:var(--muted)}
.loc-ses-row.is-open .loc-ses-name{color:var(--ink)}

.loc-ses-bar{
  display:block;height:6px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.055);
}
.loc-ses-bar i{
  display:block;height:100%;border-radius:999px;
  background:rgba(255,255,255,.1);
  transform:scaleX(.22);transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.7,.2,1),background-color .3s ease;
}
.loc-ses-row.is-open .loc-ses-bar i{
  transform:scaleX(1);
  background:linear-gradient(90deg,var(--accent-2),var(--accent));
}

.loc-ses-when{font-size:11.5px;color:var(--muted-2);font-variant-numeric:tabular-nums}
.loc-ses-state{
  justify-self:end;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);
}
.loc-ses-row.is-open .loc-ses-state{color:var(--accent)}

/* --- the "see every plan" line ----------------------------------------- */
.loc-more{
  max-width:860px;margin:0 auto;padding:0 clamp(16px,4vw,24px);
  font-size:13.5px;line-height:1.7;color:var(--muted-2);text-align:center;
}
.loc-more a{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--accent);text-decoration:none;font-weight:700;white-space:nowrap;
}
.loc-more a svg{transition:transform .18s ease}
.loc-more a:hover svg{transform:translateX(3px)}

/* --- node tiles (nearby, and the whole index) --------------------------- */
.loc-grid{
  display:grid;gap:11px;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
}

.loc-tile{
  position:relative;display:grid;gap:3px;
  grid-template-columns:auto 1fr auto;grid-template-areas:
    "flag name go"
    "flag code go";
  align-items:center;
  padding:14px 16px;border-radius:14px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .2s cubic-bezier(.22,.7,.2,1),border-color .2s ease,background-color .2s ease;
}
.loc-tile:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--accent-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),rgba(255,255,255,.015));
}
.loc-tile.is-hub{border-left:2px solid var(--accent)}

.loc-tile-flag{grid-area:flag;margin-right:11px;display:block}
.loc-tile-flag .fx-flag{width:24px;height:18px;border-radius:3px;display:block}
.loc-tile-name{grid-area:name;font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.loc-tile-code{
  grid-area:code;font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--muted-2);
}
.loc-tile-code i{
  font-style:normal;margin-left:4px;padding:1px 5px;border-radius:4px;
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:rgba(var(--accent-rgb),.14);
}
.loc-tile-km{
  grid-area:go;font-size:11px;color:var(--muted-2);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.loc-tile-go{grid-area:go;color:var(--muted-2);display:grid;place-items:center;transition:transform .18s ease,color .18s ease}
.loc-tile:hover .loc-tile-go{transform:translateX(3px);color:var(--accent)}

/* --- the index's region blocks ------------------------------------------ */
.loc-regions{display:grid;gap:clamp(26px,3.4vw,44px)}
.loc-region-h{
  display:flex;align-items:baseline;gap:12px;margin-bottom:14px;
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
.loc-region-h h2{margin:0;font-size:clamp(18px,2vw,22px);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.loc-region-h span{
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
}