/* ============================================================
   Полина Эрлих – портфолио. Первый экран: жидкая форма
   (перенос механики henriheymans.com, разбор – в каталоге
   анимаций, demos/henri-intro/README.md). Дальше по скроллу –
   сцена «погружение» со звездопадом, перенесенная из старого
   сайта дословным ванильным портом.
   ============================================================ */

* { margin: 0; box-sizing: border-box; }
html { font-size: min(19px, 2.6666666667vw); scroll-behavior: smooth; }
@media (min-width: 1280px) { html { font-size: .625vw; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Фон и на КОРНЕ тоже: при оттяжке прокрутки за край Safari показывает фон
   html, а не body – в этой зоне и мелькала темная полоса снизу. */
html { background: #1f1e1f; }

body {
  background: #1f1e1f;   /* тон панели проектов из макета */
  font-family: "Inter Tight", -apple-system, "Helvetica Neue", sans-serif;
  /* длина страницы = длина пролога сцены погружения */
  min-height: 50svh;   /* пролог; светлый блок добавляет свою высоту сам */
}

/* ---------- сцена погружения (нижний слой) ---------- */
/* 400svh: закрепленная сцена высотой 100svh отлипает, когда низ контейнера
   дойдет до низа экрана, то есть на 3.0 экрана – ровно там просветление должно
   быть завершено, иначе светлый блок выезжает под недосветлевшую сцену и виден
   горизонтальный шов (уже наступали) */
/* 50svh на первый экран со звездопадом + 80svh на фазу перехода: фаза идет,
   пока панель закреплена на экране, поэтому место под нее нужно ЗДЕСЬ, а не
   внутри секции проектов – иначе под блоком остается пустой провал */
.prologue { position: relative; z-index: 1; height: 130svh; }
/* Сцена ЗАКРЕПЛЕНА на экране (fixed), а не sticky внутри пролога. Со sticky
   момент «отлипания» зависит от динамической высоты экрана (svh против
   innerHeight), и на мобильном светлый блок выезжал под еще не досветлевшую
   сцену – был виден горизонтальный шов. Теперь сцена просветляется до тона
   светлого блока и растворяется поверх него, поэтому стык не виден нигде */
.scene { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
.scene canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene canvas[data-stars] { mix-blend-mode: screen; }

/* Возврат из кейса: пока скрипт не поставил страницу в звездопад, ни первый
   экран, ни сцена не показываются – иначе первые 0.2 с мелькает главная, а
   звезды успевают показаться неразогнанными. Метку ставит inline-скрипт в head,
   снимает js/approach.js в первых кадрах перехода */
html[data-entry="projects"] .hero,
html[data-entry="projects"] .scene { visibility: hidden; }

/* ---------- первый экран ---------- */
.hero {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: #1d1d1d;
  will-change: opacity;
}
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; visibility: hidden; }


/* Слой контента смешивается с формой режимом exclusion: белый текст сам
   инвертируется над светлыми долями – прием оригинала */
.hero__ink {
  position: absolute; inset: 0; z-index: 2;
  background: #000; mix-blend-mode: exclusion;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.6rem;
}

/* строка: статичный space-between, как в оригинале (не бегущая) */
.hero__row {
  /* 36%, а не 50%: строку с формулой заказчица попросила поднять выше центра,
     но не прибивать к верху */
  position: absolute; top: 36%; left: 50%; transform: translate(-50%, -50%);
  width: 100%; padding: 0 1.2rem; margin: 0;
  display: flex; justify-content: space-between;
  overflow: hidden; pointer-events: none; user-select: none;
}
.hero__row span {
  color: #fff; font-size: 1.3rem; font-weight: 400;
  /* у оригинала было -0.02em, но на русских капслоках буквы слипались –
     разряжаем и раздвигаем пробел между словами */
  letter-spacing: 0.045em; word-spacing: 0.22em;
  white-space: nowrap; transform: translateY(2rem); will-change: transform;
}

/* формула под строкой */
.hero__equation {
  position: absolute; top: calc(36% + 3.4rem); left: 50%; transform: translate(-50%, 0) translateY(2.4rem);
  width: min(38vw, 520px); height: auto; opacity: 0;
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
}

.hero__enter {
  position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%);
  width: 100%; text-align: center; text-transform: uppercase;
  padding: .5rem 2rem; border-radius: 5px; overflow: hidden;
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
}
.hero__enter span {
  color: #fff; display: inline-block; font-weight: 700;
  font-size: 2.7rem; letter-spacing: -0.02em; line-height: 1.1;
  transform: translateY(3.5rem); will-change: transform;
}
.hero__enter:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@media (max-width: 900px) {
  .hero__row { padding: 0 1rem; gap: .6rem; flex-wrap: wrap; justify-content: center; }
  .hero__row span { font-size: 12px; }
  .hero__equation { width: 74vw; top: calc(36% + 4.6rem); }
  .hero__enter span { font-size: 22px; }
  }


/* ---------- третий блок: просто темное поле в тон первому экрану ---------- */
/* Блок лежит ПОД сценой и без своего фона – виден фон страницы того же тона.
   Раньше он был выше сцены и выезжал поверх нее: верхний край блока читался
   как резкая горизонтальная граница. Теперь переход делает только плавное
   растворение сцены, границы нет вообще */
.dark-block { position: relative; z-index: 0; height: 100svh; }


/* ============================================================
   СТРАХОВКА ПЕРВОГО ЭКРАНА: чтобы он не остался черным.

   Слой .hero__ink – черная подложка со смешиванием exclusion: именно она
   «вырезает» из сцены текст. Но если сцены нет или смешивание не применилось,
   подложка просто закрывает экран целиком – человек видит черноту без текста и
   кнопки. Ровно это поймала клиент на своей машине, притом что сайт исправно
   отдавался: признак data-no-webgl скрипт ставил, а в стилях его никто не читал.

   Два случая, оба лечим одинаково – снимаем подложку и смешивание, текст
   остается светлым на темном:
   1) WebGL недоступен (выключено ускорение, старый движок) – js/liquid.js ставит
      на корень data-no-webgl;
   2) браузер не поддерживает mix-blend-mode – ловим через @supports.
   ============================================================ */
:root[data-no-webgl] .hero__ink {
  background: transparent;
  mix-blend-mode: normal;
}
:root[data-no-webgl] .hero__row span,
:root[data-no-webgl] .hero__enter span { color: #f5f5f5; }

@supports not (mix-blend-mode: exclusion) {
  .hero__ink { background: transparent; mix-blend-mode: normal; }
  .hero__row span, .hero__enter span { color: #f5f5f5; }
}