/* =====================================================================
   Контур Кингисеппского района — фоновый декоративный элемент.

   Только тонкая линия: без заливки, точек и подписей — так решил
   владелец сайта. Когда блок появляется на экране, линия
   «прорисовывается» по границе района.

   Разметка — district-snippet.html, прорисовка — district.js.
   Значения ниже взяты с сайта kingisepphotel.ru один в один.
   ===================================================================== */

/* Контейнер, от которого позиционируется контур. У нас это шапка блока
   «Достопримечательности» (подпись, заголовок, вводный абзац). Всё, что
   лежит в нём, кроме контура, поднимаем над линией. */
.district-host { position: relative; }
.district-host > :not(.district) { position: relative; z-index: 1; }

/* Блок, который идёт после шапки (список + карточка с рисунком), тоже
   должен лежать над контуром: на компьютере контур уходит под карточку —
   карточка как будто лежит на карте района. Карточке нужен непрозрачный фон. */
.district-over { position: relative; z-index: 1; }

.district {
  --district-color:   #626409;               /* оливковый; на сайте — var(--gr-500) */
  --district-opacity: .52;
  --district-w:       1.8;                   /* толщина в единицах рисунка — см. README */
  --district-len:     4492;                  /* длина линии в единицах рисунка */
  --district-sec:     clamp(48px, 5.8vw, 88px);   /* вертикальный отступ секции; на сайте — var(--sec) */
  --district-gap:     clamp(28px, 3.4vw, 48px);   /* отступ под шапкой блока */
  --district-ease:    cubic-bezier(.22, .68, .32, 1);

  position: absolute;
  z-index: 0;
  right: -10px;
  top: calc(var(--district-sec) * -.85);     /* начинается выше заголовка, у верхнего края секции */
  height: clamp(560px, 46vw, 700px);
  aspect-ratio: 768.5 / 1000;                /* как у viewBox */
  pointer-events: none;
  user-select: none;
}
.district svg { display: block; width: 100%; height: 100%; overflow: visible; }

.district__line {
  fill: none;
  stroke: var(--district-color);
  stroke-opacity: var(--district-opacity);
  stroke-width: var(--district-w);
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* ---- Прорисовка --------------------------------------------------------
   Включается скриптом: он ставит класс .district--armed, а когда блок
   появляется на экране — .is-in. Без скрипта и при настройке «уменьшить
   движение» класса нет, и линия просто видна целиком.
   Переходы заданы только на состоянии .is-in — поэтому, когда скрипт
   прячет линию перед показом, это происходит мгновенно, без мигания. */
.district--armed { opacity: 0; transform: translateY(28px); }
.district--armed .district__line {
  stroke-dasharray: var(--district-len);
  stroke-dashoffset: var(--district-len);
}
.district--armed.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--district-ease), transform 1s var(--district-ease);
}
.district--armed.is-in .district__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 3.4s cubic-bezier(.45, .05, .25, 1) .2s;
}

/* ---- Планшет: блок в одну колонку, карточка ниже списка.
   Контур целиком помещается в свободный угол справа от заголовка:
   от верха секции до низа шапки, ширина — по пропорции рисунка. */
@media (max-width: 1024px) {
  .district {
    --district-w: 4.2;
    right: 0;
    top: calc(var(--district-sec) * -.55);
    bottom: calc(var(--district-gap) * -1 + 14px);
    height: auto;
  }
}

/* ---- Телефон: свободного угла нет — контур лежит под заголовком как
   водяной знак: бледнее и заходит за правый край экрана. */
@media (max-width: 699px) {
  /* Секция, в которой стоит контур, обрезает всё, что вылезает вбок, —
     иначе на телефоне появится горизонтальная прокрутка. Если у секции
     есть «липкие» (position: sticky) элементы, проверьте, что они
     не сломались — overflow: hidden их отключает. */
  .district-section { overflow: hidden; }
  .district {
    --district-w: 4;
    --district-opacity: .24;
    right: -54px;
    top: calc(var(--district-sec) * -.35);
    bottom: auto;
    height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .district--armed.is-in,
  .district--armed.is-in .district__line { transition: none; }
}