/* =========================================================
   Резиденция долголетия + Личная экосистема + движок появления
   Песочница. В общий style.css переедет после утверждения.
   Все селекторы под .app — как в шаблоне coastal_1_0.
   ========================================================= */

.app {
  /* новый тон, которого нет в палитре сайта: тёплый бежевый фон секций */
  --residence-bg: #F1E7DD;

  /* значения ниже перезаписывает ANIM_CONFIG из block.js —
     здесь только запасные, на случай если скрипт не отработал */
  --anim-duration:     1.1s;
  --anim-duration-img: 1.6s;
  --anim-ease:         cubic-bezier(.16, 1, .3, 1);
  --anim-rise:         26px;
  --anim-zoom:         1.06;
}

/* страховка от светлых просветов: за закреплёнными секциями
   не должно быть белого фона страницы */
html, body { background: rgb(25, 27, 54); }

/* аварийный режим без библиотеки слайдеров: каждая карусель
   схлопывается до первого кадра вместо гигантской ленты */
.app.no-swiper .swiper .swiper-slide:not(:first-child),
.app.no-swiper .slider__nav {
  display: none;
}

/* синяя крутилка загрузки Swiper — убрана полностью:
   перетягивает внимание, постеры и так показываются мгновенно */
.app .swiper-lazy-preloader {
  display: none !important;
  animation: none !important;
}

/* сетка цифр: больше воздуха у краёв экрана, теснее в середине */
@media (max-width: 767.98px) {
  .app #location .numbers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .app #location .number {
    width: auto;
  }
}

/* заголовок «Весь курорт сразу…» — строго по центру экрана:
   снимаем любые односторонние поля и ограничения ширины */
.app #location .section__title,
.app #location .section__title h2 {
  text-align: center;
  display: block;
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ссылка на группу компаний в подвале — бронза, в общем стиле */
.app .sb-kraft {
  color: var(--color2);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.app .sb-kraft:hover {
  border-bottom-color: var(--color2);
}

/* золотая волна по тексту «Группа компаний «Крафт Девелопмент»:
   срабатывает один раз, когда блок доезжает до глаз (_run ставит
   block.js). Текст покрашен градиентом с золотой полосой в центре,
   края градиента — родная бронза: до и после прохода текст обычный */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .app .sb-kraft {
      display: inline-block;
      background: linear-gradient(100deg,
        var(--color2) 0%, var(--color2) 38%,
        #FFEDAD 47%, #FFF6CF 50%, #F1CE82 53%,
        var(--color2) 62%, var(--color2) 100%);
      background-size: 300% 100%;
      background-position: 100% 0;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
    }

    .app .sb-kraft._run {
      animation: sbTextGold 1.7s ease-in-out .2s forwards;
    }

    @keyframes sbTextGold {
      to { background-position: 0% 0; }
    }
  }
}

/* =========================================================
   ЛОГОТИП: появление «росчерк золотом» при загрузке.
   Волна прочерчивается пером и наливается цветом, точка-пловец
   выпрыгивает, буквы ПРАЙМ поднимаются лесенкой, затем подпись,
   и в финале по буквам пробегает золотой отблеск.
   При «уменьшить движение» логотип просто виден сразу.
   ========================================================= */

.app .sb-logo {
  display: block;
}

@media (prefers-reduced-motion: no-preference) {

  /* каждая деталь: невидима → возникает насыщенным золотом →
     светлый золотой блик → оседает в родную бронзу логотипа.
     Задержку --d по позиции детали ставит block.js — волна
     идёт слева направо */
  .app .sb-el {
    opacity: 0;
    animation: sbGold 1s ease var(--d, 0s) forwards;
  }

  @keyframes sbGold {
    0%   { opacity: 0; fill: #DFA94F; }
    30%  { opacity: 1; fill: #FFE9A8; }
    55%  { opacity: 1; fill: #EFC97E; }
    100% { opacity: 1; fill: #CAA089; }
  }

  /* буквы ПРАЙМ — прямые дети svg: своя, более сочная волна
     и второй перелив в финале — главный блик в центре знака */
  .app .sb-logo > path.sb-el,
  .app .sb-logo > rect.sb-el {
    animation:
      sbGoldStrong 1.1s ease var(--d, 0s) forwards,
      sbShine2 .85s ease-in-out calc(1.55s + var(--d, 0s) * .3);
  }

  @keyframes sbGoldStrong {
    0%   { opacity: 0; fill: #D89B3F; }
    28%  { opacity: 1; fill: #FFF2C0; }
    55%  { opacity: 1; fill: #F0C97A; }
    100% { opacity: 1; fill: #CAA089; }
  }

  @keyframes sbShine2 {
    0%   { fill: #CAA089; }
    45%  { fill: #F7DC96; }
    100% { fill: #CAA089; }
  }

  /* ФИНАЛЬНЫЙ АККОРД — «чайка»: летящая линия волны последней
     ещё раз щедро уходит золотом. Точка сольной партии не имеет —
     она у верхней кромки и частично режется видимостью */
  .app .sb-logo g:last-of-type path.sb-el {
    animation:
      sbGold 1s ease var(--d, 0s) forwards,
      sbFinale 1.2s ease-in-out 1.8s;
  }

  @keyframes sbFinale {
    0%   { fill: #CAA089; }
    40%  { fill: #FFEDAD; }
    70%  { fill: #F1CE82; }
    100% { fill: #CAA089; }
  }
}

/* служебная плашка песочницы — в боевую версию не переносится */
.sandbox-note {
  position: relative;
  z-index: 5;
  padding: 8px 15px;
  background: var(--color2);
  color: #fff;
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

/* =========================================================
   ДВИЖОК ПОЯВЛЕНИЯ

   Прячем только при классе _anim-on на .app — его ставит JS.
   Не отработал скрипт — страница выглядит как обычно.

   data-anim="rise"   текст: подъём с проявлением
   data-anim="fade"   картинка: только проявление (безопасно везде)
   data-anim="settle" картинка в кадре с обрезкой: оседание масштаба
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* режим GSAP: только гасим элемент, всё остальное делает библиотека */
  .app._anim-gsap [data-anim] {
    opacity: 0;
  }

  .app._anim-on [data-anim] {
    opacity: 0;
    transition-delay: var(--anim-delay, 0s);
    transition-timing-function: var(--anim-ease);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duration);
  }

  .app._anim-on [data-anim="rise"] {
    transform: translateY(var(--anim-rise));
  }

  /* картинки движутся дольше текста */
  .app._anim-on [data-anim="fade"],
  .app._anim-on [data-anim="settle"] {
    transition-duration: var(--anim-duration-img);
  }

  /* масштаб только там, где есть кадр с обрезкой —
     иначе по краю на миг проглядывает фон светлой полосой */
  .app._anim-on [data-anim="settle"] {
    transform: scale(var(--anim-zoom));
  }

  .app._anim-on [data-anim].is-in {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   ЭКСКЛЮЗИВНОЕ БЛАГОУСТРОЙСТВО — карточный блок на тёмном
   (тот же паттерн, что «Личная экосистема», но фон --color1).
   Старая секция #views спрятана — её заголовок переехал сюда.
   ========================================================= */

.app #views {
  display: none;
}

/* секции, которых нет в согласованном макете:
   клиника и дзен удалены, после спорта сразу подвал.
   Эскроу-баннер ОСТАВЛЕН — отбивает море первого экрана
   от моря инвест-слайда */
.app #business,
.app #activities,
.app #health,
.app #dzen {
  display: none;
}

.app .landscape {
  background: var(--color1);
  padding-bottom: 4rem;
  position: relative;
  z-index: 11;               /* между pool-outside (11) и health (12) в стеке */
}

.app .landscape__title {
  padding-top: 4rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.app .landscape__title .h3 {
  color: var(--color2);
}

.app .landscape__slider {
  width: 100%;
  overflow: hidden;
  padding-left: var(--offset);
  padding-right: var(--offset);
  margin-top: 2rem;
}

.app .landscape__slider .swiper-slide {
  width: 73%;
  aspect-ratio: .9 / 1;      /* карточки чуть вытянуты вверх, как в макете */
  overflow: hidden;
}

.app .landscape__slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app .landscape__body {
  padding-top: 3rem;
}

.app .landscape__head {
  color: var(--color3);
  margin-bottom: 2rem;
}

.app .landscape__text {
  color: var(--color4);
  text-transform: uppercase;
  line-height: 1.45;
  max-width: 46rem;
}

.app .landscape__nav {
  display: flex;
  gap: 4px;
  margin-top: 3rem;
}

.app .landscape__nav .swiper-button-prev,
.app .landscape__nav .swiper-button-next {
  position: static;
  width: 52px;
  height: 52px;
  margin: 0;
  background: var(--color2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app .landscape__nav .swiper-button-prev:after,
.app .landscape__nav .swiper-button-next:after {
  font-family: icomoon;
  font-size: 16px;
  color: var(--color1);
}

.app .landscape__nav .swiper-button-prev:after { content: "\e901"; }
.app .landscape__nav .swiper-button-next:after { content: "\e902"; }

.app .landscape__nav .swiper-button-disabled {
  opacity: .45;
  pointer-events: none;
}

@media (min-width: 768px) {
  .app .landscape__slider .swiper-slide { width: 42%; aspect-ratio: 1.1 / 1; }
}

@media (min-width: 1025px) {
  .app .landscape__slider .swiper-slide { width: 30%; }
}

/* =========================================================
   СОБСТВЕННЫЙ ПАРКИНГ — центральная карточка, соседние
   выглядывают с двух сторон, у каждого фото своя подпись
   ========================================================= */

.app .pk {
  background: var(--color1);
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.app .pk__head {
  color: var(--color2);
  margin-bottom: 1.6rem;
}

.app .pk__sub {
  color: var(--color4);
  text-transform: uppercase;
  line-height: 1.45;
  max-width: 46rem;
  margin-bottom: 3rem;
}

.app .pk__slider {
  width: 100%;
  overflow: hidden;
}

.app .pk__slider .swiper-slide {
  width: 64%;
}

.app .pk__slider .swiper-slide img {
  display: block;
  width: 100%;
  aspect-ratio: .62 / 1;     /* высокие портретные карточки, как в макете */
  object-fit: cover;
}

/* заголовок и описание меняются вместе с карточкой — мягкое затухание */
.app .pk__head,
.app .pk__sub {
  transition: opacity .25s ease;
}

.app .pk._swapping .pk__head,
.app .pk._swapping .pk__sub {
  opacity: 0;
}

@media (min-width: 768px) {
  .app .pk__slider .swiper-slide { width: 44%; }
}

@media (min-width: 1025px) {
  .app .pk__slider .swiper-slide { width: 30%; }
}

/* =========================================================
   СЕКЦИЯ «ПЛЯЖ»: один статичный кадр вместо слайдера —
   стрелки и пагинацию прячем, листание отключает block.js
   ========================================================= */

/* пляж: окно кадрирования чуть смещено вправо — при центре
   срезался правый край композиции */
@media (max-width: 1200px) {
  .app #beach .slider__img {
    object-position: 62% 50%;
  }
}

.app #beach .slider__nav,
.app #pool-outside .slider__nav,
.app #kids .slider__nav,
.app #pool-inside .slider__nav,
.app #lobby .slider__nav,
.app #architecture .slider__nav {
  display: none;   /* одиночные кадры и видео — без стрелок и пагинации */
}

/* видео-секции: тёмная подложка вместо жёлтой, чтобы порядок
   «фон → постер → видео» не мигал светлым */
.app #lobby .slider,
.app #lobby .swiper-slide,
.app #pool-inside .slider,
.app #pool-inside .swiper-slide,
.app #kids .slider,
.app #kids .swiper-slide,
.app #architecture .slider,
.app #architecture .swiper-slide {
  background: var(--color1);
}

/* закрепляемый слайд пары — штатной высоты и вёрстки;
   особых правил ему не нужно, стык закрывает свёрнутая шапка */

/* видео поверх постера-картинки: прозрачно, пока не начнёт
   реально играть — на iOS в энергосбережении остаётся постер.
   z-index ниже текстового блока: заголовок всегда над видео */
.app .sb-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .45s ease;
  z-index: 1;
}

.app .sb-video._playing {
  opacity: 1;
}

.app .swiper-slide .slider__main {
  z-index: 2;
}

/* заголовки пляжа и ресторанов — тёмно-синие, как на светлых слайдах */
.app #beach .slider__main h2,
.app #restaurant .slider__main h2 {
  color: var(--color1);
}

/* ресторанный сектор: подписи старых слайдов убраны —
   текст только на первом кадре */
.app #restaurant .swiper-slide:nth-child(2) .slider__main,
.app #restaurant .swiper-slide:nth-child(3) .slider__main {
  display: none;
}

/* =========================================================
   ПАРЫ НАЕЗДА: наезжающий блок обязан быть непрозрачным
   и лежать выше закреплённого
   ========================================================= */

/* липкое позиционирование гибнет от overflow-x:hidden у предка;
   clip даёт тот же обрез без этого побочного эффекта.
   ОБЕ оси обязаны быть clip: смешанная пара clip+auto в части
   браузеров молча откатывается к hidden — от этого в Chrome на
   iOS уезжала шапка */
.app {
  overflow-x: clip;
  overflow-y: clip;
}

/* Мобильная шапка: в шаблоне она static, а «прилипание» ей даёт
   скрипт классами — во встроенном браузере Телеграма такой fixed
   плавает вместе с его панелями и шапка висит ниже положенного.
   Sticky остаётся в потоке и не зависит от панелей просмотрщика */
@media (max-width: 1200px) {
  .app .header {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 0 !important;
    transform: none !important;
  }

  /* «Козырёк»: продолжение фона шапки вверх за её край.
     Встроенные браузеры (Телеграм и пр.) считают верхом линию ниже
     своих панелей — в зазоре над шапкой просвечивал едущий контент.
     Козырёк закрывает его цветом шапки; в обычных браузерах он
     целиком за экраном и не виден никогда */
  /* ::before — ::after у шапки занят шаблоном под декор */
  .app .header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 160px;
    background: var(--color1);
  }
}

/* контейнер пары: ограничивает прилипание и подкрашивает
   технические зазоры в цвет шапки */
.app .sb-scope {
  position: relative;
  background: var(--color1);
}

/* прилипающий слайд: линия прилипания — живой низ плашки,
   --sb-hdr обновляет block.js каждый кадр */
.app .sb-under {
  position: sticky;
  position: -webkit-sticky;
  top: var(--sb-hdr, 0px);
  z-index: 1;
}

.app .sb-cover {
  position: relative;
  z-index: 12;
  background: var(--color1);
}

/* =========================================================
   ПОДДЕРЖКА ПРИЁМОВ ДВИЖЕНИЯ
   ========================================================= */

/* кадр для «успокоения» масштаба: без обрезки картинка
   при увеличении вылезет за секцию и даст полосу по краю */
.app .fx-frame picture,
.app .fx-frame .slider,
.app .fx-frame .swiper-slide {
  overflow: hidden;
}

/* слова заголовка при построчном появлении */
.app .fx-word {
  display: inline-block;
  white-space: pre-wrap;
}

/* линия, прочерчиваемая под заголовком */
.app .fx-line {
  height: 1px;
  width: 100%;
  max-width: 12rem;
  margin-top: 1.6rem;
  background: var(--color2);
  transform-origin: left center;
}

/* =========================================================
   СТЕК СЕКЦИЙ (только мобильный)

   Класс stack-section ставит block.js. Секции подгоняются
   под высоту экрана — иначе между ними осталась бы щель,
   и наезд читался бы не как перекрытие, а как разрыв.
   ========================================================= */

@media (max-width: 767.98px) {

  /* Секция занимает экран целиком и прилегает к верху вплотную —
     иначе в зазоре просвечивает фон страницы белой полосой.
     Из-под шапки уводим только текст: --stack-top ставит block.js
     по фактической высоте шапки. */

  .app .stack-section {
    min-height: 100vh;
    min-height: 100svh;
    background: var(--color1); /* фон обязателен: секция перекрывает соседнюю */
  }

  .app .stack-section .slider,
  .app .stack-section .swiper,
  .app .stack-section .swiper-slide {
    min-height: 100vh;
    min-height: 100svh;
  }

  .app .stack-section .slider__img {
    height: 100vh;
    height: 100svh;
    object-fit: cover;
  }

  /* заголовок и текст — ниже шапки */
  .app .stack-section .slider__main {
    padding-top: var(--stack-top, 0px);
  }
}

/* ---------------- Резиденция долголетия ---------------- */

.app .residence {
  background: var(--residence-bg);
}

.app .residence__hero {
  font-size: 0;
  position: relative;
  overflow: hidden;          /* кадр, внутри которого «оседает» фото */
}

/* заголовок лежит прямо на фото; лёгкое затемнение сверху,
   чтобы бронза читалась на светлом небе */
.app .residence__hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 38%;
  background: linear-gradient(rgba(25, 27, 54, .55), rgba(25, 27, 54, 0));
  z-index: 1;
  pointer-events: none;
}

.app .residence__caption {
  position: absolute;
  z-index: 2;
  left: var(--offset);
  right: var(--offset);
  top: 4rem;
  color: var(--color3);
  margin: 0;
}

.app .residence__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* на мобильном фото клиники — в полный экран, как слайды стека */
@media (max-width: 767.98px) {
  .app .residence__hero {
    height: 100vh;
    height: 100svh;
  }
  .app .residence__hero img {
    height: 100%;
    object-fit: cover;
  }
}

/* ---------------- Личная экосистема ---------------- */

.app .eco {
  background: var(--residence-bg);
  padding-top: 3rem;
  padding-bottom: 4rem;
}

.app .eco__slider {
  width: 100%;
  overflow: hidden;
  padding-left: var(--offset);
  padding-right: var(--offset);
}

/* пропорции держит сам слайд — картинка внутри может двигаться,
   не открывая фон по краям */
.app .eco__slider .swiper-slide {
  width: 73%;
  aspect-ratio: 1.13 / 1;
  overflow: hidden;
}

.app .eco__slider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Зазор между карточками. Обычно его ставит Swiper через spaceBetween,
   но если слайдер по какой-то причине не поднялся, слайды слипаются —
   тогда промежуток даёт этот запасной gap. */
.app .eco__slider:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  gap: 12px;
}

.app .eco__body {
  padding-top: 3rem;
}

.app .eco__title {
  color: var(--color2);
  margin-bottom: 2rem;
}

.app .eco__text {
  color: var(--color1);
  text-transform: uppercase;
  line-height: 1.45;
  max-width: 46rem;
}

/* ---- квадратные стрелки (свои, вместо круглых сайта) ---- */

.app .eco__nav {
  display: flex;
  gap: 4px;
  margin-top: 3rem;
}

.app .eco__nav .swiper-button-prev,
.app .eco__nav .swiper-button-next {
  position: static;
  width: 52px;
  height: 52px;
  margin: 0;
  background: var(--color2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease;
}

.app .eco__nav .swiper-button-prev:after,
.app .eco__nav .swiper-button-next:after {
  font-family: icomoon;           /* иконочный шрифт шаблона */
  font-size: 16px;
  color: var(--color1);
}

.app .eco__nav .swiper-button-prev:after { content: "\e901"; }
.app .eco__nav .swiper-button-next:after { content: "\e902"; }

.app .eco__nav .swiper-button-disabled {
  opacity: .45;
  pointer-events: none;
}

/* =========================================================
   ПК-ВЕРСИЯ: страховки под временно вертикальный контент.
   Пока горизонтальные кадры не приехали, вертикальные фото и
   видео кадрируются по центру в широких слайдах, не раздувая
   секции в простыни.
   ========================================================= */

@media (min-width: 768px) {
  /* фото клиники — кинематографичный полноэкранный кадр и на ПК */
  .app .residence__hero {
    height: 100vh;
    height: 100svh;
  }
  .app .residence__hero img {
    height: 100%;
    object-fit: cover;
  }

  /* вертикальные подмены в широких слайдах: кроп по центру,
     высота слайда не больше экрана */
  .app .section .slider__img {
    width: 100%;
    max-height: 100vh;
    object-fit: cover;
  }
}

/* ---------------- планшет и десктоп ---------------- */

@media (min-width: 768px) {
  .app .eco__slider .swiper-slide {
    width: 42%;
    aspect-ratio: 1.2 / 1;
  }
}

@media (min-width: 1025px) {
  .app .residence__caption { top: 6rem; }

  .app .eco { padding-top: 5rem; padding-bottom: 7rem; }
  .app .eco__slider .swiper-slide { width: 30%; }
  .app .eco__body { padding-top: 4rem; }
  .app .eco__nav { margin-top: 4rem; }
}


/* ===================================================================
   ПК-ПРИЁМЫ (27.08.2026) — только ширины от 1201.
   «Дыхание кадра» живёт в block.js (это твин GSAP), здесь — наведение
   на карточки и золотая нить прогресса. Мобильной версии оба приёма
   не касаются: она согласована и заморожена.

   Движение описано через ОТДЕЛЬНЫЕ свойства translate/scale, а не
   через общий transform, — чтобы никогда не столкнуться со Swiper
   и GSAP, которые пишут свой transform в inline-стиль.
   =================================================================== */

@media (min-width: 1201px) {

  /* --- дыхание кадра: обрезка обёртки ---------------------------
     Класс вешает скрипт на родителя дышащей картинки.             */
  .app .sb-breath-box {
    display: block;
    overflow: hidden;
  }

  /* --- ховер-люкс: карточка отвечает на курсор ------------------- */
  .app .sb-lux {
    transition: translate .55s cubic-bezier(.16, 1, .3, 1),
                box-shadow .55s cubic-bezier(.16, 1, .3, 1);
  }
  .app .sb-lux img {
    transition: scale 1.1s cubic-bezier(.16, 1, .3, 1);
  }

  /* золотой отсвет: узкая косая полоса, один проход по карточке */
  .app .sb-lux .sb-lux__glow {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
      rgba(255, 246, 207, 0) 34%,
      rgba(255, 233, 168, .28) 47%,
      rgba(255, 246, 207, .5) 52%,
      rgba(255, 233, 168, .28) 57%,
      rgba(255, 246, 207, 0) 70%);
    background-size: 260% 100%;
    background-position: 135% 0;
    transition: opacity .35s ease;
  }
}

@media (hover: hover) and (min-width: 1201px) {
  .app .sb-lux:hover {
    translate: 0 -6px;
    box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .55);
  }
  .app .sb-lux:hover img { scale: 1.035; }
  .app .sb-lux:hover .sb-lux__glow {
    opacity: 1;
    background-position: -35% 0;
    transition: background-position 1.15s cubic-bezier(.16, 1, .3, 1),
                opacity .3s ease;
  }
}

/* --- золотая нить: прогресс чтения ------------------------------
   Положение по вертикали ставит скрипт (живой низ шапки), ширину
   заливки — он же. Над шапкой по слою: у неё z-index 555.        */
.sb-thread {
  position: fixed;
  left: 0;
  top: 145px;
  width: 100%;
  height: 2px;
  z-index: 556;
  display: none;
  pointer-events: none;
}
.sb-thread i {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,
    rgba(167, 126, 95, .2) 0%,
    #A77E5F 42%,
    #DFA94F 76%,
    #FFE9A8 100%);
  box-shadow: 0 0 10px rgba(223, 169, 79, .35);
}

@media (min-width: 1201px) {
  .sb-thread { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-thread { display: none; }
  .app .sb-lux,
  .app .sb-lux img,
  .app .sb-lux .sb-lux__glow { transition: none; }
}


/* ===================================================================
   ПК: ШАПКА-«ПИРОГ» (01.09.2026, ширины ≥1201). Только геометрия:
   вся типографика по образцам Насти ОТМЕНЕНА по команде клиента
   01.09 — размеры и межбуквенные интервалы текстов не трогаем,
   ждём разбора образцов по одному.

   Было 145px (жёстко через --header-height на :root; ею же .app
   отступает сверху под фиксированную шапку — рассинхрон даёт синюю
   полосу под шапкой). Стало: переменная на ПК = 75px, высота шапки
   отпущена в auto, логотип 100px (перелив золота живёт на инлайн-SVG
   и от размера не зависит), бегунок акции скрыт (+32px съедал).
   Живой магнит стек-пар и золотая нить меряют шапку каждый кадр.
   sb-pc-header
   =================================================================== */

@media (min-width: 1201px) {

  :root { --header-height: 75px; } /* и высота шапки, и отступ .app */

  .app .header {
    padding: 9px 0;
    height: auto; /* фактическую высоту диктует содержимое ряда */
  }
  .app .header__logo a,
  .app .header__logo svg,
  .app .header__logo img { width: 100px; height: auto; }
  .app .header__inner > .header__nav .header__nav-item { font-size: 13px; }
  .app .header__contacts .link { font-size: 15px; }
  .app .header__contacts { row-gap: 4px; grid-template-rows: auto auto; }
  .app .header__contacts .button,
  .app .header__contacts a.button {
    padding: 6px 14px;
    font-size: 11px;
  }
  .app .header__label { display: none !important; } /* бегунок акции: съедал 32px */
}


/* ===================================================================
   ПК: БЛОК «ЭКСКЛЮЗИВНОЕ БЛАГОУСТРОЙСТВО» по образцу №1 (01.09.2026).
   Только #landscape, только ≥1201. Центрированная подача: заголовок и
   текст по центру, вместо слайдера — тройка кадров (центр крупнее),
   наведение на боковой кадр плавно меняет его с центральным. Шрифты,
   цвета, стили кнопки — штатные, не переопределяются. sb-land
   =================================================================== */

@media (min-width: 1201px) {

  .app #landscape .landscape__slider,
  .app #landscape .landscape__nav { display: none; }

  .app .sb-land {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 20px 6px;   /* боковые отступы на узких ПК-экранах */
    box-sizing: border-box;
  }
  .app .sb-land__frame {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 26%;
    height: 380px;
    transition: transform .6s cubic-bezier(.16, 1, .3, 1);
  }
  .app .sb-land__frame._center {
    width: 44%;
    height: 500px;
    cursor: default;
  }
  .app .sb-land__frame:not(._center):hover { transform: scale(1.03); }
  .app .sb-land__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .app .sb-land__b { opacity: 0; }
  .app .sb-land__frame._fade .sb-land__b {
    opacity: 1;
    transition: opacity 1s ease;
  }
  .app .sb-land__frame._snap .sb-land__b { transition: none; }

  /* подзаголовок, описание и кнопка — по центру, под кадрами */
  .app #landscape .landscape__body,
  .app #landscape .landscape__head { text-align: center; }
  .app #landscape .landscape__text {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    /* на ширину блока — ложится в две строки, как в остальных секциях */
    width: 100%;
    max-width: 1120px;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .app .sb-land-cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app .sb-land__frame,
  .app .sb-land__frame._fade .sb-land__b { transition: none; }
}


/* ===================================================================
   ПК: «РЕЗИДЕНЦИЯ ДОЛГОЛЕТИЯ» по образцу №2 (01.09.2026), ≥1201.
   1) Градиент-подложка под заголовком на фасаде клиники — тот же
      приём, что на других слайдах: тёмно-синий сверху, сходит в
      прозрачность, чтобы капс не сливался со зданием.
   2) Эко-карточки: большой кадр слева, два справа, стрелки под
      правыми, заголовок и текст под большим. Кросс-фейд листания.
   Шрифты, цвета, стрелки — штатные. sb-eco
   =================================================================== */

@media (min-width: 1201px) {

  /* градиент под «РЕЗИДЕНЦИЯ ДОЛГОЛЕТИЯ» (заголовок z-index: 2) */
  .app .residence__hero::after {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0;
    height: 32%;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(25, 27, 54, .62) 0%,
      rgba(25, 27, 54, .30) 55%,
      rgba(25, 27, 54, 0) 100%);
  }

  .app .eco { padding-top: 28px; } /* дыра между фасадом и карточками */
  .app .eco .eco__slider { display: none; }

  .app .sb-eco {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;          /* на узких ПК-экранах не липнем к краю */
    box-sizing: border-box;
  }
  .app .sb-eco__col._left  { width: 52%; }
  .app .sb-eco__col._right { width: 48%; }
  /* контейнер текстов опустел (тексты переехали в колонки), но его
     отступы давали пустую полосу — прячем */
  .app .eco .eco__body { display: none; }
  .app .sb-eco__row {
    display: flex;
    gap: 24px;
  }
  .app .sb-eco__frame {
    position: relative;
    overflow: hidden;
  }
  .app .sb-eco__frame._big { width: 100%; height: 420px; }
  .app .sb-eco__row .sb-eco__frame { height: 345px; }
  .app .sb-eco__frame._r1 { width: 55%; }
  .app .sb-eco__frame._r2 { width: 45%; }
  .app .sb-eco__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .app .sb-eco__b { opacity: 0; }
  .app .sb-eco__frame._fade .sb-eco__b {
    opacity: 1;
    transition: opacity 1s ease;
  }
  .app .sb-eco__frame._snap .sb-eco__b { transition: none; }

  /* тексты под большим кадром — штатные классы, только положение */
  .app .eco .eco__title {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 18px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
    white-space: nowrap; /* строго одна строка */
  }
  /* описание — на всю ширину блока, две строки, с теми же боковыми
     отступами; шрифт и цвет штатные */
  .app .eco .eco__text {
    display: block;
    width: 100%;
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  /* стрелки под правыми кадрами, прижаты вправо */
  .app .sb-eco__col._right .eco__nav {
    display: flex;
    justify-content: flex-start; /* под левой из двух малых карточек */
    gap: 14px;
    margin-top: 26px;
  }
  .app .sb-eco__col._right .eco__nav .swiper-button-prev,
  .app .sb-eco__col._right .eco__nav .swiper-button-next {
    position: static;
    margin: 0;
    cursor: pointer;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app .sb-eco__frame._fade .sb-eco__b { transition: none; }
}


/* ===================================================================
   ПК: «АТРИБУТЫ КОМФОРТА» (#parking, ≥1201) — переписано 01.09.
   Слайдер на ПК скрыт; статичный ряд из трёх карточек по центру,
   наведение/клик меняет подпись под рядом. Заголовок — собственный
   контейнер (шаблонный .section__title — flex, центр там невозможен).
   Шрифты, цвета — штатные. sb-pk
   =================================================================== */

@media (min-width: 1201px) {

  .app #parking .pk__slider { display: none; }

  .app #parking .sb-pk-title {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
  }
  .app #parking .sb-pk-title h2 {
    display: block;
    width: 100%;
    text-align: center;
  }

  .app .sb-pk-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin: 26px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .app .sb-pk-card {
    position: relative;
    overflow: hidden;
    width: calc((100% - 40px) / 3);
    height: 435px;
    cursor: pointer;
  }
  .app .sb-pk-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: .78;
    transition: opacity .45s ease;
  }
  .app .sb-pk-card._on img,
  .app .sb-pk-card:hover img { opacity: 1; }

  /* подпись под рядом: по центру, описание на ширину блока в 2 строки */
  .app #parking .sb-pk-caption {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
  }
  .app #parking .sb-pk-caption .pk__head { margin-top: 30px; }
  .app #parking .sb-pk-caption .pk__sub {
    width: 100%;
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    min-height: 0;
  }
}



/* ===================================================================
   ПК: ТОЧЕЧНЫЕ ПРАВКИ 01.09 (вечер) — воздух и добитые заголовки.
   sb-final-air
   =================================================================== */

@media (min-width: 1201px) {

  /* --- клиника: конец «полосы». Секция фасада держала 100vh, а
     горизонтальный ПК-кадр ниже — остаток заливался бежевым фоном.
     Теперь высота секции равна высоте кадра; aspect-ratio резервирует
     место до загрузки ленивой картинки (иначе схлоп в ноль) --- */
  .app .residence__hero { height: auto; }
  .app .residence__hero picture,
  .app .residence__hero img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1678 / 937;
    object-fit: cover;
  }

  /* --- благоустройство: заголовок по центру (шаблонный .section__title
     — flex со space-between, единственный h2 прижимался влево) и
     воздух на стыках секции --- */
  .app #landscape .section__title {
    justify-content: center;
    margin: 0;
    padding: 0;
  }
  /* заголовок стоит в геометрическом центре зазора между видео-слайдом
     сверху и карточками: равные 56px с обеих сторон (суммарный зазор
     сохранён), нижний отступ секции прежний */
  .app #landscape { padding: 0 0 64px; }
  .app #landscape > .inner:first-child {
    margin: 0 auto;
    /* асимметрия компенсирует 26px внутренних отступов флекс-обёртки:
       фактически выходит 56px и сверху, и снизу заголовка */
    padding: 48px 0 64px;
    height: auto;
  }
  .app #landscape .sb-land { padding-top: 0; }

  /* --- атрибуты комфорта: больше воздуха вокруг текстов --- */
  .app #parking { padding: 64px 0; }
  .app .sb-pk-row { margin-top: 40px; }
  .app #parking .sb-pk-caption .pk__head { margin-top: 44px; }
  .app #parking .sb-pk-caption .pk__sub { margin-top: 14px; }

  /* --- ресторан: слайдер жив (3 кадра, fade), но штатные стрелки
     23×30 в углу на ПК не читались — «казалось, слайдера нет».
     Делаем их заметными, стиль и иконки штатные --- */
  /* плашка со стрелками и счётчиком — как на мобильной: слайд ужат
     так, чтобы кадр + плашка помещались под шапкой, и наезжающий
     «Спорт» закрывал их последними */
  .app #restaurant .swiper-slide,
  .app #restaurant .slider__img {
    height: calc(100svh - var(--sb-hdr, 75px) - 96px);
  }
  .app #restaurant .slider__img { object-fit: cover; width: 100%; }
  .app #restaurant .slider__nav .swiper-button-prev,
  .app #restaurant .slider__nav .swiper-button-next {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
}


/* ===================================================================
   ПЕРВЫЙ ЭКРАН 10.09.2026: фоновое видео, убранный эскроу-баннер и
   ссылка «Смотреть видео полностью». Обе версии — не в медиазапросе.
   sb-hero
   =================================================================== */

/* эскроу-полоса убрана с главной (страховка к JS-удалению) */
.app .text-banner { display: none !important; }

/* ВАЖНО: шаблон рассчитан на ДВА <video> в первом экране и прячет
   `.start-screen video:last-of-type` на ПК (второй тег там считается
   мобильным). Наш единственный тег попадал под это правило и не
   показывался на десктопе — перебиваем явно для обеих ширин. */
.app .start-screen video.sb-hero-video,
.app .start-screen video.sb-hero-video:last-of-type {
  display: block !important;
}

/* видео лежит поверх постера, под текстом первого экрана
   (.start-screen__main имеет z-index: 1) */
.app .sb-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.app .sb-hero-video._on { opacity: 1; }

/* --- ссылка «Смотреть видео полностью» — в правом нижнем углу
   карты генплана, в свободном поле под подписью клиники --- */
.app .swipe-img__video-links .sb-full-video {
  position: absolute;
  right: 10.5%;
  bottom: 2.5%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .6rem 1.1rem .6rem .7rem;
  border: 1px solid rgba(202, 160, 137, .6);
  border-radius: 999px;
  background: rgba(25, 27, 54, .9);
  color: var(--color3);
  font-size: 1.15rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color .35s ease, background-color .35s ease, color .35s ease;
}
.app .sb-full-video__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color2);
}
/* треугольник «play» — строится бордерами, без иконочного шрифта */
.app .sb-full-video__play::before {
  content: '';
  width: 0;
  height: 0;
  margin-left: .25rem;
  border-style: solid;
  border-width: .5rem 0 .5rem .85rem;
  border-color: transparent transparent transparent #fff;
}

@media (hover: hover) {
  .app .swipe-img__video-links .sb-full-video:hover {
    border-color: var(--color3);
    background: var(--color1);
    color: #fff;
  }
}

/* мобильная: ссылка — В ВЕРХУ карты, в белом поле сразу за коричневой
   полосой пляжа (место выверено по картинке генплана: между подписями
   «Велодорожка» и «Событийная площадь», выше «Гидромассажного
   бассейна»). Видна сразу, без горизонтального свайпа. */
.app .swipe-img__video-links .sb-full-video._top-left {
  left: 23.5%;
  top: 1.2%;
  right: auto;
  bottom: auto;
  width: auto;
  max-width: 20.4%;
  white-space: normal;
  text-align: left;
  font-size: .88rem;
  line-height: 1.2;
  letter-spacing: 0;
  padding: .5rem .7rem .5rem .6rem;
  gap: .5rem;
}
.app .sb-full-video._top-left .sb-full-video__play { width: 2rem; height: 2rem; }
.app .sb-full-video._top-left .sb-full-video__play::before {
  border-width: .4rem 0 .4rem .68rem;
}


/* ===================================================================
   ПРАВКИ 10.09.2026 (вечер): первый экран.
   sb-hero-2
   =================================================================== */

/* кнопка «Получить планировки и цены в мессенджер» убрана с первого
   экрана — команда клиента, обе версии */
.app .start-screen__button { display: none !important; }

/* мобильная: заголовок и медали опущены примерно на 15% высоты кадра */
@media (max-width: 1200px) {
  .app .start-screen__title,
  .app .start-screen__awards {
    transform: translateY(4.6rem);   /* 7% высоты кадра первого экрана */
  }
}


/* ===================================================================
   ЛОГОТИП «КРАФТ ДЕВЕЛОПМЕНТ» В КОНТАКТАХ (10.09.2026).
   Новый знак вместо старого штрихованного + фирменный золотой
   перелив. Обе версии. sb-kraft-logo
   =================================================================== */

.app .sb-kraft-logo {
  position: relative;
  /* обёртка обнимает картинку по факту: иначе блик (он растянут по
     обёртке) не совпал бы с логотипом — на мобильной шаблон сужает
     знак сильнее, чем на ПК */
  display: inline-block;
  line-height: 0;
  max-width: 150px;
}
.app .sb-kraft-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* слой-блик: обрезан маской по тому же PNG, поэтому золото идёт
   строго по силуэту знака, а не прямоугольником поверх него */
.app .sb-kraft-logo__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(100deg,
    rgba(255, 237, 173, 0) 30%,
    #FFEDAD 44%,
    #FFF6CF 50%,
    #F1CE82 56%,
    rgba(241, 206, 130, 0) 70%);
  background-size: 300% 100%;
  background-position: 100% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .app .sb-kraft-logo._run .sb-kraft-logo__shine {
    animation: sbLogoGold 1.9s ease-in-out .2s forwards;
  }
}

@keyframes sbLogoGold {
  0%   { opacity: 0;  background-position: 100% 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0;  background-position: 0% 0; }
}