/* ===== КЕЙС «В АКТИВНОМ ПОИСКЕ» (VK Клипы) =====
   Макет шириной 1440, масштабируется под ширину окна: размеры — calc(N * var(--k)).
   Обложка повторяет Тильду 1:1, дальше — новое повествование (js/case-vk.js оживляет). */

.vk-page {
  /* — настройки — */
  --vk-bg: #18161A;          /* фон страницы (как в Тильде) */
  --vk-ink: #000;            /* текст на небе */
  --vk-grad: linear-gradient(90deg, #ff6ec7, #7aa2ff, #6ef3ff); /* фирменный перелив (как у «Назад») */
  --vk-pink: #ff4fc8;        /* розовый с обложек серий */
  --vk-dim: #8d8a93;         /* второстепенный текст */

  background: var(--vk-bg);
  color: #fff;
}

.vk {
  container-type: inline-size;
  overflow-x: clip;
}
.vk > section {
  --k: calc(100cqw / 1440);
  position: relative;
}

/* — общие заголовки и тексты (размеры как в Тильде: 15/23 и 11/17) — */
.vk-h {
  margin: 0 0 calc(13 * var(--k));
  font-weight: 300;
  font-size: calc(15 * var(--k));
  line-height: calc(23 * var(--k));
}
.vk-p {
  margin: 0;
  font-weight: 300;
  font-size: calc(11 * var(--k));
  line-height: calc(17 * var(--k));
}

/* — кнопка «Назад» — */
.vk-back {
  position: fixed;
  top: 20px; left: 20px;
  z-index: 60;
  padding: 8px 18px;
  border: 1px solid transparent;
  border-image: var(--vk-grad) 1;
  background: var(--vk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.25s ease;
}
.vk-back:hover {
  background-clip: border-box;
  -webkit-background-clip: border-box;
  color: var(--vk-bg);
}

/* =====================================================================
   1. ОБЛОЖКА (1440 × 668, координаты из Тильды)
   ===================================================================== */
.vk-hero {
  height: calc(668 * var(--k));
  overflow: hidden;
  color: var(--vk-ink);
}
.vk-hero > * { position: absolute; margin: 0; }
.vk-hero [data-depth] { translate: var(--px, 0px) var(--py, 0px); will-change: translate; }

.vk-hero__sky   { left: calc(-19 * var(--k)); top: calc(-6 * var(--k));  width: calc(1503 * var(--k)); height: calc(742 * var(--k)); object-fit: cover; }
.vk-hero__cast  { left: calc(638 * var(--k)); top: calc(106 * var(--k)); width: calc(813 * var(--k)); height: calc(593 * var(--k)); object-fit: contain; }
.vk-hero__title { left: calc(25 * var(--k));  top: calc(34 * var(--k));  width: calc(715 * var(--k)); }
.vk-hero__title img { display: block; width: 100%; height: auto; }
.vk-hero__logo  { left: calc(1186 * var(--k)); top: calc(18 * var(--k)); width: calc(148 * var(--k)); z-index: 2; }
.vk-hero__logo img { display: block; width: 100%; height: auto; }

/* текст на небе: мягкая белая подложка, чтобы читался поверх домов */
.vk-hero__text {
  left: calc(104 * var(--k));
  top: calc(251 * var(--k));
  width: calc(453 * var(--k));
  z-index: 1;
}
.vk-hero__text::before {
  content: "";
  position: absolute;
  inset: calc(-40 * var(--k)) calc(-60 * var(--k));
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent);
  filter: blur(calc(10 * var(--k)));
}
.vk-hero__text .vk-p + .vk-h { margin-top: calc(17 * var(--k)); }

/* надпись «пишется» облаками: проявляется слева направо из размытия */
.vk-hero__title { animation: vk-skywrite 2.2s cubic-bezier(.3, .6, .3, 1) 0.2s both; }
@keyframes vk-skywrite {
  0%   { clip-path: inset(0 100% 0 0); filter: blur(calc(12 * var(--k))); opacity: 0.3; }
  60%  { filter: blur(calc(3 * var(--k))); opacity: 1; }
  100% { clip-path: inset(0 -10% 0 0); filter: none; opacity: 1; }
}
/* облачная надпись чуть «дышит», как настоящие облака */
.vk-hero__title img { animation: vk-breathe 7s ease-in-out 2.4s infinite; }
@keyframes vk-breathe {
  50% { transform: translateX(calc(6 * var(--k))) scale(1.01); filter: blur(0.4px); }
}

/* иконка VK Клипов: один раз выпрыгивает, как приложение; при наведении — пружинка */
.vk-hero__logo { animation: vk-app-pop 0.9s cubic-bezier(.3, 1.6, .5, 1) 1.2s both; }
.vk-hero__logo:hover img { animation: vk-jelly 0.6s ease; }
@keyframes vk-app-pop { 0% { transform: scale(0) rotate(-20deg); } 100% { transform: none; } }
@keyframes vk-jelly {
  25% { transform: scale(1.15, 0.85); }
  50% { transform: scale(0.9, 1.1); }
  75% { transform: scale(1.04, 0.96); }
}

/* низ обложки мягко растворяется в тёмный фон */
.vk-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(120 * var(--k));
  background: linear-gradient(transparent, var(--vk-bg));
  pointer-events: none;
}

/* =====================================================================
   2. ЦИФРЫ
   ===================================================================== */
.vk-stats {
  display: flex;
  justify-content: center;
  gap: calc(120 * var(--k));
  padding: calc(110 * var(--k)) 0 calc(40 * var(--k));
}
.vk-stat { display: flex; align-items: center; gap: calc(18 * var(--k)); }
.vk-stat > span {
  font-weight: 300;
  font-size: calc(12 * var(--k));
  line-height: 1.35;
  color: var(--vk-dim);
}
.vk-num {
  display: inline-flex;
  font-weight: 700;
  font-size: calc(58 * var(--k));
  line-height: 1;
  letter-spacing: -0.02em;
  color: #b9a0ff; /* запятая и тире; сами цифры — с переливом (ниже) */
}
/* барабан с цифрами (js собирает ленту 0–9) */
.vk-reel { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.vk-reel__strip { display: flex; flex-direction: column; will-change: transform; }
.vk-reel__strip > i {
  font-style: normal;
  text-align: center;
  height: 1em;
  line-height: 1;
  /* перелив у каждой цифры свой: у родителя он не работает — ленты двигаются отдельным слоем */
  background: var(--vk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =====================================================================
   3. ДЕДЛАЙН «5 ДНЕЙ»
   ===================================================================== */
.vk-deadline { padding: calc(100 * var(--k)) calc(104 * var(--k)) 0; }
.vk-deadline__head { width: calc(560 * var(--k)); }

/* — шнур дедлайна: компактная полоска, проигрывается один раз (js/case-vk.js) — */
.vk-fuse-wrap {
  /* — настройки — */
  --fuse-rope: #e9d7b8;     /* шнур */
  --fuse-burnt: #3a3438;    /* сгоревший шнур */
  --fuse-size: 0.7;         /* размер всего блока (1 — во всю ширину) */
  padding: calc(60 * var(--k)) 0 calc(80 * var(--k));
}
.vk-fuse {
  /* весь шнур со сценами в масштабе --fuse-size от ширины макета, по центру */
  --k: calc(100cqw / 1440 * var(--fuse-size));
  --t: calc(100cqw / 1440 * 0.9); /* тексты уменьшаются меньше, чтобы читались */
  position: relative;
  width: calc(1440 * var(--k));
  height: calc(300 * var(--k));
  margin: 0 auto;
}
.vk-fuse > * { position: absolute; }
.vk-fuse__svg { inset: 0; width: 100%; height: 100%; overflow: visible; }
.vk-fuse__svg path { fill: none; stroke-linecap: round; }
.vk-fuse__rope { stroke: var(--fuse-rope); stroke-width: 4; stroke-dasharray: 2 6; }
.vk-fuse__burnt { stroke: var(--fuse-burnt); stroke-width: 4; }

/* отметки дней */
.vk-fuse__day {
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  translate: -50% calc(22 * var(--k));
  font-weight: 300;
  font-size: calc(8 * var(--t));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vk-dim);
  white-space: nowrap;
}
.vk-fuse__day::before {
  content: "";
  position: absolute;
  left: 50%; top: calc(-20 * var(--k));
  width: 2px; height: calc(12 * var(--k));
  background: rgba(255, 255, 255, 0.25);
}

/* искра: светящаяся точка, вокруг летят искорки */
.vk-spark {
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  width: calc(16 * var(--k));
  height: calc(16 * var(--k));
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(#fff, #ffd84a 40%, #ff6a2a 70%, transparent 72%);
  box-shadow: 0 0 calc(20 * var(--k)) calc(6 * var(--k)) rgba(255, 140, 40, 0.6);
  animation: vk-flicker 0.12s steps(2) infinite;
  z-index: 3;
  transition: opacity 0.6s;
}
.vk-fuse.is-done .vk-spark { opacity: 0; }
@keyframes vk-flicker { 50% { scale: 1.25; } }
.vk-spark i { position: absolute; left: 50%; top: 50%; }
.vk-spark .vk-ember {
  position: absolute;
  width: calc(4 * var(--k)); height: calc(4 * var(--k));
  border-radius: 50%;
  background: #ffcf4a;
}
/* счётчик серий над искрой */
.vk-counter {
  left: calc(var(--x) * var(--k));
  top: calc(var(--y) * var(--k));
  translate: -50% calc(-40 * var(--k));
  padding: calc(4 * var(--k)) calc(10 * var(--k));
  border-radius: calc(20 * var(--k));
  background: #fff;
  color: var(--vk-bg);
  font-weight: 500;
  font-size: calc(10 * var(--t));
  white-space: nowrap;
  z-index: 4;
  transition: background 0.3s, color 0.3s;
}
.vk-counter b { font-weight: 700; font-size: calc(13 * var(--t)); font-variant-numeric: tabular-nums; }
.vk-counter.is-drop { background: #ff3b5c; color: #fff; animation: vk-shake 0.4s; }
.vk-counter.is-done { background: #6ef3a0; }

/* — сцены — */
.vk-scene {
  left: calc((var(--x) + var(--dx, 0)) * var(--k));
  top: calc((var(--y) + var(--dy, 0)) * var(--k));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--k));
  z-index: 2;
}
.vk-scene[data-side="up"] { translate: 0 -100%; }
.vk-scene__icon {
  width: calc(var(--s, 110) * var(--k) * 0.7);
  height: auto;
  flex: none;
  opacity: 0;
  scale: 0;
  filter: drop-shadow(0 calc(8 * var(--k)) calc(14 * var(--k)) rgba(0, 0, 0, 0.45));
}
.vk-scene.is-on .vk-scene__icon { opacity: 1; animation: vk-pop 0.5s cubic-bezier(.3, 1.7, .5, 1) both; }
/* живая сцена (пока бежит искра или под мышкой): подёргивания и пыхтение */
.vk-scene.is-live .vk-scene__icon { animation: vk-pop 0.5s cubic-bezier(.3, 1.7, .5, 1) both, var(--idle, none); }
.vk-scene.is-on { cursor: default; }
@keyframes vk-pop { 0% { scale: 0; rotate: -15deg; } 100% { scale: 1; rotate: 0deg; } }

/* сообщения: белое облачко, текст набирается (js) */
.vk-msg {
  position: relative;
  max-width: calc(185 * var(--t));
  min-height: calc(24 * var(--t));
  margin: 0;
  padding: calc(6 * var(--t)) calc(10 * var(--t));
  border-radius: calc(16 * var(--k)) calc(16 * var(--k)) calc(16 * var(--k)) calc(4 * var(--k));
  background: #fff;
  color: #111;
  font-weight: 500;
  font-size: calc(10 * var(--t));
  line-height: 1.35;
  opacity: 0;
  translate: calc(-10 * var(--k)) 0;
  transition: opacity 0.25s, translate 0.35s cubic-bezier(.3, 1.6, .5, 1);
}
.vk-scene.is-on .vk-msg { opacity: 1; translate: 0 0; transition-delay: 0.25s; }
.vk-msg--call { border-radius: calc(18 * var(--k)); background: #ffe14a; }
.vk-msg--boss { background: #7aa2ff; color: #fff; }
.vk-msg strong { color: #ff2f6d; }
.vk-msg--boss strong { color: #fff; text-decoration: underline wavy #ff2f6d; }
/* три прыгающие точки «печатает…» */
.vk-msg .vk-dots { display: inline-flex; gap: calc(3 * var(--k)); }
.vk-msg .vk-dots i { width: calc(5 * var(--k)); height: calc(5 * var(--k)); border-radius: 50%; background: currentColor; opacity: 0.5; animation: vk-dot 0.9s infinite; }
.vk-msg .vk-dots i:nth-child(2) { animation-delay: 0.15s; }
.vk-msg .vk-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes vk-dot { 30% { translate: 0 calc(-4 * var(--k)); opacity: 1; } }

/* 1. телефон горит — вибрирует */
.vk-scene--phone { --s: 96; }
.vk-scene--phone .vk-scene__icon { --idle: vk-buzz 0.18s linear 0.5s infinite; }
@keyframes vk-buzz { 25% { translate: calc(-2 * var(--k)) 0; rotate: -3deg; } 75% { translate: calc(2 * var(--k)) 0; rotate: 3deg; } }
/* 2. трубка трезвонит — подпрыгивает очередями */
.vk-scene--call { --s: 96; }
.vk-scene--call .vk-scene__icon { --idle: vk-ring 1.1s ease-in-out 0.5s infinite; }
@keyframes vk-ring {
  0%, 40%, 100% { rotate: 0deg; translate: 0 0; }
  5%, 15%, 25% { rotate: -14deg; translate: 0 calc(-6 * var(--k)); }
  10%, 20%, 30% { rotate: 14deg; translate: 0 calc(-6 * var(--k)); }
}
/* 3. машинка скачет, мозг пузырится */
.vk-scene--write .vk-scene__type { --s: 140; --idle: vk-type 0.16s steps(2) 0.5s infinite; }
.vk-scene--write .vk-scene__brain { --s: 92; --idle: vk-wobble 0.9s ease-in-out 0.5s infinite; margin-top: calc(-36 * var(--k)); }
@keyframes vk-type { 50% { translate: 0 calc(-5 * var(--k)); rotate: 1.5deg; } }
@keyframes vk-wobble { 50% { scale: 1.06 0.95; } }
/* листы вылетают из машинки */
.vk-sheets { left: calc(40 * var(--k)); top: calc(-10 * var(--k)); }
.vk-sheets i {
  position: absolute;
  width: calc(26 * var(--k)); height: calc(34 * var(--k));
  border-radius: calc(2 * var(--k));
  background: repeating-linear-gradient(#fff 0 calc(5 * var(--k)), #ddd calc(5 * var(--k)) calc(6 * var(--k)));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
}
.vk-scene.is-live .vk-sheets i { animation: vk-sheet 1.4s cubic-bezier(.2, .6, .4, 1) infinite; }
.vk-sheets i:nth-child(2) { animation-delay: 0.45s !important; --sx: -1; }
.vk-sheets i:nth-child(3) { animation-delay: 0.9s !important; --sx: 0.5; }
@keyframes vk-sheet {
  0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.6); }
  100% { opacity: 0; transform: translate(calc(var(--sx, 1) * 60 * var(--k)), calc(-110 * var(--k))) rotate(calc(var(--sx, 1) * 200deg)) scale(1); }
}
/* пузыри из мозга */
.vk-bubbles { right: calc(40 * var(--k)); top: calc(-40 * var(--k)); }
.vk-bubbles i {
  position: absolute;
  width: calc(12 * var(--k)); height: calc(12 * var(--k));
  border: 2px solid #ff8fd8;
  border-radius: 50%;
  opacity: 0;
}
.vk-scene.is-live .vk-bubbles i { animation: vk-bubble 1.6s ease-out infinite; }
.vk-bubbles i:nth-child(2) { animation-delay: 0.3s !important; left: calc(14 * var(--k)); scale: 0.7; }
.vk-bubbles i:nth-child(3) { animation-delay: 0.6s !important; left: calc(-12 * var(--k)); scale: 1.3; }
.vk-bubbles i:nth-child(4) { animation-delay: 0.9s !important; left: calc(24 * var(--k)); }
.vk-bubbles i:nth-child(5) { animation-delay: 1.2s !important; left: calc(-4 * var(--k)); scale: 0.6; }
@keyframes vk-bubble {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(8 * var(--k)), calc(-70 * var(--k))) scale(1.4); }
}
/* 4. менеджер покачивается с улыбкой, смайлик орёт */
.vk-scene--boss .vk-scene__ava { --s: 92; --idle: vk-nod 1.4s ease-in-out 0.5s infinite; }
.vk-scene--boss .vk-scene__scream { --s: 70; position: absolute; right: calc(-34 * var(--k)); top: calc(-34 * var(--k)); }
.vk-scene--boss.is-on .vk-scene__scream { animation: vk-pop 0.5s cubic-bezier(.3, 1.7, .5, 1) 1.4s both; }
.vk-scene--boss.is-live .vk-scene__scream { animation: vk-pop 0.5s cubic-bezier(.3, 1.7, .5, 1) 1.4s both, vk-scream 0.12s linear 1.9s infinite; }
@keyframes vk-nod { 50% { rotate: 6deg; translate: 0 calc(-3 * var(--k)); } }
@keyframes vk-scream { 25% { translate: calc(-3 * var(--k)) calc(1 * var(--k)); } 75% { translate: calc(3 * var(--k)) calc(-1 * var(--k)); } }
/* 5. переделываем: машинка строчит ещё злее, мозг перегрелся — пар и пот */
.vk-scene--hot .vk-scene__type { --s: 140; --idle: vk-type 0.12s steps(2) 0.5s infinite; }
.vk-scene--hot .vk-scene__brain { --s: 112; --idle: vk-boil 0.5s ease-in-out 0.5s infinite; margin-top: calc(-36 * var(--k)); }
@keyframes vk-boil { 50% { scale: 1.05 0.94; translate: 0 calc(2 * var(--k)); } }
/* пар: на 50% больше и гуще, чем был */
.vk-steam { right: calc(40 * var(--k)); top: calc(-30 * var(--k)); }
.vk-steam i {
  position: absolute;
  width: calc(54 * var(--k)); height: calc(54 * var(--k));
  border-radius: 50%;
  background: radial-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.35) 45%, transparent 70%);
  opacity: 0;
}
.vk-scene.is-live .vk-steam i { animation: vk-puff 1.8s ease-out infinite; }
.vk-steam i:nth-child(2) { left: calc(30 * var(--k)); animation-delay: 0.3s !important; }
.vk-steam i:nth-child(3) { left: calc(-20 * var(--k)); animation-delay: 0.6s !important; }
.vk-steam i:nth-child(4) { left: calc(15 * var(--k)); animation-delay: 0.9s !important; }
.vk-steam i:nth-child(5) { left: calc(45 * var(--k)); animation-delay: 1.2s !important; }
.vk-steam i:nth-child(6) { left: calc(-5 * var(--k)); animation-delay: 1.5s !important; }
@keyframes vk-puff {
  0% { opacity: 0; transform: translateY(0) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(-135 * var(--k))) scale(2.4); }
}
.vk-sweat { right: calc(60 * var(--k)); top: calc(20 * var(--k)); }
.vk-sweat i {
  position: absolute;
  width: calc(8 * var(--k)); height: calc(11 * var(--k));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #8fd8ff;
  opacity: 0;
}
.vk-scene.is-live .vk-sweat i { animation: vk-drip 1s ease-in infinite; }
.vk-sweat i:nth-child(2) { left: calc(70 * var(--k)); animation-delay: 0.35s !important; }
.vk-sweat i:nth-child(3) { left: calc(40 * var(--k)); top: calc(20 * var(--k)); animation-delay: 0.7s !important; }
@keyframes vk-drip { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(calc(var(--d, 1) * 14 * var(--k)), calc(50 * var(--k))); } }
/* 6. штамп бахает, отпечаток «Согласовано!», конфетти */
.vk-scene--ok { --s: 96; flex-direction: column; gap: calc(4 * var(--k)); }
.vk-scene--ok.is-on .vk-scene__stamp { animation: vk-slam 0.7s cubic-bezier(.6, 0, .9, .4) both; }
.vk-scene--ok.is-live:hover .vk-scene__stamp { animation: vk-slam2 0.6s cubic-bezier(.6, 0, .9, .4); }
@keyframes vk-slam2 { 40% { translate: 0 calc(-30 * var(--k)); rotate: -8deg; } 70% { scale: 1.1 0.85; translate: 0 calc(4 * var(--k)); } }
@keyframes vk-slam {
  0% { opacity: 0; scale: 1.6; translate: 0 calc(-80 * var(--k)); }
  60% { opacity: 1; scale: 1; translate: 0 calc(20 * var(--k)); }
  75% { scale: 1.1 0.85; translate: 0 calc(26 * var(--k)); }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
.vk-approved {
  padding: calc(6 * var(--k)) calc(12 * var(--k));
  border: calc(3 * var(--k)) solid #ff2f6d;
  border-radius: calc(6 * var(--k));
  color: #ff2f6d;
  font-weight: 700;
  font-size: calc(11 * var(--t));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  rotate: -10deg;
  opacity: 0;
  scale: 2;
  mix-blend-mode: screen;
}
.vk-scene--ok.is-on .vk-approved { animation: vk-imprint 0.3s cubic-bezier(.5, 0, .7, 1.6) 0.45s both; }
@keyframes vk-imprint { from { opacity: 0; scale: 2; } to { opacity: 1; scale: 1; } }
.vk-confetti { left: 50%; top: 50%; }
.vk-confetti i { position: absolute; width: calc(7 * var(--k)); height: calc(11 * var(--k)); border-radius: 2px; }

/* общая тряска — счётчик при «ПЕРЕДЕЛАТЬ!» и сцена при штампе */
@keyframes vk-shake {
  20% { translate: calc(-50% - 6 * var(--k)) calc(-40 * var(--k)); }
  40% { translate: calc(-50% + 6 * var(--k)) calc(-40 * var(--k)); }
  60% { translate: calc(-50% - 4 * var(--k)) calc(-40 * var(--k)); }
  80% { translate: calc(-50% + 4 * var(--k)) calc(-40 * var(--k)); }
}
.vk-fuse.is-slam { animation: vk-quake 0.35s ease-out; }
@keyframes vk-quake { 25% { transform: translate(calc(-5 * var(--k)), calc(4 * var(--k))); } 50% { transform: translate(calc(4 * var(--k)), calc(-3 * var(--k))); } 75% { transform: translate(calc(-2 * var(--k)), calc(2 * var(--k))); } }

/* сердечки и полоски-каракули по краям, как на обложках серий */
.vk-doodles { inset: 0; pointer-events: none; }
.vk-doodles svg { position: absolute; width: calc(26 * var(--k)); height: auto; overflow: visible; animation: vk-blink 2.4s ease-in-out infinite; }
.vk-doodles path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes vk-blink { 50% { scale: 1.2; rotate: 8deg; } }

/* =====================================================================
   4. СЮЖЕТ И СЕРИИ
   ===================================================================== */
.vk-watch {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(120 * var(--k));
  padding: calc(80 * var(--k)) calc(104 * var(--k)) calc(60 * var(--k));
}
.vk-watch__side { width: calc(640 * var(--k)); padding-top: calc(40 * var(--k)); }
.vk-watch__side .vk-p { width: calc(560 * var(--k)); }
.vk-hint {
  margin: calc(36 * var(--k)) 0 calc(16 * var(--k));
  font-weight: 300;
  font-size: calc(10 * var(--k));
  color: var(--vk-dim);
}

/* сетка обложек */
.vk-eps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(10 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}
.vk-ep {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: calc(10 * var(--k));
  overflow: hidden;
  aspect-ratio: 252 / 450;
  background: #222;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.35s;
}
.vk-ep img, .vk-ep video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vk-ep video { opacity: 0; transition: opacity 0.3s; }
.vk-ep.is-previewing video { opacity: 1; }
.vk-ep:hover { transform: translateY(calc(-6 * var(--k))) scale(1.04); box-shadow: 0 calc(14 * var(--k)) calc(30 * var(--k)) rgba(0, 0, 0, 0.6); }
.vk-ep__num {
  position: absolute;
  left: calc(6 * var(--k)); bottom: calc(6 * var(--k));
  padding: calc(2 * var(--k)) calc(6 * var(--k));
  border-radius: calc(4 * var(--k));
  background: rgba(0, 0, 0, 0.55);
  font-size: calc(9 * var(--k));
  color: #fff;
}
/* серия, которая сейчас в телефоне */
.vk-ep.is-current { outline: 2px solid var(--vk-pink); outline-offset: calc(3 * var(--k)); }

/* телефон */
.vk-phone { flex: none; width: calc(310 * var(--k)); }
.vk-phone__screen {
  position: relative;
  aspect-ratio: 9 / 16;
  border: calc(10 * var(--k)) solid #0b0a0c;
  border-radius: calc(44 * var(--k));
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 calc(30 * var(--k)) calc(80 * var(--k)) rgba(255, 79, 200, 0.18);
  user-select: none;
}
/* лента клипов: листается вертикально */
.vk-phone__feed {
  position: absolute;
  inset: 0;
  transition: transform 0.55s cubic-bezier(.6, 0, .2, 1);
}
.vk-phone__feed video {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.vk-phone__sound {
  position: absolute;
  top: calc(14 * var(--k));
  right: calc(14 * var(--k));
  width: calc(34 * var(--k));
  height: calc(34 * var(--k));
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  font-size: calc(15 * var(--k));
  cursor: pointer;
}
/* сердечки по двойному клику */
.vk-phone__hearts { position: absolute; inset: 0; pointer-events: none; }
.vk-phone__hearts i {
  position: absolute;
  width: calc(60 * var(--k));
  height: calc(60 * var(--k));
  margin: calc(-30 * var(--k)) 0 0 calc(-30 * var(--k));
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff3b6b' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.4.7-1.1 2.1-2.4 4.3-2.4 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E");
}
.vk-phone__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(18 * var(--k));
  margin-top: calc(14 * var(--k));
  font-size: calc(11 * var(--k));
  color: var(--vk-dim);
}
.vk-phone__now { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--k)); min-width: calc(170 * var(--k)); }
.vk-phone__now b { font-weight: 500; color: #fff; }
.vk-phone__now small { font-size: calc(9 * var(--k)); color: var(--vk-pink); }
.vk-phone__nav button {
  width: calc(34 * var(--k));
  height: calc(34 * var(--k));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: calc(14 * var(--k));
  cursor: pointer;
  transition: background 0.2s;
}
.vk-phone__nav button:hover { background: rgba(255, 255, 255, 0.1); }

/* =====================================================================
   5. РЕЗУЛЬТАТ
   ===================================================================== */
.vk-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(130 * var(--k)) calc(104 * var(--k)) 0;
  text-align: center;
}
.vk-result__lead {
  margin: calc(6 * var(--k)) 0 calc(34 * var(--k));
  font-weight: 300;
  font-size: calc(22 * var(--k));
  color: var(--vk-dim);
}
.vk-result__lead b {
  display: block;
  font-weight: 700;
  font-size: calc(96 * var(--k));
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: var(--vk-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vk-result__row {
  display: flex;
  gap: calc(80 * var(--k));
  margin: 0;
  padding: 0;
  list-style: none;
}
.vk-result__row li {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: calc(10 * var(--k));
  font-weight: 300;
  font-size: calc(14 * var(--k));
  color: #fff;
}
.vk-result__row svg { grid-row: span 2; width: calc(30 * var(--k)); height: calc(30 * var(--k)); fill: var(--vk-pink); }
.vk-result__row b { font-weight: 700; font-size: calc(30 * var(--k)); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vk-result__row i { font-style: normal; }
.vk-result__row span { grid-column: 2; font-size: calc(11 * var(--k)); color: var(--vk-dim); text-align: left; }
.vk-result__row li { text-align: left; }
.vk-result__link {
  margin-top: calc(44 * var(--k));
  padding: calc(12 * var(--k)) calc(24 * var(--k));
  border-radius: calc(30 * var(--k));
  background: var(--vk-grad);
  color: var(--vk-bg);
  font-weight: 500;
  font-size: calc(13 * var(--k));
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), box-shadow 0.25s;
}
.vk-result__link:hover { transform: scale(1.05); box-shadow: 0 0 calc(30 * var(--k)) rgba(255, 110, 199, 0.45); }

/* =====================================================================
   6. ТИТРЫ
   ===================================================================== */
.vk-credits {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(40 * var(--k)) calc(160 * var(--k));
  padding: calc(140 * var(--k)) calc(104 * var(--k)) calc(140 * var(--k));
  text-align: center;
}
.vk-credits__col { width: calc(360 * var(--k)); }
.vk-credits .vk-h { margin-bottom: calc(26 * var(--k)); }
.vk-credits p {
  margin: 0 0 calc(18 * var(--k));
  font-weight: 400;
  font-size: calc(13 * var(--k));
  line-height: 1.5;
}
.vk-credits p span {
  display: block;
  margin-bottom: calc(3 * var(--k));
  font-weight: 300;
  font-size: calc(9 * var(--k));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vk-dim);
}
.vk-credits__end {
  flex-basis: 100%;
  margin-top: calc(30 * var(--k));
  font-size: calc(12 * var(--k));
  color: var(--vk-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.vk-credits__end:hover { color: #fff; }

/* =====================================================================
   ПОЯВЛЕНИЕ (js добавляет is-in, когда элемент дошёл до экрана)
   ===================================================================== */
.vk-reveal { opacity: 0; }
.vk-reveal.is-in { animation: vk-spring 0.8s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes vk-spring {
  0%   { opacity: 0; transform: translateY(calc(31 * var(--k))) scale(0.95, 0.9); }
  45%  { opacity: 1; transform: translateY(calc(-7.5 * var(--k))) scale(1.025, 0.975); }
  70%  { transform: translateY(calc(2.5 * var(--k))) scale(0.988, 1.018); }
  100% { opacity: 1; transform: none; }
}
/* титры выезжают снизу по одной строке */
.vk-roll { opacity: 0; transform: translateY(calc(40 * var(--k))); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.2, .7, .3, 1); }
.vk-roll.is-in { opacity: 1; transform: none; }

/* маркер на главных фразах — проводится, когда абзац появился */
.vk-mark {
  padding: 0 0.1em;
  color: inherit;
  background: linear-gradient(104deg, transparent 0.6%, rgba(255, 110, 199, 0.55) 1.4%, rgba(122, 162, 255, 0.5) 97%, transparent 99%) no-repeat 0 62% / 0% 60%;
  border-radius: 0.2em 0.5em 0.3em 0.6em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s cubic-bezier(.6, 0, .3, 1) 0.6s;
}
.is-in .vk-mark, .is-in.vk-mark { background-size: 100% 60%; }

@media (prefers-reduced-motion: reduce) {
  .vk-reveal, .vk-roll { opacity: 1; transform: none; }
  .vk-reveal.is-in, .vk-hero__title, .vk-hero__title img, .vk-hero__logo, .vk-hero__logo img { animation: none; }
  .vk-mark { background-size: 100% 60%; transition: none; }
  .vk-phone__feed { transition: none; }
  .vk-spark, .vk-scene__icon, .vk-doodles svg { animation: none !important; }
  .vk-scene .vk-scene__icon, .vk-scene .vk-msg, .vk-scene .vk-approved { opacity: 1; scale: 1; translate: none; }
  .vk-sheets, .vk-bubbles, .vk-steam, .vk-sweat { display: none; }
}