/* Модуль «Рамки біля фото».
   Тонка темна рамка трохи більша за фото й повільно блукає навколо нього.
   Колір — «інверсія» фону блоку, порахована заздалегідь: на рудому «Неділя» (#f0a536) інверсія дає синій (#0f5ac9),
   на світлому «Хто ми» — майже чорний із синявою. Справжній mix-blend-mode тут не використовуємо:
   він перераховується щокадру анімації й гальмує сторінку.
   Рух хаотичний: зсув, нахил і «дихання» зібрані в ОДНУ анімацію transform з нерівними кроками; сусідні рамки мають
   різні траєкторії, тривалість і фазу. Одну анімацію браузер віддає відеокарті. Три окремі (translate, rotate, scale)
   на одному елементі він рахував щокадру на процесорі — навіть коли рамки за екраном, — і скрол гальмував.
   Рамку малює ::before у .frame-host — обгортці, яка не обрізає вміст, тому рамка може виходити за край фото. */
.frame-host { isolation: isolate; }
.frame-host::before {
  content: ''; position: absolute; inset: -11px; z-index: -1; pointer-events: none;
  padding: 1px; border-radius: calc(var(--radius) + 11px);
  background: linear-gradient(135deg, #1d1a2e 0%, #3a3370 28%, #6a5fc0 44%, #26205a 64%, #1d1a2e 100%);
  /* Лишаємо від заливки тільки смужку завтовшки з padding — виходить рамка з градієнтом */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transform: translate(10px, 8px);
  transition: opacity 1.4s .5s var(--ease-out);
  animation: nl-frame-wander-a 21s ease-in-out infinite alternate;
}
/* З’являється, коли фото вже розкрилося */
.frame-host:has(.is-in)::before, html:not(.js) .frame-host::before { opacity: .6; }
/* Рамка за екраном стоїть (клас ставить landing.js) */
.frame-host.is-offscreen::before { animation-play-state: paused; }

/* Галерея на рудому фоні: сині рамки, через одну — глибший чорнильний синій */
.gallery__item::before {
  background: linear-gradient(135deg, #0b3f95 0%, #1c5fd0 30%, #6d9bf0 45%, #164aa8 66%, #0b3f95 100%);
}
.gallery__item:nth-child(even)::before {
  background: linear-gradient(135deg, #14124a 0%, #26205a 30%, #4a54b8 46%, #1d1a2e 70%, #14124a 100%);
  animation-name: nl-frame-wander-b; animation-duration: 25s; animation-delay: -9s;
}
.gallery__item:nth-child(3n)::before { animation-name: nl-frame-wander-c; animation-duration: 18s; animation-delay: -13s; }
.gallery__item:nth-child(4n+1)::before { animation-direction: alternate-reverse; }

/* Рамка біля фото «Хто ми» на телефоні трохи виходить за край екрана — не даємо сторінці їздити вбік */
.about { overflow-x: clip; }

/* Місце, щоб рамки в стрічці галереї не обрізалися й не налазили на сусідні фото */
.gallery { padding-block: 22px; gap: 30px; }
@media (min-width: 900px) { .gallery { gap: 38px; } }

@keyframes nl-frame-wander-a {
  0%   { transform: translate(11px, 8px) rotate(-.9deg) scale(1); }
  14%  { transform: translate(-4px, 12px) rotate(-.2deg) scale(1.008); }
  31%  { transform: translate(8px, -3px) rotate(.5deg) scale(1.012); }
  47%  { transform: translate(-10px, -8px) rotate(.1deg) scale(.998); }
  63%  { transform: translate(-2px, 10px) rotate(-.4deg) scale(.994); }
  82%  { transform: translate(6px, 11px) rotate(1deg) scale(1.006); }
  100% { transform: translate(-8px, 2px) rotate(-.2deg) scale(1); }
}
@keyframes nl-frame-wander-b {
  0%   { transform: translate(-9px, 4px) rotate(.6deg) scale(1.004); }
  19%  { transform: translate(7px, 12px) rotate(-.7deg) scale(.996); }
  38%  { transform: translate(12px, -6px) rotate(.2deg) scale(1.012); }
  56%  { transform: translate(-3px, -11px) rotate(.9deg) scale(1); }
  74%  { transform: translate(-12px, 6px) rotate(-.3deg) scale(1.008); }
  100% { transform: translate(5px, 9px) rotate(-1deg) scale(.994); }
}
@keyframes nl-frame-wander-c {
  0%   { transform: translate(4px, -9px) rotate(-.4deg) scale(.996); }
  22%  { transform: translate(-11px, 3px) rotate(.8deg) scale(1.01); }
  41%  { transform: translate(-5px, 13px) rotate(-.6deg) scale(1); }
  60%  { transform: translate(10px, 7px) rotate(.3deg) scale(.994); }
  79%  { transform: translate(8px, -10px) rotate(-.9deg) scale(1.012); }
  100% { transform: translate(-7px, -2px) rotate(.5deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .frame-host::before { animation: none; }
}