/* MNU: Kazakhstan–Malaysia Universities Forum 2026.
   Кадр 1920×1080, всё верстается в пикселях кадра; движок масштабирует кадр под экран. */

@font-face { font-family: "Onest"; src: url("../fonts/onest-latin.woff2") format("woff2"); font-weight: 100 900; font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-cyrillic-ext.woff2") format("woff2"); font-weight: 100 900; font-display: block;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }

:root {
  --bg: #0a0a0d;
  --bg-2: #14151b;
  --ink: #f5f2ec;          /* тёплый белый */
  --ink-2: #c9c6c0;
  --muted: #8e8d94;
  --line: rgba(245, 242, 236, 0.14);
  --panel: rgba(245, 242, 236, 0.045);
  --red: #c32d1c;          /* фирменный красный MNU */
  --red-hi: #e5432f;       /* он же, приподнятый для тёмного фона */
  --law: #4d63ff;          /* школа права: синий бренда #00098A, осветлён */
  --ise: #e5432f;          /* школа экономики: красный бренда */
  --sla: #c2415e;          /* школа гуманитарных наук: кирпичный бренда, сдвинут к вишнёвому */
  --jour: #f0763f;         /* школа журналистики: оранжевый бренда */
  --biz: #b9bec8;          /* бизнес-школа: графит бренда, на тёмном серебро */
  --gold: #e8b64c;
  --font: "Onest", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; }
body { cursor: default; user-select: none; }
body.hide-cursor { cursor: none; }

/* фон: глубокий графит с мягким тёплым светом в центре */
#backdrop { position: fixed; inset: 0; background:
  radial-gradient(1200px 800px at 50% 42%, rgba(195, 45, 28, 0.10), transparent 70%),
  radial-gradient(1600px 1000px at 50% 50%, var(--bg-2), var(--bg) 75%); }
#bg { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* кадр */
#stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; }
.scene { position: absolute; inset: 0; visibility: hidden; opacity: 0; will-change: transform, opacity; transform-origin: 50% 50%; }
.scene.is-active { visibility: visible; }
.scene > .pad { position: absolute; inset: 96px 150px 96px 120px; }

/* типографика */
.h1 { font-size: 104px; line-height: 1.0; font-weight: 700; letter-spacing: -0.025em; }
/* заголовки сцен не переносятся сами (двухстрочные разбиты через <br>): иначе при чуть более широкой отрисовке шрифта
   заголовок с малым запасом уходил на вторую строку и наезжал на текст ниже (29.09.2026) */
.h2 { font-size: 76px; line-height: 1.04; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.h3 { font-size: 44px; line-height: 1.12; font-weight: 650; letter-spacing: -0.01em; }
.lead { font-size: 34px; line-height: 1.3; font-weight: 400; color: var(--ink-2); }
.small { font-size: 24px; line-height: 1.35; color: var(--muted); }
.num { font-variant-numeric: tabular-nums; font-weight: 750; letter-spacing: -0.03em; }
.red { color: var(--red-hi); }
.chip { display: inline-flex; align-items: center; height: 56px; padding: 0 26px; border-radius: 28px; border: 1.5px solid var(--line);
  font-size: 26px; font-weight: 500; color: var(--ink); background: var(--panel); white-space: nowrap; }
.card { border-radius: 28px; border: 1.5px solid var(--line); background: var(--panel); }

/* навигация: тонкая вертикальная линия со сценами справа */
#rail { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 26px;
  padding: 10px 0; z-index: 10; }
#rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); transform: translateX(-50%); }
#rail button { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 0; background: #3a3a42; cursor: pointer;
  transition: background 0.5s, transform 0.5s; }
#rail button.on { background: var(--red-hi); transform: scale(1.35); }
#rail button span { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 18px;
  color: var(--muted); opacity: 0; transition: opacity 0.3s; pointer-events: none; font-family: var(--font); }
#rail:hover button span { opacity: 1; }
body.no-hud #rail, body.no-hud #timer { display: none; }

/* чёрный экран (B) и таймер спикера (T) */
#blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s; z-index: 50; }
body.black #blackout { opacity: 1; }
#timer { position: fixed; left: 24px; bottom: 18px; font: 600 20px/1 var(--font); color: var(--muted); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums; display: none; z-index: 40; }
body.show-timer #timer { display: block; }
#timer.late { color: var(--red-hi); }