/* Общий стиль роликов лендинга: те же цвета и шрифты, что у сайта. */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-cyrillic-wght-normal.woff2?v=12d8ec6bad") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-latin-wght-normal.woff2?v=12d8ec6bad") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-cyrillic-wght-normal.woff2?v=12d8ec6bad") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-wght-normal.woff2?v=12d8ec6bad") format("woff2");
  font-weight: 100 900;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-500-normal.woff2?v=12d8ec6bad") format("woff2");
  font-weight: 500;
}

:root {
  color-scheme: dark;
  --bg: #0b0b0b;
  --panel: #131313;
  --panel-2: #1b1b1b;
  --panel-3: #242424;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f5f5f5;
  --muted: #9b9b9b;
  --dim: #6b6b6b;
  --accent: #e2552d;
  --accent-soft: #ffb38f;
  --ok: #35c77b;
  --tg: #2aabee;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --ui: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html,
body {
  margin: 0;
  width: 1080px;
  height: 1080px;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

#root {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

/* на сайте (player.js) сцена лежит прямо на странице, без своего фона */
html.live,
html.live body,
html.live #root {
  background: transparent;
}

.icon {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Метка раздела в углу кадра: «01 · ИДЕИ» */
.kicker {
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.kicker b {
  color: var(--accent);
  font-weight: 500;
}

/* Курсор-«актёр» */
.cursor {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  z-index: 50;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.ripple {
  position: absolute;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  z-index: 49;
}

/* Обложка рилса: вместо чужих видео — типографские обложки на «плёнке» */
.thumb {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #222;
}
/* настоящее фото внутри обложки */
.thumb > img.photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.thumb .shade-top,
.thumb .shade-bottom {
  position: absolute;
  inset-inline: 0;
  z-index: 2;
}
.thumb .shade-top {
  top: 0;
  height: 30%;
  background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
}
.thumb .shade-bottom {
  bottom: 0;
  height: 38%;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.82));
}
.thumb .hook {
  position: absolute;
  z-index: 3;
  inset-inline: 22px;
  top: 34%;
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.thumb .hook em {
  font-style: normal;
  background: #fff;
  color: #111;
  padding: 0 8px;
  border-radius: 6px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Фоны обложек: расфокус кафе/студии/улицы — без чужих лиц и кадров */
.cover-warm {
  background: radial-gradient(circle at 78% 16%, rgba(255, 214, 160, 0.6) 0, transparent 38px), radial-gradient(circle at 62% 28%, rgba(255, 176, 96, 0.45) 0, transparent 30px),
    radial-gradient(circle at 16% 58%, rgba(255, 222, 186, 0.32) 0, transparent 54px), radial-gradient(circle at 86% 74%, rgba(255, 150, 80, 0.32) 0, transparent 62px),
    radial-gradient(70% 45% at 35% 30%, rgba(196, 140, 92, 0.55), transparent 70%), linear-gradient(170deg, #4a3527, #120b07);
}
.cover-green {
  background: radial-gradient(circle at 22% 14%, rgba(214, 255, 226, 0.45) 0, transparent 34px), radial-gradient(circle at 74% 34%, rgba(160, 220, 180, 0.35) 0, transparent 46px),
    radial-gradient(circle at 30% 76%, rgba(255, 236, 190, 0.3) 0, transparent 40px), radial-gradient(circle at 84% 62%, rgba(120, 190, 150, 0.3) 0, transparent 30px),
    radial-gradient(70% 45% at 70% 25%, rgba(93, 122, 102, 0.6), transparent 70%), linear-gradient(170deg, #2a3a30, #0b110d);
}
.cover-red {
  background: radial-gradient(circle at 70% 12%, rgba(255, 200, 150, 0.6) 0, transparent 36px), radial-gradient(circle at 20% 30%, rgba(255, 120, 70, 0.45) 0, transparent 44px),
    radial-gradient(circle at 82% 56%, rgba(255, 170, 110, 0.35) 0, transparent 52px), radial-gradient(circle at 26% 80%, rgba(255, 210, 160, 0.28) 0, transparent 36px),
    radial-gradient(70% 45% at 40% 28%, rgba(180, 85, 47, 0.7), transparent 70%), linear-gradient(170deg, #5c2414, #170704);
}
.cover-blue {
  background: radial-gradient(circle at 24% 18%, rgba(190, 220, 255, 0.55) 0, transparent 36px), radial-gradient(circle at 80% 26%, rgba(120, 170, 255, 0.4) 0, transparent 48px),
    radial-gradient(circle at 70% 78%, rgba(200, 230, 255, 0.3) 0, transparent 42px), radial-gradient(circle at 14% 66%, rgba(90, 140, 230, 0.32) 0, transparent 30px),
    radial-gradient(70% 45% at 55% 30%, rgba(60, 96, 160, 0.65), transparent 70%), linear-gradient(170deg, #1d2a44, #070b14);
}
.cover-violet {
  background: radial-gradient(circle at 76% 20%, rgba(240, 200, 255, 0.55) 0, transparent 34px), radial-gradient(circle at 28% 34%, rgba(200, 140, 255, 0.4) 0, transparent 50px),
    radial-gradient(circle at 18% 78%, rgba(255, 190, 230, 0.3) 0, transparent 40px), radial-gradient(circle at 84% 66%, rgba(170, 120, 255, 0.32) 0, transparent 36px),
    radial-gradient(70% 45% at 45% 28%, rgba(112, 70, 160, 0.65), transparent 70%), linear-gradient(170deg, #2e1f44, #0c0714);
}
.cover-mono {
  background: radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.4) 0, transparent 36px), radial-gradient(circle at 22% 40%, rgba(255, 255, 255, 0.22) 0, transparent 52px),
    radial-gradient(circle at 80% 72%, rgba(255, 255, 255, 0.18) 0, transparent 44px), radial-gradient(70% 45% at 50% 30%, rgba(120, 120, 120, 0.5), transparent 70%),
    linear-gradient(170deg, #333, #0a0a0a);
}

/* Плашки с цифрами на обложке */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}
.pill.hot {
  background: var(--accent);
}

/* мобильные сцены: холст 720×900 (4:5) */
html.m,
html.m body {
  width: 720px;
  height: 900px;
}