/* Фінал «Пісок часу» (js/finale.js): «живе фото» з годинником — частина світу, а не картинка збоку.
   Телефон: відео на весь екран, заголовок у темному небі, кнопка внизу над дюнами.
   ПК: текст ліворуч, світ праворуч на всю висоту секції; краї м'яко тонуть у тлі. */
.sec-final { position: relative; min-height: 100svh; padding: 0; display: block; text-align: left; }
.sec-final::before, .sec-final::after { display: none; }

.final-world { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg); }
.final-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
/* Перехід із секції вище й у підвал; темніше вгорі — під заголовок. */
.final-world::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(31, 24, 19, .55) 13%, rgba(31, 24, 19, 0) 36%,
    rgba(31, 24, 19, 0) 74%, rgba(31, 24, 19, .55) 92%, var(--bg) 100%); }

.final-copy { position: relative; z-index: 1; min-height: 100svh; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 92px 20px 44px; }
.sec-final h2 { margin: 0 auto 14px; }
.sec-final .hero-sub { max-width: 30ch; margin: 0 auto; }
.sec-final .btn-cta { margin-top: auto; }

@media (min-width: 768px) {
  .sec-final { min-height: 0; height: clamp(640px, 100vh, 980px); }
  .final-world { inset: 0 max(var(--gutter), calc((100% - 1120px) / 2)) 0 auto; aspect-ratio: 9 / 16; height: 100%;
    background-position: 50% 50%;
    /* Краї сцени розчиняються в темряві: ліворуч (до тексту) — ширше, знизу — до підвалу. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%),
      linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%);
            mask-composite: intersect; }
  .final-video { object-position: 50% 50%; }
  .final-world::after { display: none; }
  .final-copy { min-height: 0; height: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter);
    align-items: flex-start; justify-content: center; text-align: left; }
  .final-copy > * { max-width: 520px; }
  .sec-final h2 { margin: 0 0 18px; }
  .sec-final .hero-sub { margin: 0; }
  .sec-final .btn-cta { margin-top: 28px; }
}