/* ============================================================
   SAP SAN — ДЕКОРАТИВНА СИСТЕМА
   ------------------------------------------------------------
   Усе, що робить сторінку впізнаваною поза текстом і фото:
   знак сокола, гілки верби, очерет, лінії води, геометрія
   A-frame, рамки, маски, курсор, індикатор прокрутки.

   Правило, за яким це зроблено: декор ніколи не «затуляє
   порожнечу». Кожен елемент або продовжує рух кадру поруч
   (гілка звисає в бік фото), або тримає межу секції (вода на
   стику), або повторює конструкцію будиночка (трикутник).
   Тому елементів мало на екран, але вони великі.

   Форми підвантажуються як mask-image, а не <img>: так вони
   фарбуються в currentColor поточної поверхні, лишаються
   векторно різкими на будь-якому масштабі й не тягнуть
   зайвих запитів у розмітку.
   ============================================================ */

/* ---------- 1. ЗНАК ---------------------------------------- */
.bird { width: 100%; height: auto; display: block; }

/* Розділювач-сокіл: тонка лінія, що переходить у знак і
   зникає. Використовується замість <hr> у ключових місцях. */
.rule-bird {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
  color: var(--fg-mute);
}
.rule-bird::before, .rule-bird::after {
  content: ''; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: .45;
}
.rule-bird::after { background: linear-gradient(90deg, currentColor, transparent); }
.rule-bird .bird { width: clamp(90px, 12vw, 190px); opacity: .8; }

/* Водяний знак: слово SAP SAN на всю ширину секції.
   Живе під контентом, не перехоплює події. */
.wm {
  position: absolute; inset-inline: 0; z-index: 0;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(5rem, 21vw, 21rem); line-height: .8;
  letter-spacing: .16em; text-indent: .16em;
  text-align: center; white-space: nowrap;
  color: var(--fg); opacity: .045;
  pointer-events: none; user-select: none;
}

/* ---------- 2. ФОРМИ-МАСКИ --------------------------------- */
/* Спільна база: пляма кольору, обрізана силуетом SVG. */
.decor {
  position: absolute; z-index: 0;
  pointer-events: none; user-select: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  color: var(--fg);
  opacity: .085;
}
.decor--willow  { -webkit-mask-image: url(../assets/brand/willow.svg);     mask-image: url(../assets/brand/willow.svg); }
.decor--willow2 { -webkit-mask-image: url(../assets/brand/willow-sm.svg);  mask-image: url(../assets/brand/willow-sm.svg); }
.decor--pine    { -webkit-mask-image: url(../assets/brand/pine.svg);       mask-image: url(../assets/brand/pine.svg); }
.decor--reeds   { -webkit-mask-image: url(../assets/brand/reeds.svg);      mask-image: url(../assets/brand/reeds.svg); }
.decor--water   { -webkit-mask-image: url(../assets/brand/water.svg);      mask-image: url(../assets/brand/water.svg); }
.decor--water-w { -webkit-mask-image: url(../assets/brand/water-wide.svg); mask-image: url(../assets/brand/water-wide.svg); }
.decor--aframe  { -webkit-mask-image: url(../assets/brand/aframe.svg);     mask-image: url(../assets/brand/aframe.svg); }
.decor--wing    { -webkit-mask-image: url(../assets/brand/wing.svg);       mask-image: url(../assets/brand/wing.svg); }
.decor--bird    { -webkit-mask-image: url(../assets/brand/falcon.svg);     mask-image: url(../assets/brand/falcon.svg); }

/* Дзеркальні копії — щоб мотив не читався як один і той самий файл */
.decor--flip  { transform: scaleX(-1); }
.decor--flipY { transform: scaleY(-1); }
.decor--flip.decor--flipY { transform: scale(-1, -1); }

/* Готові розкладки: гілка звисає з верхнього краю секції
   й заходить за її межу — це і дає відчуття «крони над блоком». */
.decor-top-left   { top: calc(-1 * clamp(2rem, 6vw, 6rem)); left: calc(-1 * clamp(1rem, 5vw, 5rem)); width: clamp(280px, 40vw, 640px); aspect-ratio: 900 / 640; }
.decor-top-right  { top: calc(-1 * clamp(2rem, 6vw, 6rem)); right: calc(-1 * clamp(1rem, 5vw, 5rem)); width: clamp(280px, 40vw, 640px); aspect-ratio: 900 / 640; }
.decor-bot-left   { bottom: 0; left: calc(-1 * clamp(1rem, 4vw, 4rem)); width: clamp(260px, 34vw, 560px); aspect-ratio: 900 / 360; }
.decor-bot-right  { bottom: 0; right: calc(-1 * clamp(1rem, 4vw, 4rem)); width: clamp(260px, 34vw, 560px); aspect-ratio: 900 / 360; }
.decor-band       { left: 0; right: 0; height: clamp(60px, 9vw, 130px); }

@media (max-width: 640px) {
  /* На вузькому екрані великий декор конкурує з контентом —
     лишаємо лише те, що працює як тло, і робимо його тихішим. */
  .decor { opacity: .06; }
  .decor-top-left, .decor-top-right { width: clamp(220px, 62vw, 320px); }
}

/* ---------- 3. ГЕОМЕТРІЯ A-FRAME --------------------------- */
/* Фото, обрізане силуетом фронтона. Кут — той самий, що на
   реальних будиночках: вершина по центру, база на всю ширину. */
.aframe-clip {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* Пом'якшений варіант: зрізана вершина — читається як дах,
   але лишає більше корисної площі кадру. */
.aframe-clip--soft {
  -webkit-clip-path: polygon(50% 0%, 100% 62%, 100% 100%, 0% 100%, 0% 62%);
  clip-path: polygon(50% 0%, 100% 62%, 100% 100%, 0% 100%, 0% 62%);
}

/* Маркер-трикутник замість крапки в списках */
.tri-list { display: grid; gap: .8rem; }
.tri-list li {
  position: relative; padding-left: 1.6rem;
  color: var(--fg-soft);
  font-size: clamp(1.02rem, 1.3vw, 1.12rem);
  line-height: 1.6;
}
.tri-list li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 0; height: 0;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-bottom: 8px solid var(--accent);
}

/* ---------- 4. РАМКИ ТА КАДРИ ------------------------------ */
.figure { position: relative; overflow: hidden; background: var(--slate); }
/* Фото знає свою точку інтересу (--fx/--fy проставляє
   SAPSAN.picture з маніфесту), тому будиночок не втрачає дах
   навіть коли кадр таки доводиться підрізати. */
.figure img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%);
}
.figure--free img { height: auto; object-fit: contain; }

.figcap {
  margin-top: .9rem;
  font-size: var(--t-small); letter-spacing: .02em; color: var(--fg-mute);
  display: flex; align-items: baseline; gap: .6rem;
}
.figcap::before {
  content: ''; width: 1.6rem; height: 1px; flex: none;
  background: currentColor; opacity: .5; transform: translateY(-.35em);
}

/* Кутові засічки — фірмова рамка «креслення». */
.ticks { position: relative; }
.ticks::before, .ticks::after {
  content: ''; position: absolute; width: 22px; height: 22px;
  border: 1px solid var(--line); pointer-events: none;
}
.ticks::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.ticks::after  { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }

/* ---------- 5. РОЗКРИТТЯ КАДРУ ----------------------------- */
/* Просте затухання: --p той самий (0 → 1), яким керує JS
   (js/motion.js), просто тепер він керує лише прозорістю. */
.js .reveal-img { --p: 0; }
.js .reveal-img img {
  opacity: var(--p);
  will-change: opacity;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal-img img { opacity: 1; }
}

/* Ефект глибини на великих кадрах — зсув усередині рамки */
.par { will-change: transform; }

/* ---------- 6. НАКЛАДКИ ПІД ТЕКСТ -------------------------- */
/* Не суцільна вуаль на все фото, а спрямований градієнт з того
   боку, де стоїть текст. Композиція кадру лишається видимою. */
.veil { position: relative; }
.veil::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: var(--veil-grad, linear-gradient(to top,
    rgba(9,15,18,.72) 0%, rgba(9,15,18,.34) 34%, rgba(9,15,18,.06) 62%, transparent 100%));
}
.veil--left::after {
  --veil-grad: linear-gradient(to right,
    rgba(9,15,18,.76) 0%, rgba(9,15,18,.42) 38%, rgba(9,15,18,.05) 70%, transparent 100%);
}
.veil--right::after {
  --veil-grad: linear-gradient(to left,
    rgba(9,15,18,.76) 0%, rgba(9,15,18,.42) 38%, rgba(9,15,18,.05) 70%, transparent 100%);
}
.veil--soft::after {
  --veil-grad: linear-gradient(to top, rgba(9,15,18,.5), rgba(9,15,18,.12) 55%, transparent);
}
.veil--none::after { display: none; }

/* Дрібне зерно поверх великих кадрів: прибирає «цифрову
   пластмасу» на градієнтах неба й води після ресемплу. */
.grain::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; opacity: .32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 7. ІНДИКАТОР ПРОКРУТКИ ------------------------- */
/* Сокіл летить уздовж верхньої межі екрана: його позиція —
   це і є прогрес читання сторінки. Фірмово й водночас корисно. */
.flightbar {
  position: fixed; inset: 0 0 auto; z-index: 95;
  height: 30px; pointer-events: none;
  /* Над героєм індикатор мовчить: там і так стоїть знак, і
     другий сокіл у тому ж куті читався б як дефект. */
  opacity: 0; transition: opacity .6s var(--e-out);
}
.flightbar.is-on { opacity: 1; }
.flightbar__line {
  position: absolute; left: 0; top: 0; height: 1px; width: 100%;
  background: var(--aqua); opacity: .34;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.flightbar__bird {
  position: absolute; top: 3px; left: 0;
  width: clamp(34px, 4vw, 52px); color: var(--aqua);
  transform: translateX(calc(var(--p, 0) * (100vw - 52px)));
  opacity: .85;
}
.flightbar__bird .bird { width: 100%; }
@media (prefers-reduced-motion: reduce) { .flightbar { display: none; } }

/* ---------- 8. КУРСОР -------------------------------------- */
/* Раніше супроводжував будь-який рух миші маленькою крапкою —
   зайва деталь, яка просто йде за курсором без сенсу. Тепер
   з'являється ЛИШЕ над зоною, яку справді можна тягнути (слайдер
   будиночків): курсор розгортається в кільце з крилом — жест
   стає очевидним без підказки текстом, а решту часу елемент
   узагалі не видно. */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 150;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 100px;
  background: rgba(198,226,230,.16);
  border: 1px solid rgba(198,226,230,.5);
  pointer-events: none;
  transition: opacity .35s;
  opacity: 0;
}
.cursor.is-on.is-drag { opacity: 1; }
.cursor__wing {
  width: 60%; margin: auto; height: 100%;
  display: grid; place-items: center;
  color: var(--foam); opacity: 0; transition: opacity .35s;
}
.cursor.is-drag .cursor__wing { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }

/* ---------- 9. ЗАГОЛОВКИ ПО РЯДКАХ ------------------------- */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; will-change: transform; }