/* ============================================================
   LadAi — заглавная страница
   Логотип жёстко привязан к пересечению сетки правила третей
   (нижняя-левая точка: 33.33% от левого края, 66.67% сверху).
   Размер лого масштабируется через vmin — пропорция сохраняется
   и в портретной мобилке, и в десктопном лэндскейпе.
   ============================================================ */

:root {
  /* Размер лого относительно меньшей стороны вьюпорта.
     На эталонном скрине лого занимает ~41% ширины в портретной
     мобилке — отсюда 41vmin.
     В десктопном лэндскейпе vmin = vh → лого ~41% высоты экрана,
     не становится огромным. */
  --logo-width: 41vmin;

  /* Какая точка ВНУТРИ лого совмещается с точкой сетки.
     (50%, 50%) = геометрический центр SVG. Окружность сидит
     слева от центра, текст "LadAi" уравновешивает её справа —
     именно так лого скомпонован на эталоне. */
  --logo-anchor-x: 50%;
  --logo-anchor-y: 50%;

  /* Точка пересечения сетки правила третей (нижняя-левая). */
  --grid-x: 33.3333%;
  --grid-y: 66.6667%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  /* Запрещаем масштабирование/выделение на мобиле */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ------------------------------------------------------------
   Сцена — фиксированный контейнер на весь вьюпорт.
   Используем 100dvh для корректной работы с динамической
   высотой на iOS Safari / Android Chrome.
   ------------------------------------------------------------ */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;       /* фолбэк */
  height: 100dvh;       /* динамическая высота */
  overflow: hidden;
}

/* ------------------------------------------------------------
   Фоновое видео:
   высота = высоте вьюпорта, ширина растягивается,
   object-fit: cover чтобы не было пустых полей и без искажений.
   Стартует невидимым — JS снимет opacity:0 когда первый кадр готов.
   ------------------------------------------------------------ */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #000;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 600ms ease-out;
}

/* ------------------------------------------------------------
   Логотип:
   позиционируется так, чтобы ЦЕНТР ОКРУЖНОСТЕЙ оказался ровно
   на пересечении сетки (33.33%, 66.67%).
   Стартует невидимым — появляется после видео с лёгким сдвигом.
   ------------------------------------------------------------ */
.logo {
  position: absolute;
  left: var(--grid-x);
  top: var(--grid-y);
  width: var(--logo-width);
  height: auto;
  transform: translate(
    calc(var(--logo-anchor-x) * -1),
    calc(var(--logo-anchor-y) * -1)
  );
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease-out 250ms;
}

/* ------------------------------------------------------------
   Когда первый кадр видео декодирован, JS добавляет .is-ready —
   видео и лого синхронно проявляются (лого с задержкой 250мс,
   уже поверх видимого первого кадра).
   ------------------------------------------------------------ */
.stage.is-ready .bg-video,
.stage.is-ready .logo {
  opacity: 1;
}

/* ------------------------------------------------------------
   Уважаем prefers-reduced-motion.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bg-video,
  .logo {
    transition: none;
  }
}