/* InviteNoma — первый экран, вариант C «Ganch» (выбор Alee 2026-10-21).
   Полноэкранный фон: резной ганч и тени решётки, видео 4–5 с по кругу
   (Kling 2.5, 720p; ролики и кадры — assets/media/landing). Подключается
   после site.css и ui-fixes.css.

   Сцена тёмная в обеих темах: текст поверх видео всегда светлый. Поэтому
   цвета героя заданы здесь, а не берутся из темы, — иначе в светлой теме
   тёмный текст лёг бы на тёмное видео. */

.hero-c {
  --s-ink:       #F4F1EA;
  --s-ink-soft:  #DDD7CB;
  --s-ink-mute:  #B9B3A7;
  --s-bg:        #121110;
  --s-line:      rgba(244, 241, 234, .22);
  --s-gold:      #D2AE66;
  --s-paper:     #FBF9F4;
  --s-paper-ink: #171512;

  display: flex; align-items: center;
  min-height: calc(100svh - var(--nav-h, 68px));
  padding-block: clamp(4rem, 9vh, 7rem);
  background: #121110;
  color: var(--s-ink);
  isolation: isolate;
}

.hero-c__media { position: absolute; inset: 0; z-index: -2; }
.hero-c__media picture,
.hero-c__media img,
.hero-c__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 50%;
}
.hero-c__video { opacity: 0; transition: opacity .9s ease; }
.hero-c__video.is-on { opacity: 1; }

/* затемнение под текстом: слева — где текст, снизу — где цифры */
.hero-c__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,17,16,.92) 0%, rgba(18,17,16,.80) 30%, rgba(18,17,16,.30) 56%, rgba(18,17,16,0) 74%),
    linear-gradient(0deg, rgba(18,17,16,.70) 0%, rgba(18,17,16,0) 30%);
}

.hero-c > .shell { position: relative; }
.hero-c__text { max-width: 36rem; }
.hero-c .hero-s__title { font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; }
.hero-c .lead { color: var(--s-ink-soft); }
.hero-c .hero-s__facts {
  padding-top: 1.25rem; margin-top: .25rem;
  border-top: 1px solid var(--s-line);
}
.hero-c .fact__label { color: var(--s-ink-mute); }

/* телефон и вертикальный планшет: вертикальный ролик, текст — внизу */
@media (max-aspect-ratio: 1/1) {
  .hero-c { align-items: flex-end; padding-block: 34svh 2.5rem; }
  .hero-c__media img,
  .hero-c__video { object-position: 50% 28%; }
  .hero-c__scrim {
    background: linear-gradient(0deg, rgba(18,17,16,.96) 0%, rgba(18,17,16,.88) 36%, rgba(18,17,16,.35) 62%, rgba(18,17,16,.08) 100%);
  }
  .hero-c .hero-s__title { font-size: clamp(2.25rem, 9.6vw, 3.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-c__video { display: none; }
}