.znachok { position: fixed; left: clamp(16px, 3vw, 34px); bottom: clamp(16px, 3vw, 34px);
           z-index: 200; width: 62px; height: 62px; padding: 0; border-radius: 50%;
           border: 1px solid rgba(31,43,37,.14); background: var(--paper);
           box-shadow: 0 6px 20px rgba(31,43,37,.16);
           display: none; place-items: center; cursor: pointer;
           transition: transform .2s ease, box-shadow .2s ease; }
body.igra-idet .znachok { display: grid; animation: znachok-poyavilsya .45s ease both; }
@keyframes znachok-poyavilsya { from { opacity: 0; transform: scale(.7) translateY(10px); } }
.znachok:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31,43,37,.2); }
.znachok:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }
.znachok svg { width: 30px; height: 30px; display: block; color: var(--forest); }

.znachok-schet { position: absolute; right: -8px; bottom: -4px; padding: 2px 7px;
                 border-radius: 999px; background: var(--apricot); color: var(--paper);
                 font: 600 11px/1.45 "Rubik", sans-serif; letter-spacing: .02em;
                 box-shadow: 0 2px 8px rgba(31,43,37,.24); }
.znachok.pryg { animation: znachok-pryg .55s ease; }
@keyframes znachok-pryg { 0%,100% { transform: none; } 30% { transform: translateY(-9px) scale(1.07); } }

.shtora-karta { position: fixed; inset: 0; z-index: 210; display: none; place-items: center;
                padding: 20px; background: rgba(23,50,41,.42); backdrop-filter: blur(3px); }
.shtora-karta.vidno { display: grid; }

.karta-oberta { width: min(1100px, 100%); margin-inline: auto; }
.karta { position: relative; width: min(1100px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
         padding: clamp(20px, 2.4vw, 32px); border-radius: var(--radius-lg); background: var(--paper);
         box-shadow: 0 2px 16px rgba(31,43,37,.07); animation: karta-vyehala .28s ease both; }
@keyframes karta-vyehala { from { opacity: 0; transform: translateY(14px); } }
.karta-zakryt { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
                border-radius: 50%; border: 1px solid var(--line); background: var(--paper);
                color: var(--forest); font: 400 22px/1 "Rubik", sans-serif; cursor: pointer; }
.karta-zakryt:hover { background: var(--sage-light); }

.karta-verh { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-right: 44px; }
.karta-verh h2 { margin: 0; font-size: var(--h3); line-height: 1.05; color: var(--forest); }
.karta-schet { margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
.karta-schet b { color: var(--forest); font-size: 18px; }
.karta-lead { margin: 10px 0 0; max-width: 62ch; color: #46544c; font-size: 16px; line-height: 1.6; }
.karta-lead .bylo { color: var(--muted); text-decoration-thickness: 1px; }

.karta-lead-podarok { display: block; margin-top: 6px; }
.karta-lead .vazhno { color: var(--apricot); font-weight: 600; }
.karta-polosa { margin: 18px 0 0; height: 8px; border-radius: 999px; background: var(--sage-light); overflow: hidden; }
.karta-polosa i { display: block; height: 100%; border-radius: 999px; background: var(--sage); transition: width .4s ease; }
.karta-setka { margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.plitka { position: relative; display: block; width: 100%; min-width: 0; padding: 0; border: 0;
          background: none; cursor: pointer; text-align: center; font: inherit; }
.plitka:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: var(--radius-md); }
.plitka-kadr { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-md); overflow: hidden;
               background: var(--sage-light); transition: transform .2s ease; }
.plitka:hover .plitka-kadr { transform: translateY(-3px); }

.plitka img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plitka-imya { display: block; margin-top: 9px; font-size: 13px; font-weight: 500; color: var(--forest);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plitka-zakryt .plitka-kadr { border: 1px dashed rgba(31,43,37,.22); background: var(--cream); }
.plitka-zakryt .plitka-imya { color: var(--muted); }

.plitka-siluet { inset: 14%; width: 72%; height: 72%; object-fit: contain; opacity: .55; }
.plitka:hover .plitka-siluet { opacity: .7; }
.karta-nizh { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line);
              display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
              color: var(--muted); font-size: 14px; }
.karta-nizh p { margin: 0; }

.karta-priz { margin-top: 20px; padding: 18px 20px; border-radius: 18px; background: var(--sun-pale);
              color: var(--forest-deep); display: flex; align-items: center; justify-content: space-between;
              gap: 16px; flex-wrap: wrap; line-height: 1.5; }
.karta-priz p { margin: 0; max-width: 52ch; }
.karta-priz b { font-weight: 600; }
.karta-priz code { padding: 2px 8px; border-radius: 8px; background: var(--paper); font: 600 15px "Rubik", sans-serif; letter-spacing: .08em; }
.karta-priz .button { margin: 0; }
@media (max-width: 820px) {
  .karta-setka { grid-template-columns: repeat(5, 1fr); gap: 10px; }
  .karta-zakryt { top: 10px; right: 10px; }
}
@media (max-width: 460px) { .karta-setka { grid-template-columns: repeat(3, 1fr); } }

.shtora { position: fixed; inset: 0; z-index: 220; display: none; place-items: center;
          padding: 24px; background: rgba(23,50,41,.42); backdrop-filter: blur(3px); }
.shtora.vidna { display: grid; }

.shtora > div { width: min(1100px, 100%); margin-inline: auto; }
.shtora-okno { position: relative; width: 100%; }
.shtora-scroll { max-height: 92vh; overflow: auto; border-radius: var(--radius-lg); }
.shtora-zakryt { position: absolute; top: -14px; right: -14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
                 border: 0; background: var(--forest); color: var(--paper); font-size: 20px; cursor: pointer; }
.listalka { margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.listalka button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,253,248,.5);
                   background: rgba(255,253,248,.14); color: var(--paper); font-size: 19px; cursor: pointer; }
.listalka span { color: var(--paper); font-size: 14px; letter-spacing: .06em; }
.listalka .zakryt-nizhe { display: none; align-items: center; justify-content: center;
                          margin-left: 10px; background: var(--forest); border-color: var(--forest); }
.shtora.pervaya .listalka { display: none; }
@media (max-width: 820px) {
  .shtora { padding: 12px; }
  .shtora-zakryt { display: none; }
  .listalka .zakryt-nizhe { display: inline-flex; }
}

.zhitel { position: relative; display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
          gap: clamp(22px, 2.6vw, 34px); align-items: stretch; padding: clamp(16px, 1.6vw, 20px);
          border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 2px 16px rgba(31,43,37,.07); }

.zhitel-art { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; min-height: 150px;
              align-self: start; justify-self: stretch;
              border-radius: var(--radius-md); overflow: hidden; background: var(--sun-pale); }

.zhitel-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }

.zhitel-copy { display: flex; flex-direction: column; justify-content: center;
               padding: clamp(10px, 1.4vw, 22px) clamp(8px, 1.2vw, 18px) clamp(8px, 1vw, 14px) 0; }
.zhitel-top { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.zhitel-nad { margin: 0; color: var(--moss); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.zhitel-nomer { color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.zhitel h2 { margin: 14px 0 0; font-size: var(--h2); line-height: 1.02; color: var(--forest); }
.zhitel-rol { margin: 8px 0 0; color: var(--apricot); font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.zhitel-text { margin: 18px 0 0; max-width: 46ch; color: #46544c; font-size: 17px; line-height: 1.62; }

.zhitel-zakryt .zhitel-art { background: var(--sage-light); }
.zhitel-zakryt .zhitel-siluet { position: absolute; inset: 21%; width: 58%; height: 58%; object-fit: contain; opacity: .6; }
.zhitel-zakryt h2 { color: var(--muted); }
.zagadka { margin: 18px 0 0; max-width: 44ch; color: #46544c; font-size: 17px; line-height: 1.6; font-style: italic; }

.zagadka-knopka { margin: 16px 0 0; padding: 0; border: 0; background: none; cursor: pointer;
                  align-self: flex-start; color: var(--forest); font: 500 14px "Rubik", sans-serif;
                  text-decoration: underline; text-decoration-color: var(--sage); text-underline-offset: 4px; }
.zagadka-knopka:hover { text-decoration-color: var(--forest); }
.zagadka-knopka:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; border-radius: 6px; }
.zagadka-gde { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.zagadka-gde[hidden] { display: none; }
.zhitel-copy .zhitel-knopki { margin-top: 22px; }
@media (max-width: 820px) {
  .zhitel { grid-template-columns: 1fr; gap: 18px; padding: 14px; width: min(100%, 620px); margin-inline: auto; }
  .zhitel-copy { padding: 4px 6px 10px; }
  .zhitel h2 { margin-top: 10px; }
  .zhitel-text, .zagadka { font-size: 16px; max-width: none; }
}

.nahodka { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(16px, 2vw, 30px);
           padding: clamp(14px, 1.4vw, 20px); border-radius: var(--radius-lg); background: var(--paper); }
.nahodka-art { position: relative; margin: 0; min-height: 300px; border-radius: var(--radius-md); overflow: hidden; background: var(--sage-light); }
.nahodka-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.nahodka-copy { display: flex; flex-direction: column; justify-content: center;
                padding: clamp(8px, 1.2vw, 18px) clamp(6px, 1vw, 14px); }

.nahodka-nad { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nahodka h2 { margin: 10px 0 0; font-size: var(--h3); line-height: 1.05; color: var(--forest); }
.nahodka-text { margin: 16px 0 0; color: #46544c; font-size: 16px; line-height: 1.6; }

.nahodka-podarok { margin: 22px 0 0; padding: 18px 22px; border-radius: 18px; background: var(--sun-pale);
                   display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.nahodka-podarok-chto { font-size: var(--h4); font-weight: 600; line-height: 1.15; color: var(--apricot); }
.nahodka-podarok-vmesto { font-size: 16px; color: var(--forest-deep); }
.nahodka-podarok-vmesto s { color: var(--muted); text-decoration-thickness: 1.5px; }

.nahodka-promo { flex-basis: 100%; margin-top: 6px; font-size: 15px; color: var(--forest-deep); }
.nahodka-promo code { padding: 2px 8px; border-radius: 8px; background: var(--paper);
                      font: 600 15px "Rubik", sans-serif; letter-spacing: .08em; }
.nahodka-knopki { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.nahodka-knopki .tiho { border-color: transparent; padding-inline: 8px; text-decoration: underline;
                        text-decoration-color: var(--sage); text-underline-offset: 4px; }
.nahodka-knopki .tiho:hover { text-decoration-color: var(--forest); }
.nahodka-knopki button, .nahodka-knopki a { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--line);
                         background: transparent; color: var(--forest); text-decoration: none;
                         font: 500 14px "Rubik", sans-serif; cursor: pointer; }
.nahodka-knopki .silno { border-color: transparent; background: var(--forest); color: var(--paper); }
@media (max-width: 820px) {
  .nahodka { grid-template-columns: 1fr; }
  .nahodka-art { aspect-ratio: 4 / 3; }
}

.zhitel-mesto { position: absolute; padding: 0; border: 0; background: none; cursor: pointer;
                line-height: 0; -webkit-tap-highlight-color: transparent; }

.zhitel-mesto img { display: block; height: 100%; width: auto; max-width: none; }
.zhitel-mesto:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; border-radius: 12px; }

.zhitel-mesto img { animation: zhitel-zovyot 3.2s ease-in-out infinite; }

.zhitel-mesto.vyplyvaet { opacity: 0; transform: translateY(36px);
                          transition: transform 1.1s cubic-bezier(.2,.7,.25,1), opacity .8s ease; }
.zhitel-mesto.vyplyvaet.vyglyanul { opacity: 1; transform: none; }
[data-nasest].nayden .ptica { opacity: 0; visibility: hidden; pointer-events: none;
                              transition: opacity .6s ease, visibility 0s linear .6s; }
@keyframes zhitel-zovyot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.zhitel-mesto.za-plashkoy { z-index: -1; top: 0; transform: translateY(6%);
                            transition: transform 1.1s cubic-bezier(.2,.7,.25,1); }
.zhitel-mesto.za-plashkoy.vyglyanul { transform: translateY(-46%); }
.pochemu-grid, .istoriya, .fakty > .section-shell { position: relative; isolation: isolate; }

.zhitel-mesto-yozhik { height: 118px; }
.zhitel-mesto-yozhik img { transform: scaleX(-1); animation-name: zhitel-zovyot-zerkalo; }
@keyframes zhitel-zovyot-zerkalo { 0%,100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-3px); } }
.zhitel-mesto-yozhik.za-plashkoy.vyglyanul { transform: translateY(-64%); }

.pochemu-grid:has(.zhitel-mesto-yozhik) { margin-top: 88px; }

.zhitel-mesto-lisyonok { height: 128px; }
.zhitel-mesto-lisyonok.za-plashkoy.vyglyanul { transform: translateY(-88%); }
.istoriya:has(.zhitel-mesto-lisyonok) { padding-top: calc(var(--sec-gap) / 2 + 84px); }

.day-section { position: relative; }
.day-section + section { position: relative; z-index: 1; }
.zhitel-mesto-belka { bottom: 0; height: 120px; }
.zhitel-mesto-belka.vyplyvaet { opacity: 1; transform: translateY(82%); }
.zhitel-mesto-belka.vyplyvaet.vyglyanul { transform: translateY(10%); }
@media (max-width: 820px) { .zhitel-mesto-belka { height: 96px; } }

.zhitel-mesto.za-plashkoy[data-storona="bok"] { transform: translateX(-42%); }
.zhitel-mesto.za-plashkoy[data-storona="bok"].vyglyanul { transform: translateX(16%); }
@media (max-width: 640px) {
  .zhitel-mesto.za-plashkoy[data-storona="bok"] { transform: translateY(6%); }
  .zhitel-mesto.za-plashkoy[data-storona="bok"].vyglyanul { transform: translateY(-72%); }
}

.istoriya-photo { position: relative; }
.zhitel-mesto-medvezhonok { left: 5%; bottom: 0; height: 42%; z-index: 1; }

.zhitel-mesto-medvezhonok.vyplyvaet { opacity: 1; transform: translateY(75%); }
.zhitel-mesto-medvezhonok.vyplyvaet.vyglyanul { transform: translateY(9%); }

.istoriya-photo .zhitel-mesto img { position: static; inset: auto; width: auto; height: 100%;
                                    max-width: none; object-fit: contain; }

.gallery-masonry { position: relative; }

.zhitel-okno { position: absolute; z-index: 2; overflow: hidden; border-radius: 20px;
               pointer-events: none; opacity: 0; }
.zhitel-okno.na-meste { opacity: 1; }
.zhitel-okno .zhitel-mesto { pointer-events: auto; }

.zhitel-mesto-zajchonok { height: 150px; right: 0; bottom: 0; }
.zhitel-mesto-zajchonok.vyplyvaet { opacity: 1; transform: translateX(120%);
                                    transition-duration: 1.4s; }

.zhitel-mesto-zajchonok.vyplyvaet.vyglyanul { transform: translateX(12%); }

.article-body { position: relative; isolation: isolate; }
.article-body .article-note.s-sovoy { margin-top: 112px; }
.zhitel-mesto-sovyonok { height: 118px; }

.zhitel-mesto-sovyonok img { transform: scaleX(-1); animation-name: zhitel-zovyot-zerkalo; }
.zhitel-mesto-sovyonok.za-plashkoy.vyglyanul { transform: translateY(-80%); }

.zhitel-mesto[data-zhitel].nayden { opacity: 0; visibility: hidden; pointer-events: none;
                       transition: opacity .6s ease, visibility 0s linear .6s; }
@media (max-width: 820px) {
  .zhitel-mesto-yozhik, .zhitel-mesto-lisyonok, .zhitel-mesto-sovyonok { height: 96px; }
  .zhitel-mesto-zajchonok { height: 116px; }
  .article-body .article-note.s-sovoy { margin-top: 92px; }
}

[data-nasest] { position: relative; }
.nasest { position: relative; }
.ptica { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 2; pointer-events: none; }
.ptica-telo { position: absolute; left: 0; bottom: 0; pointer-events: auto; cursor: pointer;
              background: none; border: 0; padding: 0; line-height: 0; }
.ptica-telo:focus-visible { outline: 3px solid var(--forest); outline-offset: 4px; border-radius: 12px; }
.ptica-telo .krylo { display: block; width: 88px; height: 65px;
                     background: url("/assets/art/zhitel-sinichka-polet.webp") 0 0 / 440px 65px no-repeat; }
.ptica-telo .sidit-na-bukve { display: none; height: 52px; width: auto; max-width: none; }

.letit .ptica { animation: pr-x var(--polet, 1.35s) cubic-bezier(.22,.5,.3,1) forwards; }
.letit .ptica-telo { animation: pr-naklon var(--polet, 1.35s) ease-out forwards; }
.letit .krylo { animation: pr-vzmah .5s steps(5) infinite; }
@keyframes pr-x { from { transform: translate(var(--start-x, -110px), var(--start-y, -230px)); } to { transform: translate(0, 0); } }
@keyframes pr-naklon { 0% { transform: rotate(10deg); } 70% { transform: rotate(5deg); } 100% { transform: rotate(0); } }
@keyframes pr-vzmah { from { background-position-x: 0; } to { background-position-x: -440px; } }

.sela .krylo { display: none; }
.sela .sidit-na-bukve { display: block; animation: dyshit 3.2s ease-in-out infinite; }
@keyframes dyshit { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.sela.zhdyot .ptica-telo { animation: zhitel-zovyot 2.6s ease-in-out infinite; }

[data-nasest]:not(.letit):not(.sela) .ptica { visibility: hidden; }
@media (max-width: 820px) {
  .ptica-telo .krylo { width: 66px; height: 49px; background-size: 330px 49px; }
  .ptica-telo .sidit-na-bukve { height: 40px; }
  @keyframes pr-vzmah { from { background-position-x: 0; } to { background-position-x: -330px; } }
}

@media (prefers-reduced-motion: reduce) {
  .letit .ptica, .letit .ptica-telo, .letit .krylo, .sela.zhdyot .ptica-telo,
  .sela .sidit-na-bukve, .zhitel-mesto img, .znachok.pryg { animation: none; }
  .zhitel-mesto.za-plashkoy, .zhitel-mesto.vyplyvaet { transition: none; }
  .zhitel-mesto.vyplyvaet { opacity: 1; transform: none; }
}