/* ===== КЕЙС «МЕФИСТОЛИК» × KION =====
   Ночные Мытищи: синее небо, высотки, старый дом за деревьями, жёлтые фонари; адский огонь — акцентом,
   фирменный градиент KION (фиолетовый → малиновый) — в деталях. Макет шириной 1440: размеры — calc(N * var(--k)).
   Оживляет js/case-kion.js (параллакс слоёв, горящая надпись, искры). Мефистолик (хвост, чипсы) — на CSS. */

.kn-page {
  /* — настройки — */
  --night: #0b1020;          /* ночь */
  --lamp: #ffc46b;           /* свет фонаря */
  --fire: #ff7a1f;           /* адский огонь */
  --kion-a: #6a2cf5;         /* градиент KION */
  --kion-b: #e5004f;
  --dim: #8f98b3;            /* второстепенный текст */
  --tail-swing: 2.6deg;      /* насколько качается хвост */
  --tail-time: 3.6s;         /* полный мах хвоста туда-обратно ×2 */
  --eat-time: 7s;            /* цикл «поднёс чипс ко рту — прожевал — взял новый» */

  background: var(--night);
  color: #fff;
}
.kn { container-type: inline-size; overflow-x: clip; }
.kn > * { --k: calc(100cqw / 1440); }

.kn-back {
  position: fixed; top: 20px; left: 20px; z-index: 60;
  padding: 8px 18px;
  border: 1px solid rgba(255, 196, 107, 0.6);
  background: rgba(11, 16, 32, 0.7);
  color: #fff; font-weight: 500; font-size: 14px; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.kn-back:hover { background: var(--lamp); color: var(--night); }

/* =====================================================================
   1. ОБЛОЖКА
   ===================================================================== */
.kn-hero {
  position: relative;
  height: max(100vh, calc(780 * var(--k)));
  overflow: hidden;
  background: linear-gradient(#050d1f, #09254a 80%); /* продолжение неба над сценой (цвет верха картинки неба) */
}
/* слои сдвигаются от мыши: --mx/--my ставит js, глубина — data-depth */
[data-depth] { translate: calc(var(--mx, 0) * var(--d, 0) * var(--k)) calc(var(--my, 0) * var(--d, 0) * var(--k)); will-change: translate; }
.kn-sky { --d: 4; transform: translateY(-24%); } /* высотки поднимаем над крышей дома */ /* небо с высотками — слой сцены, как в исходной композиции; верх плавно уходит в цвет неба */
.kn-scene > .kn-sky { mask-image: linear-gradient(transparent, #000 8%); -webkit-mask-image: linear-gradient(transparent, #000 8%); }
/* сцена — все слои одного размера, прижаты к низу; занимает ~80% высоты обложки, сверху видно небо с высотками */
.kn-scene {
  position: absolute; left: 50%; bottom: -1%;
  width: max(106%, calc(max(100vh, 780 * var(--k)) * 1916 / 821 * 0.8));
  aspect-ratio: 1916 / 821; transform: translateX(-50%);
}
.kn-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
/* дом меньше и ниже, как на исходной композиции: над крышей видны высотки (подобрано по e302…png) */
.kn-house { --house-scale: 0.65; --house-x: 2.4%; --house-y: 31%; transform-origin: 50% 0; transform: translate(var(--house-x), var(--house-y)) scale(var(--house-scale)); }
/* у деревьев верхушки обрезаны краем картинки — растворяем их в небе */
.kn-trees { mask-image: linear-gradient(transparent, #000 16%); -webkit-mask-image: linear-gradient(transparent, #000 16%); }
.kn-scene > [data-depth="9"] { --d: 9; }
.kn-scene > [data-depth="11"] { --d: 11; }
.kn-scene > [data-depth="15"] { --d: 15; }
.kn-devil { --d: 24; }

/* горящая надпись «Мефистолик» — справа вверху, напротив логотипа KION, равная ему по весу.
   Вспыхивает снизу вверх; гаснет тоже снизу вверх — по краю летят искры (js) */
.kn-title {
  position: absolute; z-index: 5; right: calc(70 * var(--k)); top: calc(-40 * var(--k));
  width: calc(600 * var(--k)); aspect-ratio: 720 / 420; opacity: 0; --d: 6;
}
.kn-title video { display: block; width: 100%; height: 100%; }
.kn-title.is-on { animation: kn-ignite 1.4s cubic-bezier(.2,.8,.2,1) both; opacity: 1; }
.kn-title.is-off { animation: kn-burnout var(--burn-time, 1.6s) linear both; }
@keyframes kn-ignite {
  0%   { opacity: 0; clip-path: inset(100% 0 0 0); filter: brightness(3) saturate(0.4); }
  25%  { opacity: 1; }
  60%  { clip-path: inset(0 0 0 0); filter: brightness(1.8); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}
@keyframes kn-burnout {           /* сгорает снизу вверх */
  0%   { opacity: 1; clip-path: inset(0 0 0 0); filter: brightness(1.6) saturate(1.3); }
  100% { opacity: 1; clip-path: inset(0 0 100% 0); filter: brightness(2.2); }
}

/* свет фонарей; правый иногда подмигивает */
.kn-lamp {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); --d: 15;
  background: radial-gradient(closest-side, rgba(255, 210, 140, 0.5), rgba(255, 190, 110, 0.14) 45%, transparent);
  mix-blend-mode: screen; pointer-events: none;
}
.kn-lamp--blink { animation: kn-blink 7s steps(1) infinite; }
@keyframes kn-blink {
  0%, 61%, 66%, 71%, 100% { opacity: 1; }
  62%, 64%, 70% { opacity: 0.15; }
  63%, 65% { opacity: 0.7; }
}

/* Мефистолик: справа внизу, слои одного размера друг на друге */
.kn-devil { position: absolute; z-index: 3; right: calc(-30 * var(--k)); bottom: calc(-6 * var(--k)); width: calc(940 * var(--k)); aspect-ratio: 1916 / 821; }
.kn-devil img, .kn-devil__hand { position: absolute; inset: 0; width: 100%; height: 100%; }
.kn-devil__body { z-index: 3; }
/* хвост качается вокруг места, где он выходит из-за спины */
.kn-devil__tail { z-index: 1; transform-origin: 48.8% 100%; animation: kn-tail var(--tail-time) ease-in-out infinite alternate; }
@keyframes kn-tail { from { rotate: calc(var(--tail-swing) * -1); } to { rotate: var(--tail-swing); } }
/* рука с чипсом — под телом: уходит влево-вверх за голову («подносит ко рту»), потом обратно */
.kn-devil__hand { z-index: 2; transform-origin: 91% 79%; animation: kn-eat var(--eat-time) ease-in-out infinite; }
@keyframes kn-eat {
  0%, 48% { translate: 0 0; rotate: 0deg; }
  58%, 64% { translate: -6% -2.6%; rotate: -6deg; }
  76%, 100% { translate: 0 0; rotate: 0deg; }
}
.kn-devil__chip { animation: kn-chip var(--eat-time) linear infinite; }
@keyframes kn-chip {               /* съеден — и через паузу в пальцах новый */
  0%, 61% { opacity: 1; scale: 1; }
  62%, 88% { opacity: 0; scale: 1; }
  92% { opacity: 1; scale: 1.15; }
  96%, 100% { opacity: 1; scale: 1; }
}
.kn-devil__chip { transform-origin: 84% 56%; }
/* жуёт: голова чуть ходит вверх-вниз */
.kn-devil__body { animation: kn-chew var(--eat-time) ease-in-out infinite; }
@keyframes kn-chew {
  0%, 64%, 86%, 100% { translate: 0 0; }
  67%, 73%, 79% { translate: 0 0.35%; }
  70%, 76%, 82% { translate: 0 0; }
}

/* искры — поверх всего */
.kn-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }

/* слева — логотип, заголовок и метки (как в кейсе Comedy); левая часть притемнена под текст */
.kn-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 12, 26, 0.88) 0%, rgba(8, 12, 26, 0.5) 38%, transparent 62%);
}
.kn-hero__in { position: absolute; z-index: 6; left: calc(110 * var(--k)); top: calc(150 * var(--k)); width: calc(560 * var(--k)); }
.kn-hero__logo { display: block; width: calc(330 * var(--k)); height: auto; filter: drop-shadow(0 calc(14 * var(--k)) calc(30 * var(--k)) rgba(229, 0, 79, 0.35)); }
.kn-hero__title { margin: calc(30 * var(--k)) 0 0; font-weight: 800; font-size: calc(38 * var(--k)); line-height: 1.1; text-transform: uppercase; }
.kn-chips { display: flex; flex-wrap: wrap; gap: calc(10 * var(--k)); margin: calc(24 * var(--k)) 0 0; padding: 0; list-style: none; }
.kn-chips li { padding: calc(7 * var(--k)) calc(16 * var(--k)); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: calc(30 * var(--k)); font-size: calc(13 * var(--k)); background: rgba(11, 16, 32, 0.4); }
.kn-chips li:last-child { border: 0; background: linear-gradient(90deg, var(--kion-a), var(--kion-b)); }

/* мягкий переход обложки в текст */
.kn-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(120 * var(--k)); z-index: 4; pointer-events: none; background: linear-gradient(transparent, var(--night)); }

/* =====================================================================
   НИЖЕ ОБЛОЖКИ — колонка по центру
   ===================================================================== */
.kn-reveal { opacity: 0; translate: 0 calc(18 * var(--k)); transition: opacity 0.6s, translate 0.6s cubic-bezier(.2,.8,.2,1); }
.kn-reveal.is-in { opacity: 1; translate: none; }

.kn-status {
  display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--k));
  margin: calc(40 * var(--k)) auto 0; font-size: calc(13 * var(--k));
}
.kn-status b { padding: calc(6 * var(--k)) calc(14 * var(--k)); border-radius: calc(30 * var(--k)); background: linear-gradient(90deg, var(--kion-a), var(--kion-b)); font-weight: 500; }
.kn-status span { color: var(--dim); }
.kn-status span::before { content: "⏸ "; color: var(--lamp); }

.kn-sec { max-width: calc(900 * var(--k)); margin: 0 auto; padding: calc(70 * var(--k)) 0; }
.kn-sec--wide { max-width: calc(1120 * var(--k)); }
.kn-label { margin: 0 0 calc(20 * var(--k)); font-weight: 500; font-size: calc(12 * var(--k)); letter-spacing: 0.3em; text-transform: uppercase; color: var(--fire); }
.kn-big { margin: 0; font-size: calc(26 * var(--k)); line-height: 1.45; font-weight: 400; }
.kn-big b { font-weight: 700; color: var(--lamp); }
.kn-text { margin: calc(18 * var(--k)) 0 0; max-width: calc(760 * var(--k)); font-size: calc(15 * var(--k)); line-height: 1.6; color: #dfe4f0; }

/* путь сериала: от идеи до паузы */
.kn-path { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(14 * var(--k)); margin: 0; padding: 0; list-style: none; }
.kn-path li { position: relative; z-index: 1; padding-top: calc(26 * var(--k)); }
/* шнур, огонь и дым рисуются на холсте (он чуть больше списка — пламени нужно место сверху) */
.kn-path__fire { position: absolute; z-index: 0; pointer-events: none; }
/* точки: пока огонь не дошёл — серые угольки, загорелась — огненная */
.kn-path li::before {
  content: ""; position: absolute; left: 0; top: calc(-6 * var(--k)); width: calc(12 * var(--k)); height: calc(12 * var(--k)); border-radius: 50%;
  background: #3a3f52; transition: background 0.3s, box-shadow 0.3s;
}
.kn-path li.is-lit::before { background: #ffd27a; box-shadow: 0 0 calc(8 * var(--k)) #ff9a2a, 0 0 calc(22 * var(--k)) var(--fire); }
.kn-path--pause::before { background: transparent !important; border: 2px solid rgba(255, 255, 255, 0.35); box-shadow: none !important; }
.kn-path--pause.is-lit::before { border-color: var(--lamp); }
.kn-path b { display: block; margin-bottom: calc(8 * var(--k)); font-size: calc(16 * var(--k)); font-weight: 700; }
.kn-path span { display: block; font-size: calc(12 * var(--k)); line-height: 1.5; color: var(--dim); }
/* текст шага проявляется, когда до него дошёл огонь */
.kn-path li > * { opacity: 0.25; transition: opacity 0.5s, color 0.5s; }
.kn-path li.is-lit > * { opacity: 1; }
.kn-path li.is-lit b { color: #fff; text-shadow: 0 0 calc(14 * var(--k)) rgba(255, 122, 31, 0.6); }
.kn-path--pause.is-lit b { text-shadow: none; color: var(--dim); }

/* герои — карты таро */
.kn-tarot { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(18 * var(--k)); margin: 0; padding: 0; list-style: none; }
.kn-card {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: calc(18 * var(--k)) calc(16 * var(--k)) calc(22 * var(--k));
  border-radius: calc(12 * var(--k));
  background: linear-gradient(170deg, #1b2240, #121729 60%, #1d1426);
  box-shadow: inset 0 0 0 1px rgba(255, 196, 107, 0.35), inset 0 0 0 calc(7 * var(--k)) #121729, inset 0 0 0 calc(8 * var(--k)) rgba(255, 196, 107, 0.25);
  transition: translate 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s, rotate 0.35s;
}
.kn-card:hover { translate: 0 calc(-10 * var(--k)); rotate: -1.5deg; box-shadow: inset 0 0 0 1px var(--lamp), inset 0 0 0 calc(7 * var(--k)) #121729, inset 0 0 0 calc(8 * var(--k)) rgba(255, 196, 107, 0.5), 0 calc(20 * var(--k)) calc(40 * var(--k)) rgba(255, 122, 31, 0.18); }
.kn-card i { font-style: normal; font-family: Georgia, 'Times New Roman', serif; font-size: calc(22 * var(--k)); color: var(--lamp); }
.kn-card img { display: block; width: 100%; aspect-ratio: 4 / 5; margin-top: calc(12 * var(--k)); object-fit: cover; border-radius: 50% 50% calc(6 * var(--k)) calc(6 * var(--k)) / 34% 34% calc(6 * var(--k)) calc(6 * var(--k)); /* арка, как окошко на карте таро */ filter: sepia(0.25) saturate(0.85) contrast(1.05); box-shadow: 0 0 0 1px rgba(255, 196, 107, 0.4); transition: filter 0.35s; }
.kn-card:hover img { filter: none; }
.kn-card--devil img { box-shadow: 0 0 0 1px rgba(255, 122, 31, 0.7); }
.kn-card b { margin-top: calc(14 * var(--k)); font-size: calc(17 * var(--k)); font-weight: 700; }
.kn-card em { margin-top: calc(4 * var(--k)); font-style: normal; font-size: calc(11 * var(--k)); color: var(--dim); }
.kn-card span { margin-top: calc(12 * var(--k)); font-size: calc(12 * var(--k)); line-height: 1.5; color: #d5daea; }
.kn-card--devil { background: linear-gradient(170deg, #3a1210, #1a0d12 60%, #121729); box-shadow: inset 0 0 0 1px rgba(255, 122, 31, 0.6), inset 0 0 0 calc(7 * var(--k)) #1a0d12, inset 0 0 0 calc(8 * var(--k)) rgba(255, 122, 31, 0.4); }
.kn-card--devil i { color: var(--fire); }

/* стороны конфликта — строкой под картами */
.kn-sides { max-width: calc(900 * var(--k)); margin: calc(26 * var(--k)) 0 0; font-size: calc(13 * var(--k)); line-height: 1.6; color: var(--dim); }
.kn-sides b { color: var(--fire); font-weight: 600; }

/* ===== AI-КОНЦЕПТЫ: стоп-кадры в формате кино 2,35:1, с зерном и виньеткой ===== */
.kn-still {
  position: relative; display: block; width: 100%; padding: 0; border: 0; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 2.35; border-radius: calc(6 * var(--k)); background: #000;
  box-shadow: 0 calc(24 * var(--k)) calc(60 * var(--k)) rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 196, 107, 0.12);
}
.kn-still img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.88) contrast(1.06); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 0.6s; }
/* зерно и виньетка — общий «плёночный» вид, чтобы кадры смотрелись одной серией */
.kn-still::before, .kn-still::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.kn-still::before { background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(5, 8, 18, 0.65) 100%); }
.kn-still::after {
  opacity: 0.18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.kn-still:hover img, .kn-still:focus-visible img { transform: scale(1.04); filter: saturate(1) contrast(1.06); }
/* пометка «AI-концепт» */
.kn-still em, .kn-lightbox em {
  position: absolute; z-index: 2; left: calc(12 * var(--k)); top: calc(12 * var(--k));
  padding: calc(4 * var(--k)) calc(10 * var(--k)); border-radius: calc(20 * var(--k));
  background: rgba(8, 12, 26, 0.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-style: normal; font-size: calc(10 * var(--k)); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.85);
}
.kn-still em::before, .kn-lightbox em::before { content: "✦ "; color: var(--lamp); }

/* ===== МАРШРУТ ТОЛИКА ===== */
.kn-trip { --toy-w: 210; --stop-gap: 90; } /* игрушка — ширина; расстояние между остановками (дорога петляет в промежутках) */
.kn-trip__map { position: relative; }
.kn-trip__road { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.kn-trip__base { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.kn-trip__burnt { fill: none; stroke: #ff8a2a; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px #ff5a00) drop-shadow(0 0 16px rgba(255, 90, 0, 0.6)); }
/* Толик бежит по дороге */
.kn-trip__tolik { position: absolute; left: 0; top: 0; z-index: 4; width: calc(86 * var(--k)); pointer-events: none; will-change: transform; }
.kn-trip__tolik img { display: block; width: 100%; height: auto; animation: kn-step 0.32s ease-in-out infinite alternate; filter: drop-shadow(0 0 calc(12 * var(--k)) rgba(255, 120, 30, 0.9)); }
.kn-trip__tolik.is-idle img { animation-duration: 1.4s; }
@keyframes kn-step { from { translate: 0 0; rotate: -4deg; } to { translate: 0 calc(-6 * var(--k)); rotate: 4deg; } }

/* реплика Толика — комиксовый пузырь над головой */
.kn-trip__say {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: calc(10 * var(--k));
  width: max-content; max-width: calc(260 * var(--k));
  padding: calc(10 * var(--k)) calc(14 * var(--k)); border-radius: calc(16 * var(--k));
  background: #fff; color: #1a1020; border: calc(2.5 * var(--k)) solid #1a1020;
  font-weight: 800; font-size: calc(14 * var(--k)); line-height: 1.25; text-align: center;
  box-shadow: calc(4 * var(--k)) calc(4 * var(--k)) 0 var(--fire);
  translate: -50% 0; rotate: -3deg; transform-origin: 50% 120%; scale: 0; opacity: 0;
  transition: scale 0.35s cubic-bezier(.3,1.7,.5,1), opacity 0.2s;
}
.kn-trip__say::after { /* хвостик пузыря */
  content: ""; position: absolute; left: 50%; top: 100%; width: calc(14 * var(--k)); height: calc(14 * var(--k));
  background: #fff; border: solid #1a1020; border-width: 0 calc(2.5 * var(--k)) calc(2.5 * var(--k)) 0;
  translate: -50% -55%; rotate: 45deg;
}
.kn-trip__say.is-on { scale: 1; opacity: 1; }
.kn-trip__say.is-on.is-shake { animation: kn-say-shake 0.35s 0.35s; }
@keyframes kn-say-shake { 25% { rotate: -7deg; } 50% { rotate: 2deg; } 75% { rotate: -5deg; } }

/* остановки: точка на дороге (по ней идёт Толик) · игрушка рядом, в свободном месте · текст; через раз зеркально */
.kn-stop { position: relative; z-index: 1; display: grid; grid-template-columns: calc(110 * var(--k)) calc(var(--toy-w) * var(--k)) 1fr; gap: calc(30 * var(--k)); align-items: center; margin-bottom: calc(var(--stop-gap) * var(--k)); }
.kn-stop--flip { grid-template-columns: 1fr calc(var(--toy-w) * var(--k)) calc(110 * var(--k)); }
.kn-stop--flip .kn-stop__node { order: 3; }
.kn-stop--flip .kn-stop__toy { order: 2; }
.kn-stop__node { display: grid; place-items: center; height: calc(40 * var(--k)); }
.kn-stop__node i { width: calc(16 * var(--k)); height: calc(16 * var(--k)); border-radius: 50%; background: #3a3f52; box-shadow: 0 0 0 calc(5 * var(--k)) rgba(255, 255, 255, 0.05); transition: background 0.4s, box-shadow 0.4s; }
.kn-stop__toy { position: relative; z-index: 2; display: grid; place-items: center; }
.kn-stop__toy img { display: block; width: 100%; height: auto; max-height: calc(190 * var(--k)); object-fit: contain; filter: drop-shadow(0 calc(16 * var(--k)) calc(18 * var(--k)) rgba(0, 0, 0, 0.6)); opacity: 0; scale: 0.6; transition: opacity 0.5s, scale 0.7s cubic-bezier(.3,1.6,.5,1); }
.kn-stop__text { max-width: calc(560 * var(--k)); opacity: 0; translate: 0 calc(24 * var(--k)); transition: opacity 0.6s 0.15s, translate 0.6s 0.15s cubic-bezier(.2,.8,.2,1); }
.kn-stop--flip .kn-stop__text { justify-self: end; }
.kn-stop__text b { display: block; margin-bottom: calc(10 * var(--k)); font-size: calc(13 * var(--k)); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fire); }
.kn-stop__text p { margin: 0; font-size: calc(16 * var(--k)); line-height: 1.6; color: #dfe4f0; }
/* Толик дошёл — точка загорается, игрушка выпрыгивает и потом покачивается, текст выезжает */
.kn-stop.is-in .kn-stop__node i { background: #ffd27a; box-shadow: 0 0 calc(10 * var(--k)) #ff9a2a, 0 0 calc(26 * var(--k)) var(--fire); }
.kn-stop.is-in .kn-stop__toy img { opacity: 1; scale: 1; animation: kn-float 4s 0.8s ease-in-out infinite; }
.kn-stop.is-in .kn-stop__text { opacity: 1; translate: none; }
@keyframes kn-float { 50% { translate: 0 calc(-6 * var(--k)); } }
.kn-stop:nth-child(odd).is-in .kn-stop__toy img { animation-delay: 1.6s; }
/* кнопка «кадр»: маленькое превью-кадр, по клику — крупно */
.kn-stop__still {
  display: flex; align-items: center; gap: calc(12 * var(--k)); margin-top: calc(16 * var(--k)); padding: calc(5 * var(--k)) calc(14 * var(--k)) calc(5 * var(--k)) calc(5 * var(--k));
  border: 1px solid rgba(255, 196, 107, 0.3); border-radius: calc(8 * var(--k)); background: rgba(255, 255, 255, 0.03); color: #fff; cursor: zoom-in;
  font: inherit; font-size: calc(12 * var(--k)); transition: border-color 0.3s, background 0.3s;
}
.kn-stop__still img { width: calc(110 * var(--k)); aspect-ratio: 2.35; object-fit: cover; border-radius: calc(4 * var(--k)); }
.kn-stop__still span { color: rgba(255, 255, 255, 0.75); }
.kn-stop__still:hover { border-color: var(--lamp); background: rgba(255, 196, 107, 0.08); }
.kn-trip__note { margin: calc(10 * var(--k)) 0 0; font-size: calc(12 * var(--k)); color: var(--dim); text-align: center; }

/* просмотр кадра */
.kn-lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 4vw; background: rgba(4, 6, 14, 0.92); cursor: zoom-out; }
.kn-lightbox[hidden] { display: none; }
.kn-lightbox figure { position: relative; margin: 0; max-width: 1400px; width: 100%; --k: 1px; }
.kn-lightbox img { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: contain; border-radius: 6px; }
.kn-lightbox figcaption { margin-top: 12px; font-size: 13px; color: var(--dim); }
.kn-lightbox em { font-size: 11px; }
.kn-lightbox__close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 26px; cursor: pointer; }

/* авторская группа — как в кейсе Comedy */
.kn-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--k)); margin: 0; padding: 0; list-style: none; }
.kn-person { position: relative; }
.kn-person img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; filter: grayscale(1) contrast(1.05) brightness(0.9); transition: filter 0.4s; }
.kn-person:hover img { filter: grayscale(0); }
.kn-person b { display: block; margin-top: calc(14 * var(--k)); font-weight: 500; font-size: calc(14 * var(--k)); text-align: center; }
.kn-person span { display: block; font-size: calc(11 * var(--k)); color: var(--dim); text-align: center; }
.kn-person--me img { filter: none; outline: calc(2 * var(--k)) solid var(--lamp); outline-offset: calc(4 * var(--k)); }
.kn-person--me i { position: absolute; top: 0; right: 0; padding: calc(3 * var(--k)) calc(9 * var(--k)); border-radius: calc(20 * var(--k)); background: var(--kion-b); font-style: normal; font-weight: 600; font-size: calc(10 * var(--k)); }



.kn-quote { margin: 0; font-size: calc(24 * var(--k)); line-height: 1.4; font-weight: 400; }
.kn-quote cite { display: block; margin-top: calc(10 * var(--k)); font-style: normal; font-size: calc(12 * var(--k)); color: var(--dim); }
.kn-refs { display: flex; flex-wrap: wrap; gap: calc(8 * var(--k)); margin: calc(20 * var(--k)) 0 0; padding: 0; list-style: none; }
.kn-refs li { padding: calc(6 * var(--k)) calc(14 * var(--k)); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: calc(30 * var(--k)); font-size: calc(12 * var(--k)); }

.kn-list { margin: 0; padding: 0; list-style: none; }
.kn-list li { display: grid; grid-template-columns: calc(200 * var(--k)) 1fr; padding: calc(16 * var(--k)) 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.kn-list b { font-size: calc(18 * var(--k)); font-weight: 700; }
.kn-list span { font-size: calc(15 * var(--k)); line-height: 1.5; color: #dfe4f0; }
.kn-end { display: inline-block; margin-top: calc(50 * var(--k)); font-size: calc(14 * var(--k)); color: var(--lamp); text-decoration: none; }
.kn-end:hover { color: #fff; }

/* вертикальный экран (телефон): обложка крупнее, сетки — в одну-две колонки */
@media (max-aspect-ratio: 4 / 5) {
  .kn > * { --k: calc(100cqw / 640); }
  .kn-title { right: auto; left: 3cqw; width: 94cqw; top: 40%; } /* на телефоне — под текстом, почти во всю ширину */
  .kn-devil { width: calc(900 * var(--k)); right: calc(-160 * var(--k)); }
  .kn-hero__in { left: calc(36 * var(--k)); top: calc(130 * var(--k)); }
  .kn-sec, .kn-sec--wide { max-width: none; padding-left: calc(36 * var(--k)); padding-right: calc(36 * var(--k)); }
  .kn-status { flex-direction: column; gap: calc(8 * var(--k)); }
  .kn-path { grid-template-columns: 1fr; gap: calc(34 * var(--k)); padding-left: calc(26 * var(--k)); }
  .kn-path li { padding-top: 0; }
  .kn-path li::before { left: calc(-26 * var(--k)); top: calc(6 * var(--k)); }
  .kn-tarot { grid-template-columns: 1fr 1fr; }
  .kn-text, .kn-list span { font-size: calc(18 * var(--k)); }
  .kn-path span, .kn-card span, .kn-sides { font-size: calc(15 * var(--k)); }
  .kn-team { grid-template-columns: 1fr 1fr; }
  .kn-stop, .kn-stop--flip { grid-template-columns: calc(60 * var(--k)) calc(200 * var(--k)) 1fr; grid-template-rows: auto auto; gap: calc(14 * var(--k)); margin-bottom: calc(70 * var(--k)); }
  /* на телефоне без зигзага: точки и дорога — по левому краю, текст правее, Толик идёт сбоку от текста */
  .kn-stop--flip .kn-stop__node, .kn-stop--flip .kn-stop__toy { order: 0; }
  .kn-stop__text, .kn-stop--flip .kn-stop__text { grid-column: 2 / -1; order: 4 !important; max-width: none; justify-self: stretch; }
  .kn-stop__toy img { max-height: calc(170 * var(--k)); }
  .kn-stop__text p { font-size: calc(18 * var(--k)); }
  .kn-stop__text b, .kn-stop__still, .kn-trip__note { font-size: calc(14 * var(--k)); }
  .kn-trip__tolik { width: calc(84 * var(--k)); }
  .kn-trip__say { max-width: calc(300 * var(--k)); font-size: calc(17 * var(--k)); left: 0; translate: 0 0; } /* на телефоне Толик у левого края — пузырь вправо */
  .kn-trip__say::after { left: calc(30 * var(--k)); }
  .kn-person b { font-size: calc(17 * var(--k)); } .kn-person span { font-size: calc(14 * var(--k)); }
  .kn-hero__in { width: calc(560 * var(--k)); }
  .kn-hero::before { background: linear-gradient(180deg, rgba(8, 12, 26, 0.85), transparent 45%); }
}

@media (prefers-reduced-motion: reduce) {
  .kn-devil__tail, .kn-devil__hand, .kn-devil__chip, .kn-devil__body, .kn-lamp--blink { animation: none; }
  .kn-path li > * { opacity: 1; }
  .kn-stop__toy img, .kn-stop__text { opacity: 1; scale: 1; translate: none; animation: none !important; }
  .kn-stop__node i { background: #ffd27a; }
  .kn-reveal { opacity: 1; translate: none; }
}