/* Immersive city experience: full-bleed photography with a readable glass editorial panel. */
.city-experience {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  color: #f4faff;
  background: #06182d;
  overscroll-behavior: contain;
  scrollbar-color: rgb(134 220 255 / 54%) rgb(4 22 41 / 45%);
}
.city-experience[open] { display: block; }
.city-experience::backdrop { background: rgb(2 12 27 / 90%); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.city-experience__scene, .city-experience__lightwash { position: fixed; inset: 0; pointer-events: none; }
.city-experience__scene {
  z-index: 0;
  background-image: linear-gradient(110deg, rgb(2 12 26 / 85%), rgb(3 19 39 / 48%) 53%, rgb(4 17 34 / 36%)), url("../assets/cities/ashgabat-night.webp");
  background-position: center;
  background-size: cover;
  transform: scale(1.015);
  animation: city-experience-image-in 700ms cubic-bezier(.2,.7,.2,1) both;
}
.city-experience__lightwash {
  z-index: 0;
  background: radial-gradient(ellipse at 76% 12%, rgb(72 181 255 / 18%), transparent 42%), linear-gradient(0deg, rgb(2 13 30 / 82%), transparent 32%, rgb(2 13 30 / 15%));
}
.city-experience__inner { position: relative; z-index: 1; display: grid; width: min(100%, 1500px); min-height: 100%; grid-template-rows: auto 1fr auto; gap: clamp(1rem, 2vh, 1.6rem); margin-inline: auto; padding: clamp(.85rem, 2.3vw, 2rem) clamp(.85rem, 4vw, 4rem) 1rem; }
.city-experience__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.city-experience__brand { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.city-experience__brand-mark { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; place-items: center; border: 1px solid rgb(167 232 255 / 55%); border-radius: .85rem; color: #d7f5ff; background: linear-gradient(145deg, rgb(105 213 255 / 26%), rgb(10 67 109 / 54%)); box-shadow: 0 0 24px rgb(57 192 255 / 18%), inset 0 1px 0 rgb(255 255 255 / 20%); font-size: 1.3rem; }
.city-experience__brand-name { margin: 0; color: #fff; font-size: .88rem; font-weight: 800; letter-spacing: .17em; }
.city-experience__brand-tag { margin: .2rem 0 0; color: #b1d7ec; font-size: .61rem; font-weight: 650; letter-spacing: .12em; }
.city-experience__close { display: grid; width: 3rem; height: 3rem; flex: 0 0 auto; place-items: center; border: 1px solid rgb(219 243 255 / 37%); border-radius: 50%; color: #f4fbff; background: rgb(5 23 45 / 68%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); cursor: pointer; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease; }
.city-experience__close span { display: block; margin-top: -.1em; font-size: 2rem; font-weight: 300; line-height: 1; }
.city-experience__close:hover { transform: rotate(90deg); border-color: #a6e9ff; background: rgb(25 100 151 / 72%); }
.city-experience__content { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); align-items: center; gap: clamp(1.2rem, 4vw, 4.6rem); width: 100%; max-width: 1260px; margin: auto; }
.city-experience__intro { max-width: 35rem; padding-block: 1rem 2rem; }
.city-experience__kicker { margin: 0 0 1.45rem; color: #a9eaff; font-size: .66rem; font-weight: 800; letter-spacing: .2em; }
.city-experience__country { display: flex; align-items: center; gap: .7rem; margin: 0 0 .75rem; color: #c8e9f7; font-size: .67rem; font-weight: 800; letter-spacing: .18em; }
.city-experience__country::before { width: 1.8rem; height: 2px; content: ""; background: #64dfff; box-shadow: 0 0 13px rgb(93 219 255 / 80%); }
.city-experience__intro h2 { max-width: 10ch; margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.2rem, 7.3vw, 7.6rem); font-weight: 400; letter-spacing: -.055em; line-height: .94; text-wrap: balance; text-shadow: 0 8px 42px rgb(1 11 25 / 50%); }
.city-experience__lead { max-width: 31rem; margin: clamp(1rem, 2.1vw, 1.75rem) 0 1rem; color: #e5f5ff; font-size: clamp(1rem, 1.55vw, 1.34rem); font-weight: 450; line-height: 1.6; text-wrap: pretty; }
.city-experience__bridge-line { display: flex; width: min(11rem, 55%); align-items: center; gap: .35rem; margin-top: 1.65rem; }
.city-experience__bridge-line span { height: 2px; flex: 1; background: linear-gradient(90deg, transparent, #83e6ff); box-shadow: 0 0 11px rgb(98 222 255 / 70%); }
.city-experience__bridge-line span:nth-child(2) { height: 4px; border-radius: 50%; flex: 0 0 4px; background: #e5fbff; }
.city-experience__bridge-line span:last-child { background: linear-gradient(90deg, #83e6ff, transparent); }
.city-experience__bridge-copy { max-width: 23rem; margin: .65rem 0 0; color: #c7e4f3; font-size: .77rem; letter-spacing: .025em; }
.city-experience__switch { display: inline-flex; align-items: center; gap: .85rem; min-height: 2.9rem; margin-top: 1.5rem; padding: .55rem 1.05rem; border: 1px solid rgb(151 225 255 / 40%); border-radius: 999px; color: #f2fbff; background: linear-gradient(110deg, rgb(70 170 223 / 25%), rgb(6 43 76 / 64%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 8px 26px rgb(0 8 22 / 20%); font: inherit; font-size: .82rem; font-weight: 720; cursor: pointer; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.city-experience__switch span { color: #9ce9ff; font-size: 1.2rem; transition: transform 180ms ease; }
.city-experience__switch:hover { transform: translateY(-2px); border-color: #a2e8ff; background: linear-gradient(110deg, rgb(74 184 241 / 34%), rgb(6 43 76 / 72%)); }
.city-experience__switch:hover span { transform: translateX(3px); }
.city-experience__glass { min-width: 0; padding: clamp(1rem, 2vw, 1.55rem); border: 1px solid rgb(194 237 255 / 36%); border-radius: 1.6rem; background: linear-gradient(145deg, rgb(12 45 72 / 71%), rgb(3 19 40 / 77%)); box-shadow: 0 26px 80px rgb(0 7 22 / 32%), inset 0 1px 0 rgb(255 255 255 / 17%), inset 0 0 40px rgb(63 170 227 / 7%); -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%); animation: city-experience-panel-in 500ms 80ms cubic-bezier(.2,.7,.2,1) both; }
.city-experience__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; padding: .3rem; border: 1px solid rgb(186 232 255 / 17%); border-radius: 999px; background: rgb(0 17 35 / 34%); }
.city-experience__tab { min-height: 2.7rem; padding: .55rem .65rem; border: 1px solid transparent; border-radius: 999px; color: #c1deee; background: transparent; font: inherit; font-size: clamp(.65rem, .85vw, .79rem); font-weight: 690; line-height: 1.25; cursor: pointer; transition: color 170ms ease, background 170ms ease, border-color 170ms ease; }
.city-experience__tab:hover { color: #fff; background: rgb(118 211 255 / 10%); }
.city-experience__tab.is-active, .city-experience__tab[aria-selected="true"] { border-color: rgb(136 221 255 / 43%); color: #fff; background: linear-gradient(135deg, rgb(58 157 209 / 39%), rgb(20 84 129 / 48%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 0 17px rgb(53 173 232 / 11%); }
.city-experience__tabpanel { min-height: 15rem; padding: clamp(1.1rem, 2vw, 1.7rem) .3rem .5rem; }
.city-experience__tabpanel h3 { margin: 0 0 .8rem; color: #f4fbff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 2.3vw, 2.1rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; }
.city-experience__tabpanel > p { margin: 0; color: #d6e8f3; font-size: clamp(.9rem, 1.04vw, 1rem); line-height: 1.75; text-wrap: pretty; }
.city-experience__points { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.city-experience__points li { position: relative; padding-left: 1.3rem; color: #e5f4fc; font-size: .88rem; line-height: 1.55; }
.city-experience__points li::before { position: absolute; top: .55em; left: .05rem; width: .42rem; height: .42rem; border: 1px solid #8ce8ff; border-radius: 50%; content: ""; background: rgb(83 211 255 / 70%); box-shadow: 0 0 10px rgb(83 211 255 / 50%); }
.city-experience__fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; margin-top: .65rem; padding: .95rem 1rem; border: 1px solid rgb(118 213 255 / 26%); border-radius: 1rem; background: linear-gradient(115deg, rgb(41 118 163 / 24%), rgb(6 34 61 / 36%)); }
.city-experience__fact-mark { color: #a3edff; font-size: 1.35rem; text-shadow: 0 0 14px rgb(102 221 255 / 70%); }
.city-experience__fact-kicker { margin: 0 0 .3rem; color: #99e4ff; font-size: .59rem; font-weight: 800; letter-spacing: .14em; }
.city-experience__fact h3 { margin: 0 0 .35rem; color: #fff; font-size: .96rem; font-weight: 760; line-height: 1.35; }
.city-experience__fact p:last-child { margin: 0; color: #cfe4f0; font-size: .79rem; line-height: 1.55; }
.city-experience__sources { display: grid; grid-template-columns: minmax(8rem, .55fr) minmax(0, 1fr); gap: .9rem; align-items: start; margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgb(194 237 255 / 18%); }
.city-experience__sources h3 { margin: .1rem 0 0; color: #a8e9ff; font-size: .71rem; font-weight: 790; letter-spacing: .04em; }
.city-experience__sources ul { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.city-experience__source-link { color: #e5f6ff; font-size: .73rem; line-height: 1.45; text-decoration-color: rgb(157 225 255 / 55%); text-underline-offset: .22em; }
.city-experience__source-link:hover { color: #fff; text-decoration-thickness: 2px; }
.city-experience__footer { display: flex; align-items: end; justify-content: space-between; gap: 1rem; max-width: 1260px; width: 100%; margin: 0 auto; color: #bdd7e7; font-size: .66rem; line-height: 1.45; }
.city-experience__footer-brand { flex: 0 0 auto; color: rgb(230 247 255 / 77%); font-size: .65rem; font-weight: 750; letter-spacing: .13em; }
.city-experience__footer-brand span { color: #76ddff; }
.city-experience button:focus-visible, .city-experience__source-link:focus-visible { outline: 3px solid #d8f7ff; outline-offset: 3px; }
.city-experience__open { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
.city-card .text-link { width: 100%; border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; text-align: left; }
@keyframes city-experience-image-in { from { opacity: .5; transform: scale(1.06); } to { opacity: 1; transform: scale(1.015); } }
@keyframes city-experience-panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) {
  .city-experience__inner { gap: 1.3rem; }
  .city-experience__content { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 1.15rem; }
  .city-experience__intro h2 { font-size: clamp(3rem, 8vw, 5.5rem); }
  .city-experience__tabs { border-radius: 1rem; }
  .city-experience__tab { min-height: 3.15rem; padding-inline: .4rem; border-radius: .75rem; }
  .city-experience__sources { grid-template-columns: 1fr; gap: .55rem; }
}
@media (max-width: 650px) {
  .city-experience__inner { gap: 1rem; padding: .7rem .7rem .85rem; }
  .city-experience__topbar { position: sticky; top: 0; z-index: 4; margin-inline: -.05rem; padding: .25rem .05rem .55rem; background: linear-gradient(180deg, rgb(3 18 37 / 70%), transparent); }
  .city-experience__brand { gap: .55rem; }
  .city-experience__brand-mark { width: 2.25rem; height: 2.25rem; border-radius: .7rem; font-size: 1.1rem; }
  .city-experience__brand-name { font-size: .72rem; letter-spacing: .12em; }
  .city-experience__brand-tag { max-width: 15rem; font-size: .52rem; letter-spacing: .07em; }
  .city-experience__close { width: 2.65rem; height: 2.65rem; }
  .city-experience__content { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
  .city-experience__intro { padding: .5rem .15rem 0; }
  .city-experience__kicker { margin-bottom: 1rem; font-size: .57rem; }
  .city-experience__country { margin-bottom: .55rem; font-size: .59rem; }
  .city-experience__intro h2 { max-width: 100%; font-size: clamp(3.25rem, 17vw, 5.6rem); }
  .city-experience__lead { max-width: 35rem; margin-top: .75rem; font-size: 1rem; line-height: 1.55; }
  .city-experience__bridge-line { margin-top: .9rem; }
  .city-experience__bridge-copy { font-size: .68rem; }
  .city-experience__switch { min-height: 2.75rem; margin-top: 1rem; font-size: .77rem; }
  .city-experience__glass { padding: .8rem; border-radius: 1.2rem; }
  .city-experience__tabs { grid-template-columns: 1fr; gap: .25rem; border-radius: .95rem; }
  .city-experience__tab { min-height: 2.7rem; text-align: left; padding: .65rem .85rem; }
  .city-experience__tabpanel { min-height: auto; padding: 1rem .2rem .5rem; }
  .city-experience__tabpanel h3 { font-size: 1.55rem; }
  .city-experience__tabpanel > p { font-size: .92rem; line-height: 1.7; }
  .city-experience__points { gap: .6rem; margin-top: .9rem; }
  .city-experience__points li { font-size: .84rem; }
  .city-experience__fact { margin-top: .5rem; padding: .8rem; }
  .city-experience__sources { grid-template-columns: 1fr; gap: .55rem; }
  .city-experience__source-link { font-size: .78rem; }
  .city-experience__footer { align-items: start; flex-direction: column; gap: .3rem; padding-top: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .city-experience__scene, .city-experience__glass { animation: none !important; }
  .city-experience__close, .city-experience__switch, .city-experience__switch span, .city-experience__tab { transition: none !important; }
}
@media (forced-colors: active) {
  .city-experience__glass, .city-experience__fact, .city-experience__tab, .city-experience__switch, .city-experience__close { border: 1px solid CanvasText; }
  .city-experience__source-link, .city-experience__lead, .city-experience__tabpanel > p, .city-experience__points li { color: CanvasText; }
}