/* Фон героя на головній: фото вулиці (assets/img/foto, Pexels) на весь
   перший екран.

   Фото лежить у фіксованому шарі .bgl під сторінкою і повільно наближається
   (kb2). Поки людина гортає перший екран, фото розмивається, а весь шар
   згасає, і лишається звичайний беж сторінки.

   Текст героя темний, тож біля тексту фото під бежевою вуаллю (.veil), а
   видно його справа. На телефоні текст угорі на бежі, фото під кнопками.
   Телефон бере файл 1000px, ширший екран 2000px (srcset).

   Рушій: CSS scroll-driven animations. Де їх немає (Firefox), base.js
   ставить --p (0..1) через IntersectionObserver, і шар просто згасає.
   При prefers-reduced-motion фото нерухоме і прокручується разом зі
   сторінкою. Коли героя вже не видно, шар ховається (base.js, .off). */

.bgl { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.no-sda .bgl { opacity: calc(1 - var(--p, 0)); }
.bgl.off { visibility: hidden; }
.bgl.off * { animation-play-state: paused !important; }

.bgl .frame { position: absolute; inset: 0; overflow: hidden; }
.bgl .media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; animation: kb2 28s ease-in-out infinite alternate; }
@keyframes kb2 { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }

/* Вуаль: беж біля тексту зліва, прозоро справа, і внизу знову беж */
.bgl .veil { position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 94%, transparent) 30%, color-mix(in srgb, var(--bg) 78%, transparent) 50%, color-mix(in srgb, var(--bg) 30%, transparent) 72%, color-mix(in srgb, var(--bg) 8%, transparent) 100%),
  linear-gradient(180deg, transparent 60%, var(--bg) 100%); }

@media (max-width: 860px) {
  /* Телефон: фото під кнопками, верхній край тане в беж; вуаль не потрібна */
  .bgl .frame { top: 50vh; -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%); mask-image: linear-gradient(180deg, transparent, #000 22%); }
  .bgl .veil { display: none; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bgl { animation: bgl-out linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    .bgl .frame { animation: v-zoom linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  }
}
@keyframes bgl-out { to { opacity: 0; } }
@keyframes v-zoom { to { transform: scale(1.18); filter: blur(10px) saturate(.6); } }

@media (prefers-reduced-motion: reduce) {
  .bgl { position: absolute; height: 100dvh; }
  .bgl, .bgl * { animation: none !important; }
}

/* Темна тема: фото лишається, але приглушене під темний беж */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bgl::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 74%, transparent); } }
:root[data-theme="dark"] .bgl::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 74%, transparent); }