/*
 * Стартовый экран стенда ВЭБ.РФ, МФМ-2026. Общий для всех интерактивов.
 *
 * Один вид на все панели: ролик стенда во весь кадр, поверх титульная карточка —
 * логотипы вышестоящих партнёров, знак продукта, название и кнопка. Раскладку
 * выбрал владелец 08.09.2026 из четырёх вариантов, первым её получил Эдюсон.
 *
 * Почему карточка, а не открытая вёрстка поверх кадра. Ролик фирменный, со своей
 * графикой: оранжевые плашки «DATA SCIENCE» и «КОД ПРОСВЕЩЕНИЯ», уголки, метки
 * «2026». Гасить весь кадр ради читаемости жалко. Карточка затемняет только то,
 * что под ней, остальной кадр идёт в полную силу.
 *
 * ВСЕ размеры внутри считаются от собственного кегля заставки, а не от кегля
 * страницы продукта. Причина: у продуктов он разный — у Эдюсона 20 px (своё
 * масштабирование кадра), у остальных 16 px по умолчанию, и одна и та же
 * вёрстка выходила на 20 % мельче. А на узком экране (владелец смотрит сборки
 * с телефона) карточка вообще не помещалась: она не масштабировалась.
 *
 * Формула та же, что у Эдюсона: min(1.0417vw, 1.8519vh) — это 1/96 ширины или
 * 1/54 высоты, что меньше. Кадр 1920 × 1080 даёт 20 px, любой другой размер
 * экрана пропорционально ужимается.
 *
 * Цвет кнопки задаётся продуктом через --intro-accent, цвет надписи на ней —
 * через --intro-accent-ink. Оба обязаны пройти проверку контраста: см.
 * tools/check_intro.mjs, порог 4,5. Это не формальность — панель смотрят с двух
 * метров, и на живом ролике запас нужен больше, чем на бумаге.
 */

.stand-intro {
  position: fixed; inset: 0; z-index: 9000;
  /* собственный масштаб: см. пояснение выше */
  font-size: min(1.0417vw, 1.8519vh);
  display: grid; place-content: center; justify-items: center;
  background: #04080c;
  font-family: var(--intro-font, system-ui, sans-serif);
  /* Сама заставка курсор прячет: панель без мыши, стрелка на ней смотрится мусором. */
  cursor: none;
  -webkit-user-select: none; user-select: none;
}
.stand-intro[hidden] { display: none; }

.stand-intro__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; z-index: 1;
}

.stand-intro__card {
  position: relative; z-index: 3;
  display: grid; justify-items: center; text-align: center; gap: 1.5em;
  padding: 4.2em 6.5em;
  border-radius: 2.4em;
  background: rgba(4, 12, 16, .72);
  border: .1em solid rgba(255, 255, 255, .10);
  box-shadow: 0 2em 6em rgba(0, 0, 0, .45);
  /* последняя защита от вылета: на нестандартном кадре карточка ужмётся,
     а не уедет за край */
  max-width: 92vw; box-sizing: border-box;
}

/* Логотипы партнёров. Оба белые, под тёмный фон, поэтому кладутся как есть.
   Высоты разные: у знаков разная доля выносных элементов, при равной высоте
   Просвещение выглядит крупнее ВЭБ.РФ. */
.stand-intro__partners { display: flex; align-items: center; gap: 4em; flex-wrap: wrap; justify-content: center; }
.stand-intro__partner { display: block; }
.stand-intro__partner--veb { height: 2.2em; }
.stand-intro__partner--pro { height: 1.9em; }
.stand-intro__partner--sk { height: 1.6em; }
.stand-intro__partner--msp { height: 2.4em; }

/*
 * Высоты для английских файлов — другие, и это не вкус. У EN-версий вокруг
 * знака пустые поля: чернила занимают 69 % высоты файла у ВЭБ и лишь 46 %
 * у Сколтеха (замер по пикселям). При равной CSS-высоте Сколтех-EN выглядел
 * вдвое меньше русского. Высоты ниже выравнивают ВИДИМЫЙ размер знака:
 * css-высота = русская высота ÷ доля чернил в файле.
 */
.stand-intro--en .stand-intro__partner--veb { height: 3.2em; }
.stand-intro--en .stand-intro__partner--pro { height: 2.0em; }
.stand-intro--en .stand-intro__partner--sk { height: 3.5em; }
.stand-intro--en .stand-intro__partner--msp { height: 2.05em; }

.stand-intro__rule { width: 100%; height: .05em; background: rgba(255, 255, 255, .16); }

/* Знак продукта. Картинкой, а не маской: у продуктов знаки цветные и разной
   природы (svg, png), единый способ важнее единого приёма. */
.stand-intro__logos { display: flex; align-items: center; gap: 2.6em; margin-top: .4em; }
.stand-intro__logo { display: block; max-height: 3.6em; max-width: 26em; }

/*
 * Рамка заголовка — отдельным блоком и в em ЗАСТАВКИ, а не заголовка.
 *
 * Первая версия задавала max-width на самом заголовке в его же em — и при
 * ужимании кегля рамка ужималась вместе с текстом: слово «ПРЕДПРИНИМАТЕЛЯ»
 * не влезало ни на одном размере, fitTitle честно перебирал все ступени и
 * сдавался. Рамка в единицах заставки стоит на месте, а текст внутри неё
 * действительно становится меньше.
 *
 * 45em заставки — ширина заголовка на базовом кегле, при которой карточка
 * остаётся компактной и ролик виден по краям кадра.
 */
.stand-intro__titlebox { max-width: 45em; }

.stand-intro__title {
  margin: 0;
  font-weight: 900; font-size: var(--intro-title-size, 4.8em); line-height: .98;
  letter-spacing: -.005em; text-transform: uppercase; color: #fff;
  /* Слово не рвём: «ПРЕДПРИНИМА / ТЕЛЯ» читается как ошибка вёрстки.
     Вместо разрыва уменьшается кегль — fitTitle в stand-intro.js. */
  overflow-wrap: normal; hyphens: none;
}

.stand-intro__langs { display: flex; gap: .8em; margin-top: .4em; }
.stand-intro__lang {
  font: inherit; font-weight: 700; font-size: 1.3em;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  background: transparent;
  border: .08em solid rgba(255, 255, 255, .28);
  border-radius: 99em;
  padding: .45em 1.15em;
  cursor: pointer;
}
.stand-intro__lang.is-active {
  color: #0b0f16; background: #fff; border-color: #fff;
}

.stand-intro__cta {
  font: inherit; font-weight: 700; font-size: 2em;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--intro-accent-ink, #1E1E20);
  background: var(--intro-accent, #E7651F);
  border: 0; border-radius: 99em;
  /* Отступы вдвое меньше, чем кажется: em внутри кнопки считается от её
     собственного кегля (2em), а не от кегля заставки. */
  padding: .9em 2.2em;
  margin-top: .5em;
  cursor: pointer;
  transition: transform .24s cubic-bezier(.23, 1, .32, 1);
}
/*
 * На нажатии цвет не меняется, только сжатие. Тёмный оттенок акцента почти
 * всегда уводит контраст с надписью ниже порога, а держать по два выверенных
 * цвета на каждый продукт — лишняя работа с тем же результатом.
 */
.stand-intro__cta:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .stand-intro__langs { display: flex; gap: .8em; margin-top: .4em; }
.stand-intro__lang {
  font: inherit; font-weight: 700; font-size: 1.3em;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  background: transparent;
  border: .08em solid rgba(255, 255, 255, .28);
  border-radius: 99em;
  padding: .45em 1.15em;
  cursor: pointer;
}
.stand-intro__lang.is-active {
  color: #0b0f16; background: #fff; border-color: #fff;
}

.stand-intro__cta { transition: none; }
}


/* Кнопка «к началу» на игровых экранах (config.homeButton). Правый нижний
   угол — как у карты и рамок, привычка гостя одна на весь стенд. Размеры в
   vmin, а не em заставки: кнопка живёт вне её масштаба. */
.stand-intro-home {
  position: fixed; right: 1.6vmin; bottom: 2vmin; z-index: 8500;
  width: 5.6vmin; height: 5.6vmin;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: rgba(10, 14, 22, .6); color: #eef2f8;
  font-size: 2.6vmin; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stand-intro-home:active { transform: scale(.93); }