/* «Вау» першого екрана й вікна у світ — окремо, щоб легко відкотити. */

/* Поле пікселів — над сяйвом, під текстом і телефоном. */
.hero .pole { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* ── Вікно у світ ── секція заввишки кілька екранів, усередині липкий
   екран. Картина спершу обрізана до картки із заокругленими кутами, а з
   прокруткою обрізка тане — і світ займає весь екран. Обрізаємо clip-path,
   а не міняємо розмір полотна: так не перераховується розкладка. */
.vikno { padding: 0; height: 420vh; height: 420svh; position: relative; }   /* доріжка: розгортання, фраза, затягування в портал */
.vikno-lypke { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.vikno-cv {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  image-rendering: pixelated; image-rendering: crisp-edges;
  clip-path: inset(var(--iy, 18%) var(--ix, 14%) round var(--r, 32px));
}
/* Темніша пляма під фразою — контраст замість світіння. */
.vikno-lypke::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(75% 42% at 50% 66%, rgba(0,0,0,.72), rgba(0,0,0,.3) 60%, transparent 85%);
  opacity: var(--t, 0);
}
.vikno-tekst {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 22px 27vh; padding: 0 22px 27svh; pointer-events: none; overflow: hidden;
}
/* Фраза ВИРИНАЄ з картини: стоїть за ближнім пагорбом (переднє полотно
   над нею) і з прокруткою підіймається з-за нього на своє місце. */
.vikno-tekst h2 {
  font-size: clamp(46px, 8.6vw, 128px); color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.5);
  transform: translateY(calc((1 - var(--t, 0)) * 115%));
  opacity: clamp(0, calc(var(--t, 0) * 5), 1);
}
.vikno-tekst h2 .grad { background-image: linear-gradient(100deg, #d4ff5c 5%, #47f5ff 50%, #ff5fa2 95%); text-shadow: none; }
.vikno-pered { z-index: 2; pointer-events: none; opacity: calc(1 - var(--vp, 0)); }
/* Літери летять у портал над переднім пагорбом. */
.vikno-tekst h2 .skr { position: relative; z-index: 3; }
/* Кінець затягування — темрява того ж кольору, що й наступна секція:
   ніби пройшов крізь портал. */
.vikno-vykhid { position: absolute; inset: 0; z-index: 4; background: var(--bg); opacity: var(--v, 0); pointer-events: none; }
/* Під час хвилі кожна літера — клітинка фіксованої ширини; наприкінці
   фраза вертається звичайним HTML уже з градієнтом. */
.vikno-tekst .skr { display: inline-block; text-align: center; color: var(--sky); -webkit-text-fill-color: var(--sky); }
.vikno-tekst .skr.gotova { color: #fff; -webkit-text-fill-color: #fff; }
.vikno-tekst .grad .skr { color: var(--acid); -webkit-text-fill-color: var(--acid); }
.vikno-tekst .grad .skr.gotova { color: #d4ff5c; -webkit-text-fill-color: #d4ff5c; }

/* ── Вікно після показу — плитка з живою сценою (скрипт додає .zhornuto).
   Телефон: квадрат на ширину сторінки. Компʼютер: широке вікно-банер на
   ширину вмісту, з фразою — щоб між першим екраном і маніфестом стояла
   звичайна секція, а не порожній прохід. */
.vikno.zhornuto { height: auto; padding: calc(var(--sek-pad) * .5) 22px 0; }
.vikno.zhornuto .vikno-yakir { top: 0; }
.vikno.zhornuto .vikno-lypke {
  position: relative; height: auto; aspect-ratio: 1 / 1; max-width: 1180px; margin: 0 auto;
  border-radius: 32px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5);
}
.vikno.zhornuto .vikno-cv { clip-path: none; }
.vikno.zhornuto .vikno-tekst, .vikno.zhornuto .vikno-lypke::after { display: none; }
@media (min-width: 820px) {
  .vikno.zhornuto .vikno-lypke { aspect-ratio: 21 / 9; }
  .vikno.zhornuto .vikno-tekst { display: flex; padding: 0 32px 9%; }
  .vikno.zhornuto .vikno-lypke::after { display: block; }
  .vikno.zhornuto .vikno-tekst h2 { font-size: clamp(36px, 4.6vw, 72px); }
}

/* ── Більше повітря й великого тексту ── заголовки секцій більші, а між
   секціями більше порожнього: так тримаються сайти, на які рівнялись. */
section { --sek-pad: clamp(96px, 13vw, 180px); padding: var(--sek-pad) 0; }
/* Перехід з меню — до заголовка секції, а не до її порожнього верхнього
   поля: з більшими відступами кнопки «привозили» в порожнечу. */
section[id] { scroll-margin-top: calc(28px - var(--sek-pad)); }
.vikno[id] { scroll-margin-top: 0; }
/* Якір «Світи» — на тій глибині вікна, де картина вже на весь екран, а
   фраза проступила (див. prokrutka() у vau.js). */
.vikno-yakir { position: absolute; left: 0; top: calc(140vh + 76px); top: calc(140svh + 76px); }
h2 { font-size: clamp(40px, 7.4vw, 96px); line-height: 1.02; letter-spacing: -.035em; }
.center > .sub, .center .sub { margin-top: 20px; }

/* ── Заголовки після маніфесту — по літерах (скрипт у vau.js) ── */
.zl-slovo { display: inline-block; white-space: nowrap; }
.zl, .zl-blok { display: inline-block; will-change: opacity, transform, filter; }
.zl-blok { white-space: nowrap; }

/* Підказка повзунка на телефоні не зникає, а наприкінці стає «гортай
   картки →» і кличе рухом. */
@media (max-width: 819px) {
  .st-pidkazka.zrobleno { opacity: .8; }
  .st-pidkazka.hortai { color: var(--acid); opacity: 1; animation: kyvok 1.4s ease-in-out infinite; }
}
@keyframes kyvok { 0%, 100% { transform: none; } 50% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  .vikno { height: auto; }
  .vikno-lypke { position: relative; height: 80vh; height: 80svh; }
  .vikno-cv { clip-path: none; }
  .vikno-tekst h2, .vikno-lypke::after { opacity: 1; transform: none; }
  .vikno-pered { display: none; }
  .st-pidkazka.hortai { animation: none; }
}