/* Анимации лендинга TripGist (разметка — scripts/build-tripgist.mjs, поведение — tripgist-demo.js).
   Телефон — общий с демо клинера (swipe-demo.css: .sd, .sd-phone, .sd-screen, .sd-status, .sd-try); размеры — в em от --w. */

/* ---------- 1) Демо в hero: карта Парижа с районами ---------- */
.tg .sd-phone { background: #121a2c; box-shadow: 0 3.5em 8em rgba(0,0,0,.55), 0 0 0 .1em rgba(46,139,255,.4), inset 0 0 0 .12em rgba(255,255,255,.08); }
.tg-screen { background: #eef1f5; color: #111; text-align: left; }
.tg-map { position: absolute; inset: 0; }
.tg-map svg { width: 100%; height: 100%; display: block;
  background:
    repeating-linear-gradient(28deg, transparent 0 22px, rgba(255,255,255,.75) 22px 24px),
    repeating-linear-gradient(-62deg, transparent 0 30px, rgba(255,255,255,.6) 30px 32px),
    #e9edf2; }
.tg-river { fill: none; stroke: #a8d3f5; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.tg-ds path {
  fill: var(--c); fill-opacity: .26; stroke: var(--c); stroke-width: 1.4; stroke-linejoin: round; cursor: pointer;
  transform-box: fill-box; transform-origin: 50% 50%;
  transition: fill-opacity .35s ease, stroke-width .35s ease, opacity .5s ease, transform .6s cubic-bezier(.2,1.3,.4,1);
}
.tg.has-sel .tg-ds path { fill-opacity: .14; opacity: .75; }
.tg.has-sel .tg-ds path.sel { fill-opacity: .55; stroke-width: 2.6; opacity: 1; }
.tg.intro .tg-ds path { opacity: 0; transform: scale(.6); }
.tg.intro .tg-ds path.in { opacity: 1; transform: none; }
.tg-pin { transition: transform .5s cubic-bezier(.2,1.6,.4,1), opacity .3s ease; }
.tg-pin circle { fill: #ff3b30; stroke: #fff; stroke-width: 2; }
.tg-pin .in { fill: #fff; stroke: none; }
.tg.intro .tg-pin { opacity: 0; transform: translateY(-14px) scale(.5); }
.tg.intro.pins .tg-pin { opacity: 1; transform: none; transition-delay: calc(var(--i) * 90ms); }
.tg-fade { position: absolute; left: 0; right: 0; top: 0; height: 13em; background: linear-gradient(#fff 0, rgba(255,255,255,.92) 55%, rgba(255,255,255,0)); pointer-events: none; }
.tg-screen .sd-status { position: relative; z-index: 2; }
.tg-top { position: relative; z-index: 2; display: flex; align-items: center; gap: .8em; padding: .3em 1.1em 0; height: 3.4em; }
.tg-back { width: 2.9em; height: 2.9em; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 .3em 1em rgba(20,40,80,.12); flex: none; }
.tg-back svg { width: 1.2em; height: 1.2em; color: #1462e0; }
.tg-top b { font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; }
.tg-pill { margin-inline-start: auto; padding: .45em .8em; border-radius: 1em; background: #1462e0; color: #fff; font-size: .82em; font-weight: 700; white-space: nowrap; }
.tg-chips { position: relative; z-index: 2; display: flex; gap: .45em; padding: 1em 1.1em 0; white-space: nowrap; overflow: hidden; }
.tg-chips span { flex: none; padding: .45em .85em; min-width: 3.4em; min-height: 2.1em; border-radius: 1.1em; background: #fff; font-size: .85em; font-weight: 600; color: #3a3a40; box-shadow: 0 .2em .6em rgba(20,40,80,.08); }
.tg-chips span.on { background: #111; color: #fff; }
.tg-sheet {
  position: absolute; left: .9em; right: .9em; bottom: 1em; z-index: 3; display: flex; align-items: flex-start; gap: .8em;
  padding: 1.1em 1.1em 1.2em; border-radius: 1.6em; background: #fff; box-shadow: 0 1em 2.6em rgba(10,30,70,.22);
  transform: translateY(130%); transition: transform .55s cubic-bezier(.2,1.1,.3,1);
}
.tg.has-sel .tg-sheet { transform: none; }
.tg-sheet.swap { transform: translateY(130%); transition-duration: .3s; transition-timing-function: ease-in; }
.tg-sheet i { flex: none; width: 1.1em; height: 1.1em; margin-top: .25em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 .3em color-mix(in srgb, var(--c) 25%, transparent); }
.tg-sheet div { min-width: 0; display: flex; flex-direction: column; gap: .3em; }
.tg-sheet small { font-size: .85em; font-weight: 700; color: #8a8f99; text-transform: uppercase; letter-spacing: .04em; }
.tg-sheet b { font-size: 1.25em; line-height: 1.2; font-weight: 800; }
.tg .sd-try { bottom: 9.6em; }
.tg.touched .sd-try { opacity: 0; animation: none; }
/* Мини-версия на главной: подписи — «скелетон» */
.tg-mini .tg-chips span { min-width: 3.6em; }
.tg-mini .tg-chips span.on { background: #1462e0; }
.tg-mini .tg-sheet small, .tg-mini .tg-sheet b { display: block; height: .75em; width: 50%; border-radius: .4em; background: #e2e5ea; }
.tg-mini .tg-sheet b { width: 85%; height: 1em; }
.tg-mini .tg-ds path { cursor: default; }

/* ---------- 2) Карточки гида ---------- */
.gc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
@media (max-width: 860px) { .gc { grid-template-columns: 1fr; max-width: 520px; } }
.gc-card {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 22px;
  background: #fff; color: #15171c; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,1.2,.3,1);
}
.gc.dealing .gc-card { transition-delay: calc(var(--i) * 160ms); }
.gc-card h3 { margin: 0; font-size: 21px; letter-spacing: -.3px; }
.gc-card p { margin: 0; color: #4a4f5c; font-size: 15px; line-height: 1.5; flex: 1; }
.gc-label { align-self: flex-start; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.gc-card.food .gc-label { background: #fff1dc; color: #b45f00; }
.gc-card.tip .gc-label { background: #e3efff; color: #1462e0; }
.gc-card.scam .gc-label { background: #ffe4e2; color: #d1291f; }
.gc-city { font-size: 13px; color: #8a8f99; font-weight: 600; }
.gc.reset .gc-card { opacity: 0; transform: translateY(60px) rotate(calc((var(--i) - 1) * 5deg)) scale(.92); }
@media (min-width: 861px) {
  .gc-card.food { transform: rotate(-2deg); } .gc-card.scam { transform: rotate(2deg); } .gc-card.tip { transform: translateY(-10px); }
  .gc-card:hover { transform: translateY(-6px) rotate(0); }
}

/* ---------- 3) Мои страны ---------- */
.wc {
  position: relative; max-width: 900px; margin: 0 auto; padding: 22px 22px 18px; border-radius: 24px;
  background: linear-gradient(180deg, var(--card-2), var(--card)); border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.wc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-size: 17px; }
.wc-count { color: var(--muted); font-variant-numeric: tabular-nums; }
.wc-count b { color: #fff; font-size: 26px; font-weight: 800; display: inline-block; }
.wc-count b.bump { animation: wc-bump .35s ease; }
@keyframes wc-bump { 50% { transform: scale(1.25); color: #ff7b72; } }
.wc-map { width: 100%; height: auto; display: block; }
.wc-map path { fill: #2a3552; stroke: var(--card); stroke-width: .5; cursor: pointer; transition: fill .45s ease; }
.wc-map path:hover { fill: #3a4870; }
.wc-map path.v { fill: #2e8bff; }
.wc-map path.v:hover { fill: #5aa4ff; }
.wc-map path.flash { fill: #ff7b72; transition: none; }
@media (max-width: 480px) { .wc { padding: 18px 12px 12px; } .wc-head { font-size: 15px; } }

@media (prefers-reduced-motion: reduce) {
  .tg-ds path, .tg-pin, .tg-sheet, .gc-card, .wc-map path { transition: none; }
}