/* ===================================================================
   БЛАГОУСТРОЙСТВО ТЕРРИТОРИИ — три варианта подачи (30.09.2026)
   Один контент (массив LAND в land.js), три готовых механики:
     A  «Кинолента»  — Swiper шаблона (effect creative + parallax + autoplay), тёмный экран
     B  «Прогулка»   — GSAP ScrollTrigger: pinned-секция, лента едет горизонтально по прокрутке
     C  «Аккордеон»  — GSAP Flip: раскрывающиеся панели + счётчики цифр
   Заменяют hl-park v2 (снят 30.09 по решению Романа). rem = 10px.
   =================================================================== */

/* У шаблона html{scroll-behavior:smooth}: любой программный scrollTo (в т.ч. внутри ScrollTrigger.refresh)
   становится асинхронным, и замеры пина (вариант B) едут. Глушим глобально; плавность якорных ссылок
   возвращает land.js через scrollIntoView({behavior:'smooth'}). */
html, body { scroll-behavior: auto !important; }

.app .ld { position: relative; font-size: 1.6rem; line-height: 1.45; }
.app .ld * { box-sizing: border-box; }
.app .ld img { display: block; }
.app .ld__label { font-size: 1.1rem; letter-spacing: .22em; text-transform: uppercase; color: var(--color2); margin: 0 0 1.6rem; }
.app .ld__h2 { font-size: 4.2rem; line-height: 1.05; text-transform: uppercase; font-weight: 400; margin: 0; }
.app .ld__lead { font-size: 1.7rem; line-height: 1.5; max-width: 56rem; margin: 2rem 0 0; }
.app .ld__num { font-size: 5.6rem; line-height: .95; font-weight: 300; letter-spacing: -.02em; white-space: nowrap; }
.app .ld__num small { font-size: .45em; font-weight: 400; margin-left: .2em; letter-spacing: 0; }
.app .ld__cap { font-size: 1.25rem; text-transform: uppercase; letter-spacing: .1em; margin-top: .9rem; opacity: .75; line-height: 1.4; }
.app .ld__btn { width: 5.2rem; height: 5.2rem; border-radius: 50%; border: 1px solid currentColor; background: none; color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; opacity: .7; transition: opacity .25s, background .25s; }
.app .ld__btn:hover { opacity: 1; }
.app .ld__btn svg { width: 1.8rem; height: 1.8rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
@media (max-width: 1023px) {
  .app .ld__h2 { font-size: 3rem; }
  .app .ld__lead { font-size: 1.5rem; }
  .app .ld__num { font-size: 4.4rem; }
}

/* ===================== A — «Кинолента» (Swiper) ===================== */
.app .ld-a { background: #0f1212; color: #f2f1ef; }
.app .ld-a__grid { display: grid; grid-template-columns: minmax(0, 1fr) 40rem; min-height: 100vh; }
.app .ld-a__stage { position: relative; overflow: hidden; min-height: 100vh; }
.app .ld-a__stage .swiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.app .ld-a__slide { position: relative; overflow: hidden; background: #0f1212; }
.app .ld-a__slide img { position: absolute; left: -8%; top: -6%; width: 116%; height: 112%; object-fit: cover; }
.app .ld-a__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,18,.05) 35%, rgba(15,18,18,.85) 100%); pointer-events: none; }
.app .ld-a__cap { position: absolute; left: 6vw; right: 6vw; bottom: 6rem; z-index: 2; max-width: 68rem; }
.app .ld-a__idx { font-size: 1.2rem; letter-spacing: .24em; color: var(--color4); }
.app .ld-a__ttl { font-size: 3.6rem; text-transform: uppercase; line-height: 1.05; margin: .8rem 0 1.2rem; font-weight: 400; }
.app .ld-a__txt { font-size: 1.6rem; max-width: 54rem; opacity: .92; }
.app .ld-a__side { min-width: 0; padding: calc(var(--header-height) + 1rem) 4rem 4rem; display: flex; flex-direction: column; gap: 3rem; border-left: 1px solid rgba(255,255,255,.08); background: #0f1212; }
.app .ld-a__stat { display: flex; align-items: baseline; gap: 1.6rem; padding-top: 2.4rem; border-top: 1px solid rgba(255,255,255,.12); }
.app .ld-a__stat .ld__num { color: var(--color4); }
.app .ld-a__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.app .ld-a__item { display: flex; gap: 1.4rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid rgba(255,255,255,.1); cursor: pointer; opacity: .5; transition: opacity .3s; }
.app .ld-a__item:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
.app .ld-a__item:hover, .app .ld-a__item.is-active { opacity: 1; }
.app .ld-a__item img { width: 7.2rem; height: 4.8rem; object-fit: cover; flex: none; }
.app .ld-a__item span { font-size: 1.35rem; text-transform: uppercase; letter-spacing: .06em; }
.app .ld-a__item b { font-weight: 400; font-size: 1.1rem; color: var(--color2); margin-right: 1rem; letter-spacing: .1em; }
.app .ld-a__nav { margin-top: auto; display: flex; align-items: center; gap: 1.6rem; }
.app .ld-a__frac { font-size: 1.4rem; letter-spacing: .12em; opacity: .8; }
.app .ld-a__ring { position: relative; }
.app .ld-a__ring svg.ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); pointer-events: none; }
.app .ld-a__ring svg.ring circle { fill: none; stroke: var(--color3); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0) * 100); }
@media (max-width: 1023px), (orientation: portrait) {
  .app .ld-a__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .app .ld-a__stage { min-height: 0; height: 62svh; }
  .app .ld-a__cap { left: var(--offset); right: var(--offset); bottom: 2.4rem; }
  .app .ld-a__ttl { font-size: 2.6rem; }
  .app .ld-a__txt { font-size: 1.45rem; }
  .app .ld-a__side { padding: 3rem var(--offset) 4rem; gap: 2.4rem; border-left: 0; }
  .app .ld-a__list { flex-direction: row; overflow-x: auto; gap: 1rem; margin: 0 calc(-1 * var(--offset)); padding: 0 var(--offset); scrollbar-width: none; }
  .app .ld-a__list::-webkit-scrollbar { display: none; }
  .app .ld-a__item { flex: none; flex-direction: column; align-items: flex-start; gap: .8rem; width: 15rem; border: 0 !important; padding: 0; }
  .app .ld-a__item img { width: 15rem; height: 9.5rem; }
  .app .ld-a__item span { font-size: 1.15rem; }
  .app .ld-a__nav { margin-top: 0; }
}

/* ===================== B — «Прогулка» (GSAP ScrollTrigger) ===================== */
.app .ld-b { background: var(--color6); color: var(--color1); overflow: hidden; }
.app .ld-b__pin { position: relative; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.app .ld-b__track { display: flex; align-items: center; gap: 4vw; padding: 0 6vw; height: 100%; will-change: transform; }
.app .ld-b__intro { flex: none; width: 36vw; padding-right: 2vw; }
.app .ld-b__intro .ld__lead { color: #4a4243; }
.app .ld-b__hint { margin-top: 3.2rem; font-size: 1.2rem; letter-spacing: .2em; text-transform: uppercase; color: var(--color2); display: flex; align-items: center; gap: 1.2rem; }
.app .ld-b__hint i { display: block; width: 6rem; height: 1px; background: var(--color2); }
.app .ld-b__card { flex: none; position: relative; }
.app .ld-b__card--tall { width: 30vw; } .app .ld-b__card--tall .ld-b__img { height: 62vh; }
.app .ld-b__card--wide { width: 50vw; } .app .ld-b__card--wide .ld-b__img { height: 52vh; }
.app .ld-b__img { overflow: hidden; background: #ddd; }
.app .ld-b__img img { width: 118%; max-width: none; height: 100%; object-fit: cover; margin-left: -9%; will-change: transform; }
.app .ld-b__meta { display: flex; gap: 1.6rem; align-items: baseline; margin-top: 1.8rem; }
.app .ld-b__i { font-size: 1.2rem; letter-spacing: .22em; color: var(--color2); }
.app .ld-b__t { font-size: 2.1rem; text-transform: uppercase; line-height: 1.1; }
.app .ld-b__x { font-size: 1.5rem; margin-top: .8rem; max-width: 44rem; color: #4a4243; }
.app .ld-b__stat { flex: none; width: 22vw; border-left: 1px solid var(--color2); padding-left: 2.4rem; }
.app .ld-b__stat .ld__num { color: var(--color2); }
.app .ld-b__end { flex: none; width: 30vw; padding-right: 6vw; }
.app .ld-b__end .ld__h2 { font-size: 3rem; }
.app .ld-b__bar { position: absolute; left: 6vw; right: 6vw; bottom: 3rem; height: 1px; background: rgba(25,28,28,.15); }
.app .ld-b__bar i { display: block; height: 100%; width: 0; background: var(--color2); }
@media (max-width: 1023px), (orientation: portrait) {
  .app .ld-b__pin { height: auto; display: block; padding: 6rem 0 5rem; }
  .app .ld-b__track { display: block; height: auto; padding: 0; will-change: auto; transform: none !important; }
  .app .ld-b__intro { width: auto; padding: 0 var(--offset) 3rem; }
  .app .ld-b__scroller { display: flex; gap: 1.6rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--offset) 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .app .ld-b__scroller::-webkit-scrollbar { display: none; }
  .app .ld-b__card { scroll-snap-align: start; width: 78vw !important; }
  .app .ld-b__card .ld-b__img { height: 50svh !important; }
  .app .ld-b__img img { transform: none !important; }
  .app .ld-b__t { font-size: 1.8rem; }
  .app .ld-b__x { font-size: 1.4rem; }
  .app .ld-b__stat { scroll-snap-align: start; width: 62vw; padding: 2rem 0 2rem 2rem; align-self: center; }
  .app .ld-b__end { display: none; }
  .app .ld-b__bar { display: none; }
}
@media (min-width: 1024px) and (orientation: landscape) {
  .app .ld-b__scroller { display: contents; }
}

/* ===================== C — «Аккордеон» (GSAP Flip) ===================== */
.app .ld-c { background: #fff; color: var(--color1); padding: 9rem 0 8rem; }
.app .ld-c__head { padding: 0 var(--offset); display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.app .ld-c__head .ld__lead { color: #4a4243; margin-top: 0; }
.app .ld-c__panels { display: flex; gap: .6rem; height: 72vh; min-height: 48rem; padding: 0 var(--offset); }
.app .ld-c__p { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; background: #1c1f1f; }
.app .ld-c__p.is-open { flex: 4.4 1 0; cursor: default; }
.app .ld-c__p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.app .ld-c__p.is-open img { transform: scale(1); }
.app .ld-c__p::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,18,18,.1) 40%, rgba(15,18,18,.82) 100%); transition: opacity .6s; }
.app .ld-c__p:not(.is-open)::after { background: linear-gradient(180deg, rgba(15,18,18,.25) 0%, rgba(15,18,18,.6) 100%); }
.app .ld-c__vt { position: absolute; z-index: 2; left: 50%; bottom: 3rem; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; color: #fff; font-size: 1.45rem; text-transform: uppercase; letter-spacing: .14em; white-space: nowrap; transition: opacity .3s; }
.app .ld-c__vt b { font-weight: 400; color: var(--color4); margin-top: 1.2rem; letter-spacing: .1em; font-size: 1.1rem; }
.app .ld-c__p.is-open .ld-c__vt { opacity: 0; transition-delay: 0s; }
.app .ld-c__body { position: absolute; z-index: 2; left: 3.2rem; right: 3.2rem; bottom: 3.2rem; color: #fff; opacity: 0; transform: translateY(1.6rem); transition: opacity .5s, transform .5s; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; }
.app .ld-c__p.is-open .ld-c__body { opacity: 1; transform: none; transition-delay: .35s; }
.app .ld-c__bi { font-size: 1.2rem; letter-spacing: .24em; color: var(--color4); }
.app .ld-c__bt { font-size: 3rem; text-transform: uppercase; line-height: 1.05; margin: .6rem 0 1rem; }
.app .ld-c__bx { font-size: 1.55rem; max-width: 52rem; opacity: .92; }
.app .ld-c__bn { text-align: right; }
.app .ld-c__bn .ld__num { color: var(--color4); font-size: 4.8rem; }
.app .ld-c__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding: 5rem var(--offset) 0; margin-top: 5rem; }
.app .ld-c__stats > div { border-top: 1px solid rgba(25,28,28,.18); padding-top: 2.2rem; }
.app .ld-c__stats .ld__num { color: var(--color2); }
@media (max-width: 1023px), (orientation: portrait) {
  .app .ld-c { padding: 6rem 0 5rem; }
  .app .ld-c__head { grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 3rem; }
  .app .ld-c__panels { flex-direction: column; height: auto; min-height: 0; gap: .5rem; }
  .app .ld-c__p { flex: none; height: 7.4rem; }
  .app .ld-c__p.is-open { flex: none; height: 58svh; }
  .app .ld-c__vt { writing-mode: horizontal-tb; transform: none; left: 2rem; right: 2rem; top: 0; bottom: 0; display: flex; align-items: center; gap: 1.4rem; }
  .app .ld-c__vt b { margin: 0; }
  .app .ld-c__body { left: 2rem; right: 2rem; bottom: 2.2rem; grid-template-columns: 1fr; gap: 1.4rem; }
  .app .ld-c__bt { font-size: 2.2rem; }
  .app .ld-c__bx { font-size: 1.4rem; }
  .app .ld-c__bn { text-align: left; }
  .app .ld-c__bn .ld__num { font-size: 3.8rem; }
  .app .ld-c__stats { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; padding-top: 3.6rem; margin-top: 3.6rem; }
}