/* ============================================================
   Bati Kaya — shared cross-page UI
   Mobile navigation, "on now" badges, skeletons, a11y helpers.
   Loaded by every page so nav behaviour stays consistent.
   ============================================================ */

/* --- Motion tokens ---
   These are NOT new curves. They're the two this site already uses,
   given names so future work reuses them instead of inventing a third:
     --ease-out  the Spotlight card's entrance curve   (.bk-spot)
     --ease-pop  the language switcher's springy curve (.lang-opt)
   Durations stay inline. They vary too much per element for a scale to
   earn its keep here, and a half-followed scale is worse than none.
   Anything new should animate transform and opacity only. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-pop:cubic-bezier(.34,1.4,.5,1);
}

/* --- Accessibility: visible focus + skip link --- */
:focus-visible{outline:2px solid #2dd4bf;outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#ff5d73;color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;font-size:14px}
.skip-link:focus{left:0}

/* --- Mobile bottom tab bar (app-like) --- */
/* NOTE: this is a <nav>, and every page also has a generic
   `nav{position:sticky;top:0}` rule. Without an explicit `top:auto`
   the element inherits top:0, and a fixed box with both top:0 and
   bottom:0 stretches to fill the viewport — which rendered the whole
   site as an opaque dark sheet. Keep top/height pinned defensively. */
nav.mnav{
  position:fixed;
  top:auto;
  bottom:0;
  left:0;
  right:0;
  height:auto;
  z-index:90;
  display:none;
  background:rgba(10,13,20,.94);
  backdrop-filter:blur(16px);
  border-top:1px solid #232a3b;
  border-bottom:none;
  padding-bottom:env(safe-area-inset-bottom);
}
.mnav-in{display:flex;justify-content:space-around;align-items:stretch}
.mnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:9px 4px 8px;font-size:10.5px;font-weight:600;color:#8b93a7;
  min-height:56px;text-align:center;letter-spacing:.01em;position:relative;
}
.mnav a svg{width:21px;height:21px;stroke-width:1.9}
.mnav a.on{color:#eef1f7}
.mnav a.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:#ff5d73;
}
.mnav a .mnav-dot{
  position:absolute;top:7px;right:calc(50% - 18px);
  width:7px;height:7px;border-radius:50%;background:#ff5d73;
  box-shadow:0 0 0 2px rgba(10,13,20,.94);
}

/* Show tab bar on phones/tablets; add body padding so content clears it */
@media(max-width:960px){
  nav.mnav{display:block}
  body{padding-bottom:60px}
}
/* Pages with their own fixed bottom bar opt out via .has-own-bottombar */
@media(max-width:960px){
  body.has-own-bottombar nav.mnav{display:none}
  body.has-own-bottombar{padding-bottom:0}
}

/* --- "Happening now" pills, shared across pages --- */
.live-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap;
}
.live-pill.now{background:rgba(45,212,191,.15);color:#2dd4bf;border:1px solid rgba(45,212,191,.45)}
.live-pill.soon{background:rgba(251,191,36,.13);color:#fbbf24;border:1px solid rgba(251,191,36,.4)}
.live-pill.party{background:rgba(255,93,115,.13);color:#ff5d73;border:1px solid rgba(255,93,115,.4)}
.live-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.live-pill.now .live-dot{animation:livePulse 1.8s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.25}}

/* --- Respect reduced-motion preferences --- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- Skeleton loading --- */
.skel{background:linear-gradient(90deg,#161b28 25%,#1c2333 50%,#161b28 75%);
  background-size:200% 100%;animation:skelSlide 1.4s linear infinite;border-radius:8px}
@keyframes skelSlide{to{background-position:-200% 0}}

/* --- Empty state --- */
.empty-state{text-align:center;padding:44px 20px;color:#8b93a7}
.empty-state .es-icon{font-size:34px;margin-bottom:10px;opacity:.7}
.empty-state p{margin-bottom:16px;font-size:14.5px}

/* --- Bigger touch targets on mobile --- */
@media(max-width:720px){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* --- Social links (shared footer treatment) --- */
.socials{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:14px}
.socials a{
  width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #232a3b;background:#11151f;color:#8b93a7;transition:.18s;flex-shrink:0;
}
.socials a:hover{color:#eef1f7;border-color:#ff5d73;transform:translateY(-2px)}
.socials a svg{width:18px;height:18px;fill:currentColor}
.socials-label{font-size:12px;color:#5a6275;margin-right:2px}

/* ============================================================
   MOBILE HARDENING — applies to every page
   Fixes the common killers: horizontal overflow, cramped
   padding, tiny tap targets, grids that don't collapse,
   and sticky bars stacking on top of each other.
   ============================================================ */

/* Never allow sideways scroll. A single wide element used to
   push the whole layout off-screen on phones. */
html,body{max-width:100%;overflow-x:hidden}
img,video,svg,iframe,table{max-width:100%}

@media(max-width:860px){
  /* Tighter gutters buy ~16px of usable width on small phones */
  .wrap{padding:0 16px}
  section{padding:52px 0}

  /* Readable, non-shouty headings */
  h2{font-size:clamp(23px,6vw,30px)}
  .lead{font-size:15.5px}

  /* Any 2+ column grid collapses to a single column */
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr!important}
  .duo,.biz,.explore-band,.foot-grid,.mapstage,.layout,.builder-grid,.related{
    grid-template-columns:1fr!important}
  .cat-grid{grid-template-columns:repeat(2,1fr)!important}

  /* Stacked sticky bars must not cover the content */
  .filters{position:static!important}

  /* Horizontal scrollers get momentum + hidden scrollbars.
     NOTE: .recent-rail is a grid using grid-auto-columns, deliberately NOT
     grid-template-columns — the 1fr!important collapse rules above would
     otherwise flatten it into a single stacked column. Don't "tidy" it. */
  .chips,.tabs,.map-chips,.day-strip,.tierrow,.recent-rail{
    overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips::-webkit-scrollbar,.tabs::-webkit-scrollbar,
  .map-chips::-webkit-scrollbar,.day-strip::-webkit-scrollbar,
  .recent-rail::-webkit-scrollbar{display:none}
  .chip,.tab,.mchip{flex:0 0 auto}
}

@media(max-width:640px){
  .wrap{padding:0 14px}
  section{padding:44px 0}
  .cat-grid{grid-template-columns:1fr!important}

  /* iOS zooms the page if an input is under 16px — never let it */
  input,select,textarea{font-size:16px!important}

  /* Comfortable thumb targets */
  .btn{min-height:46px;padding:13px 20px}
  .chip,.tab,.mchip,.day-btn{min-height:38px;display:inline-flex;align-items:center}

  /* Full-width primary actions read better on a phone */
  .hero-ctas .btn,.cta-panel .btn{width:100%}

  /* Maps need real estate but not the whole screen */
  .mapwrap{height:400px!important}
  .sidepanel{max-height:none!important}
}

/* Footer social row centres nicely once the grid collapses */
@media(max-width:640px){
  .foot-grid{gap:26px}
  .socials{margin-top:10px}
}

/* ============================================================
   MOBILE FIXES verified against a real 390px render
   ============================================================ */
@media(max-width:860px){
  /* Header was overflowing: the CTA wrapped to two lines (68px tall
     inside a 65px bar). Keep it on one line and let it shrink. */
  .nav-in{gap:8px}
  .brand{font-size:15px;flex-shrink:0}
  .brand-icon{height:30px}
  .nav-cta{padding:8px 13px;font-size:12px;white-space:nowrap;line-height:1.2}
  .nav-right{gap:8px;flex-shrink:0}
  .lang-toggle button{padding:6px 9px;font-size:11px}

  /* Map header: side-by-side columns pushed the chips to 587px in a
     370px viewport, clipping them out of reach. Stack and scroll. */
  .map-head{display:block!important}
  .map-head > div{align-items:stretch!important;width:100%}
  .map-head .btn{width:100%;margin-top:14px}
  .map-chips{margin-top:12px;width:100%;padding-bottom:4px}

  /* Anything using inline flex-end alignment shouldn't overflow */
  .map-head > div[style*="flex-end"]{align-items:stretch!important}
}

@media(max-width:560px){
  /* On the narrowest phones the waitlist CTA is redundant — the
     bottom tab bar and in-page CTAs already cover it. */
  .nav-cta{display:none}
}

/* Third-party chat bubble must not cover the bottom tab bar */
@media(max-width:960px){
  iframe[title*="chat" i],
  #tawkchat-minified,
  .widget-visible iframe{bottom:68px!important}
}

/* ============================================================
   SITE-WIDE SEARCH (search.js)
   ============================================================ */
.searchbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:none;border:1px solid #232a3b;color:#8b93a7;
  cursor:pointer;transition:.16s;padding:0;
}
.searchbtn:hover{color:#eef1f7;border-color:#2dd4bf}
.searchbtn svg{width:17px;height:17px;display:block}

.searchov{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(6,8,13,.72);backdrop-filter:blur(6px);
  padding:14vh 18px 24px;
}
.searchov.on{display:block}
.searchbox{
  max-width:620px;margin:0 auto;background:#11151f;
  border:1px solid #232a3b;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.searchbar{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #232a3b}
.searchbar svg{width:19px;height:19px;color:#8b93a7;flex:0 0 19px}
.searchbar input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:#eef1f7;font-family:inherit;font-size:16px;padding:4px 0;
}
.searchbar input::placeholder{color:#5a6275}
.searchbar input::-webkit-search-cancel-button{display:none}
.searchclose{
  background:none;border:1px solid #232a3b;border-radius:7px;color:#5a6275;
  font:inherit;font-size:11px;letter-spacing:.05em;padding:4px 8px;cursor:pointer;
}
.searchclose:hover{color:#eef1f7;border-color:#39415a}

.searchresults{max-height:min(56vh,440px);overflow-y:auto}
.sr{display:flex;align-items:center;gap:13px;padding:11px 16px;text-decoration:none;color:inherit;border-bottom:1px solid rgba(35,42,59,.55)}
.sr:last-child{border-bottom:none}
.sr.on,.sr:hover{background:#161b28}
.sr-thumb{width:46px;height:46px;flex:0 0 46px;border-radius:10px;background-size:cover;background-position:center;background-color:#161b28}
.sr-noimg{background-image:linear-gradient(130deg,#1c2436,#141926)}
.sr-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-txt b{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:600;color:#eef1f7;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-txt span{font-size:12px;color:#8b93a7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-kind{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:#8b93a7;
  border:1px solid #232a3b;border-radius:999px;padding:3px 9px;white-space:nowrap}
.sr-empty{padding:30px 22px;text-align:center;color:#8b93a7;font-size:14.5px;line-height:1.7}
.sr-empty span{color:#5a6275;font-size:13px}

@media(max-width:640px){
  .searchov{padding:0}
  .searchbox{max-width:none;height:100%;border:none;border-radius:0;display:flex;flex-direction:column}
  .searchbar{padding-top:calc(12px + env(safe-area-inset-top))}
  .searchresults{max-height:none;flex:1}
  .searchbtn{width:36px;height:36px;flex:0 0 36px}
}

/* ============================================================
   SPOTLIGHT — the paid placement card (spotlight.js)
   Corner card, never a full-screen interruption. Sits above the
   mobile tab bar rather than covering it.
   ============================================================ */
.bk-spot{
  position:fixed; z-index:120; right:22px; bottom:22px; width:318px;
  background:#0f141f; border:1px solid #2a3348; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.65), 0 0 0 1px rgba(255,181,46,.14);
  transform:translateY(22px) scale(.97); opacity:0;
  transition:transform .42s cubic-bezier(.22,1,.36,1), opacity .32s ease;
  font-family:'Inter',system-ui,sans-serif;
}
.bk-spot.in{transform:none;opacity:1}
.bk-spot-link{display:block;color:inherit;text-decoration:none}

.bk-spot-img{
  height:138px; background:#161b28 center/cover no-repeat; position:relative;
}
.bk-spot-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(15,20,31,.96) 6%,rgba(15,20,31,0) 62%);
}
.bk-spot-tag{
  position:absolute; top:11px; left:11px; z-index:1;
  font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:#0a0d14; background:#ffb52e; border-radius:999px; padding:4px 11px;
  box-shadow:0 3px 14px rgba(255,181,46,.4);
}
.bk-spot-body{padding:13px 16px 15px}
.bk-spot-kicker{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:#8590a6; margin-bottom:5px;
}
.bk-spot-body b{
  font-family:'Space Grotesk',sans-serif; font-size:20px; line-height:1.15;
  color:#f2f4f9; display:block; letter-spacing:-.01em;
}
.bk-spot-live{
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; color:#8590a6;
  border:1px solid #2a3348; border-radius:999px; padding:4px 11px;
}
.bk-spot-live i{width:6px;height:6px;border-radius:50%;background:#8590a6;flex:0 0 6px}
.bk-spot-live.is-open{color:#2dd4bf;border-color:rgba(45,212,191,.42);background:rgba(45,212,191,.09)}
.bk-spot-live.is-open i{background:#2dd4bf;animation:bkSpotPulse 1.9s ease-in-out infinite}
@keyframes bkSpotPulse{0%,100%{opacity:1}50%{opacity:.25}}
.bk-spot-body p{
  margin:10px 0 0; font-size:13px; line-height:1.5; color:#a8b1c4;
}
.bk-spot-hours{
  display:block; margin-top:9px; font-size:11.5px; color:#6b7488; line-height:1.45;
}
.bk-spot-cta{
  display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:#ffb52e;
}
.bk-spot-link:hover .bk-spot-cta{text-decoration:underline}

.bk-spot-x{
  position:absolute; top:9px; right:9px; z-index:2;
  width:28px; height:28px; border-radius:50%; cursor:pointer;
  background:rgba(6,9,15,.62); border:1px solid rgba(255,255,255,.16); color:#e6eaf2;
  font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:.15s; padding:0;
}
.bk-spot-x:hover{background:rgba(6,9,15,.9);border-color:#ffb52e;color:#ffb52e}

/* Honest labelling. Also a trust signal: it says the rest of the site isn't bought. */
.bk-spot-disc{
  display:block; padding:8px 16px 11px; border-top:1px solid #1d2434;
  font-size:10px; letter-spacing:.05em; color:#5b6478; background:#0b0f18;
}
.bk-spot-disc a{color:#7c8798;text-decoration:underline}
.bk-spot-disc a:hover{color:#ffb52e}

@media(max-width:640px){
  .bk-spot{
    right:12px; left:12px; width:auto;
    bottom:calc(70px + env(safe-area-inset-bottom));  /* clear the mobile tab bar */
  }
  .bk-spot-img{height:112px}
  .bk-spot-body b{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
  .bk-spot{transition:opacity .2s}
  .bk-spot-live.is-open i{animation:none}
}

/* ============================================================
   TOP NAV — one row, never wraps.
   The bar used to wrap to two lines on pages with long labels,
   which made the header a different height on every page.
   ============================================================ */
nav .nav-links{flex-wrap:nowrap!important;white-space:nowrap}
nav .nav-links a{white-space:nowrap;flex:0 0 auto}
nav .nav-in{flex-wrap:nowrap;min-height:64px}
nav .brand{flex:0 0 auto;white-space:nowrap}
@media(max-width:1100px){ nav .nav-links{display:none!important} }

/* ============================================================
   EXPLORE CARDS — real <img>, whole photo, properly cropped.
   Background-images were cropping venue photos at an arbitrary
   65% and rendering unpredictably; an <img> with object-fit
   fills the card edge-to-edge every time.
   ============================================================ */
.card-top.photo{padding:0!important;align-items:stretch!important}
.card-top .cimg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;z-index:0;
  transition:transform .45s ease;
}
/* Desktop only. On a touch device the tap fires a hover, and the photo
   stays zoomed after you come back from the venue page — see the matching
   gate on .card:hover in explore.html. */
@media (hover:hover) and (pointer:fine){
  .card:hover .card-top .cimg{transform:scale(1.06)}
}
.card-top.photo::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(10,13,20,.55) 0%,rgba(10,13,20,0) 55%);
}
.card-top .fav,.card-top .nophoto{position:relative;z-index:2}
.card-top.photo .fav{position:absolute;top:12px;right:14px}

/* ============================================================
   PHOTO GRID (photogrid.js) — breaks up the long guide pages
   ============================================================ */
.pgrid-mount{margin:34px 0 40px}
.pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pg-head h2{margin:0!important;font-size:clamp(22px,3vw,30px)!important}
.pg-head a{font-size:13.5px;font-weight:700;color:#8590a6;white-space:nowrap}
.pg-head a:hover{color:#2dd4bf}

.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.pgrid{grid-template-columns:repeat(2,1fr);gap:10px}}

.pg-card{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  aspect-ratio:4/5;background:#141a26;border:1px solid #1d2434;
  transition:transform .22s ease,border-color .22s ease;text-decoration:none;
}
.pg-card:hover{transform:translateY(-4px);border-color:#33405c}
.pg-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;z-index:0}
.pg-card:hover img{transform:scale(1.07)}
.pg-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,7,13,.93) 8%,rgba(5,7,13,.15) 58%,rgba(5,7,13,.35) 100%)}

.pg-cat{position:absolute;top:9px;left:9px;z-index:2;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:rgba(5,7,13,.72);border-radius:999px;padding:4px 9px;backdrop-filter:blur(6px)}
.pg-live{position:absolute;top:9px;right:9px;z-index:2;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;color:#06251f;background:#2dd4bf;
  border-radius:999px;padding:4px 9px;max-width:60%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.pg-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px 13px}
.pg-txt b{display:block;font-family:'Space Grotesk',sans-serif;font-size:15px;
  line-height:1.2;color:#fff;margin-bottom:3px}
.pg-txt em{display:block;font-style:normal;font-size:11px;color:#a8b1c4;
  letter-spacing:.05em;text-transform:uppercase}
@media(max-width:640px){.pg-txt b{font-size:13.5px}.pg-txt em{font-size:10px}}

/* Hero strip for the guide pages that had no image at all */
.guide-hero{position:relative;height:clamp(260px,38vh,380px);overflow:hidden;
  border-radius:0 0 24px 24px;margin-bottom:-10px}
.guide-hero img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.guide-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,13,20,.25),rgba(10,13,20,.92))}

/* ============================================================
   LANGUAGE WHEEL  (used by lang.js)
   Lives here, not in a page's own <style>, so that ANY page which
   loads lang.js gets the wheel styled. When these rules were only
   in index.html the button rendered on the trip planner as a bare
   unstyled list of four links spilling across the nav.

   Colours are literal on purpose: pages define their own CSS
   variables with different names (--mut vs --muted), so var()
   here would silently resolve to nothing on half the site.
   ============================================================ */
.lang-wrap{position:relative;display:inline-flex}
.lang-btn{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid #232a3b;
  color:#8b93a7;border-radius:999px;padding:8px 14px 8px 11px;
  font:700 12px/1 'Inter',system-ui,sans-serif;letter-spacing:.06em;cursor:pointer;transition:.18s}
.lang-btn:hover{color:#fff;border-color:#2dd4bf}
.lang-btn svg{width:16px;height:16px;flex:0 0 auto}
.lang-wheel{position:absolute;top:calc(100% + 14px);right:0;
  width:184px;height:184px;pointer-events:none;z-index:120}
.lang-opt{position:absolute;right:6px;top:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;height:62px;border-radius:50%;background:rgba(15,20,31,.96);border:1px solid #232a3b;
  color:#8b93a7;cursor:pointer;font-family:'Inter',system-ui,sans-serif;backdrop-filter:blur(14px);
  opacity:0;transform:scale(.4);
  transition:transform .32s cubic-bezier(.34,1.4,.5,1),opacity .22s,border-color .18s,color .18s;
  transition-delay:calc(var(--i) * 45ms)}
.lang-opt b{font-size:14px;font-weight:700;letter-spacing:.04em;line-height:1}
.lang-opt span{font-size:8.5px;letter-spacing:.03em;margin-top:3px;opacity:.75;line-height:1}
.lang-opt:hover{color:#fff;border-color:#2dd4bf;background:#131b2a}
.lang-opt.on{color:#06251f;background:#2dd4bf;border-color:#2dd4bf}
/* fan out along an arc when open */
.lang-wrap.open .lang-wheel{pointer-events:auto}
.lang-wrap.open .lang-opt{opacity:1}
.lang-wrap.open .lang-opt:nth-child(1){transform:translate(-4px,4px) scale(1)}
.lang-wrap.open .lang-opt:nth-child(2){transform:translate(-64px,22px) scale(1)}
.lang-wrap.open .lang-opt:nth-child(3){transform:translate(-102px,72px) scale(1)}
.lang-wrap.open .lang-opt:nth-child(4){transform:translate(-114px,134px) scale(1)}
@media(max-width:640px){
  .lang-wheel{width:170px;height:170px}
  .lang-opt{width:56px;height:56px}
  .lang-wrap.open .lang-opt:nth-child(2){transform:translate(-58px,20px) scale(1)}
  .lang-wrap.open .lang-opt:nth-child(3){transform:translate(-92px,66px) scale(1)}
  .lang-wrap.open .lang-opt:nth-child(4){transform:translate(-102px,122px) scale(1)}
}
@media(prefers-reduced-motion:reduce){.lang-opt{transition:opacity .15s;transition-delay:0s}}