/* =========================================================
   Black Parade — первый экран
   Все размеры из макета Figma (ширина 1728) пересчитаны через --u:
   1 px макета = var(--u). Так экран масштабируется под любую ширину.
   ========================================================= */

/* Шрифт из макета — файл лежит в assets/fonts/, поэтому грузится на любом устройстве */
@font-face {
  font-family: "Broadsheet";
  src: url("assets/fonts/Broadsheet.woff") format("woff");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --u: calc(100vw / 1728);
  --red: #c50000;
  --red-spray: #c8000a;
  --black: #010101;
  --white: #ffffff;
  --header-h: max(96px, calc(127 * var(--u)));   /* меню + плеер */
  --font: "Broadsheet", "Old Standard TT", "Times New Roman", serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }
/* браузер не двигает прокрутку сам, когда меняется содержимое выше экрана */
html { overflow-anchor: none; scrollbar-gutter: stable; }

body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ===================== Меню ===================== */
.header {
  position: relative;
  z-index: 20;
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: max(48px, calc(70 * var(--u)));
  padding: 0 calc(99 * var(--u));
  background: var(--white);
  border-bottom: 1px solid #000;
}

.nav a {
  color: #000;
  text-decoration: none;
  font-size: max(12px, calc(18 * var(--u)));
  line-height: 1.7;
  white-space: nowrap;
  transition: color .18s ease;
}

.nav a:hover,
.nav a:focus-visible { color: var(--red); }

.nav a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 4px;
}

/* ===================== Плеер ===================== */
.player {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: max(6px, calc(10 * var(--u)));
  height: max(48px, calc(57 * var(--u)));
  background: #000;
  border: 0;
  border-bottom: 1px solid var(--white);
}

.player__title {
  font-size: max(12px, calc(15.8 * var(--u)));
  line-height: 1;
  letter-spacing: .02em;
  transition: opacity .2s;
}

.player__controls {
  display: flex;
  align-items: center;
  gap: max(14px, calc(16 * var(--u)));
}

.player__btn {
  display: grid;
  place-items: center;
  width: 22px;
  height: 18px;
  fill: var(--white);
  transition: fill .18s ease, opacity .18s;
}

.player__btn:hover:not(:disabled),
.player__btn:focus-visible { fill: var(--red); }

.player__btn:focus-visible {
  outline: 1px solid var(--red);
  outline-offset: 2px;
}

.player__btn:disabled { opacity: .3; cursor: default; }

.player__btn .icon-pause { display: none; }
.player.is-playing .icon-play { display: none; }
.player.is-playing .icon-pause { display: block; }

.player.is-empty .player__title { opacity: .45; }

.player__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.player__progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* ===================== Первый экран ===================== */
.hero {
  position: relative;
  height: calc(980 * var(--u));
  overflow: hidden;
  background: var(--black);
}

/* Фон-бумага. Если положить assets/hero-bg.jpg — встанет поверх запасного */
.hero__bg {
  position: absolute;
  inset: 0;
  background-color: #e4e2dd;
  background-image:
    url("assets/hero-bg.jpg"),
    linear-gradient(180deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(ellipse 70% 60% at 50% 40%, #d2d0cb 0%, #e2e0db 60%, #ecebe7 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: cover, auto, auto, 220px 220px;
  background-position: center top;
  background-blend-mode: normal, normal, multiply, normal;
}

/* Сцена шириной 1728 по центру — внутри круг, клякса и затемнения */
.stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1728 * var(--u));
  height: 100%;
  transform: translateX(-50%);
  z-index: 2; /* выше букв: затемнение плавно гасит их книзу, как в макете */
}

/* ===================== Череп и наложения ===================== */
/* Координаты из макета: слой 1915×2014, left −76, top −626 от верха страницы */
.skull {
  position: absolute;
  left: calc(50% - 864 * var(--u) - 76 * var(--u));
  top: calc(-753 * var(--u));
  width: calc(1915 * var(--u));
  height: calc(2014 * var(--u));
  max-width: none;
  mix-blend-mode: exclusion;
  pointer-events: none;
}

.hero { isolation: isolate; }
.hero__screen {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-115 * var(--u));
  height: calc(1256 * var(--u));
  background: linear-gradient(180deg, #000 0%, #fff 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ===================== Бегущие красные буквы ===================== */
.marquee {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* Как в Figma: Plus darker. Safari понимает его напрямую,
     остальные браузеры берут multiply — он выглядит очень близко */
  mix-blend-mode: multiply;
  mix-blend-mode: plus-darker;
  will-change: transform;
}

/* Ширина и смещение — как у картинок в макете (534 и 584 px) */
.marquee--left  { left: calc(-126 * var(--u));  width: calc(534 * var(--u)); }
.marquee--right { right: calc(-232 * var(--u)); width: calc(584 * var(--u)); }

.marquee__track {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.marquee__track img {
  display: block;
  width: 100%;
  height: auto;
}

/* Три копии картинки, лента сдвигается ровно на одну — бесконечный цикл */
.marquee--left .marquee__track {
  top: calc(-460 * var(--u));
  animation: marquee-up 34s linear infinite;
}

.marquee--right .marquee__track {
  top: calc(-722 * var(--u));
  animation: marquee-down 38s linear infinite;
}

@keyframes marquee-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-33.3333%); }
}

@keyframes marquee-down {
  from { transform: translateY(-33.3333%); }
  to   { transform: translateY(0); }
}

/* ===================== Клякса ===================== */
.ink {
  position: absolute;
  z-index: 2;
  left: calc(586 * var(--u));
  top: calc(540 * var(--u));
  width: calc(582 * var(--u));
  height: calc(701 * var(--u));
  pointer-events: none;
}

.ink__img,
.ink__svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ink__svg { display: none; }
.ink--fallback .ink__svg { display: block; }

/* ===================== Затемнения ===================== */
.hero__shade {
  position: absolute;
  z-index: 3;
  left: calc(-111 * var(--u));
  right: calc(-111 * var(--u));
  top: calc(94 * var(--u));
  height: calc(1743 * var(--u));
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 4.4%,
    rgba(0,0,0,.87) 34.1%,
    #000 43.2%,
    #000 100%);
  pointer-events: none;
}

.hero__fade {
  position: absolute;
  z-index: 5;
  left: calc(-318 * var(--u));
  right: calc(-318 * var(--u));
  top: calc(684 * var(--u));
  height: calc(672 * var(--u));
  background: linear-gradient(180deg,
    rgba(1,1,1,0) 7.9%,
    rgba(1,1,1,.94) 26.7%,
    var(--black) 31.8%);
  pointer-events: none;
}

/* Растягиваем затемнения на всю ширину экрана, а не только сцены */
.stage .hero__shade,
.stage .hero__fade {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}

/* ===================== Круг с песнями ===================== */
.wheel {
  --k: .8;                 /* общий размер всех песен относительно макета */
  position: absolute;
  z-index: 4;
  left: calc(877 * var(--u));
  top: calc(1023 * var(--u));
  width: 0;
  height: 0;
}

.wheel__spin {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

/* Один «луч»: красная полоса со строкой, над ней — название */
.ray {
  --ts: 50; --ls: 17; --bt: 11; --bl: 320;   /* размеры из макета, px */
  --s: 1;                                     /* масштаб: у играющей песни больше */
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  /* масштаб считается от внутреннего конца полосы, поэтому песня растёт наружу */
  transform: rotate(calc(var(--a) + var(--shift-on, 0deg))) translateX(calc(300 * var(--u))) scale(var(--s)) translateY(-50%);
  text-align: left;
  transition:
    transform .9s cubic-bezier(.22, .8, .24, 1),
    opacity .7s ease;
}

/* Пока музыка играет: выбранная песня крупнее, остальные полупрозрачные
   и раздвигаются влево и вправо (сдвиг --shift считает script.js) */
.wheel.is-playing .ray {
  --shift-on: var(--shift, 0deg);
  opacity: .3;
}
.wheel.is-playing .ray:hover { opacity: .7; }
.wheel.is-playing .ray.is-current {
  --s: var(--sa, 1.35);   /* увеличение подбирается так, чтобы песня не заходила под плеер */
  opacity: 1;
  z-index: 2;
}

.ray__title {
  position: absolute;
  left: 0;
  bottom: calc(100% + .12em);
  font-size: calc(var(--ts) * var(--k) * var(--u));
  line-height: .8;
  white-space: nowrap;
  color: var(--white);
  transition: color .18s ease;
}

.ray__bar {
  display: flex;
  align-items: center;
  height: calc(var(--bt) * var(--k) * var(--u));
  min-width: calc(var(--bl) * var(--k) * var(--u));
  background: var(--red);
}

.ray__line {
  padding: 0 .45em;
  font-size: calc(var(--ls) * var(--k) * var(--u));
  line-height: 1;
  white-space: nowrap;
  color: var(--white);
}

.ray:hover .ray__title { color: var(--red); }
.wheel.is-playing .ray.is-current:hover .ray__title { color: var(--white); }

.ray:focus-visible { outline: none; }
.ray:focus-visible .ray__title {
  outline: 1px solid var(--red);
  outline-offset: 4px;
}

/* ===================== Подпись в центре круга ===================== */
.hub {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(841 * var(--u));
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.hub__question {
  font-size: max(11px, calc(16.6 * var(--u)));
  line-height: 1.2;
}

.hub__name {
  font-size: max(16px, calc(25.65 * var(--u)));
  line-height: 1.2;
}

/* ===================== Вход: фигура в пустоте и голос героя ===================== */
.entry {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: max(28px, calc(40 * var(--u)));
  padding: max(40px, calc(70 * var(--u))) 20px max(48px, calc(80 * var(--u)));
  background: radial-gradient(ellipse 34% 40% at 50% 34%, rgba(255, 255, 255, .06), rgba(0, 0, 0, 0) 70%), #000;
  overflow: hidden;
}
/* одна целая фигура и много воздуха вокруг */
.entry__figure {
  position: relative;
  align-self: end;
  height: min(40vh, 360px);
  aspect-ratio: 60 / 200;
}
.entry__figure .marcher { width: 100%; height: 100%; }
.entry__figure::after {   /* тень под ногами */
  content: "";
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -3%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0));
}
/* светлое пятно за фигурой — как луч прожектора: чёрный силуэт читается целиком */
.entry__figure::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, #f2f1ed 0%, rgba(242, 241, 237, .92) 46%, rgba(242, 241, 237, .25) 78%, rgba(242, 241, 237, 0) 100%);
  z-index: -1;
}
.entry__figure { z-index: 0; isolation: isolate; }
.entry__text { max-width: 620px; text-align: center; }
.entry__line {
  margin: 0;
  font-weight: 400;
  font-size: max(30px, calc(52 * var(--u)));
  line-height: 1.08;
  color: #fff;
}
.entry__ask {
  margin: .9em auto 0;
  max-width: 30em;
  font-size: max(17px, calc(22 * var(--u)));
  line-height: 1.4;
  color: #fff;
}
.entry__note {
  margin: 2.2em auto 0;
  max-width: 36em;
  font-size: max(13px, calc(15 * var(--u)));
  line-height: 1.5;
  color: #fff;
}
.entry__line, .entry__ask, .entry__note, .entry__figure { animation: entry-in 2.4s ease both; }
.entry__ask { animation-delay: 1.2s; }
.entry__note { animation-delay: 2.2s; }
@keyframes entry-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ===================== Второй блок: печатная машинка ===================== */
.story {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  padding: max(48px, calc(127 * var(--u))) 20px 0;   /* место под липкую шапку */
  background: var(--black);
  overflow: hidden;
}

/* Размеры и отступы — из макета (Frame 3) */
.story__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(40px, calc(74 * var(--u)));
  width: min(100%, max(320px, calc(708 * var(--u))));
  text-align: center;
}

.story__block {
  max-width: 100%;
  color: var(--white);
  opacity: 0;
  transition: opacity 1.1s ease;
}

.story__block--1 { font-size: max(13px, calc(15.65 * var(--u))); line-height: 1.97; }
.story__block--2 { font-size: max(15px, calc(18.65 * var(--u))); line-height: 1.1;  width: max(300px, calc(440 * var(--u))); }
.story__block--3 { font-size: max(17px, calc(22 * var(--u)));    line-height: 1.1;  width: max(300px, calc(582 * var(--u))); }
.story__block--4 { font-size: max(24px, calc(35.65 * var(--u))); line-height: .95; width: max(300px, calc(456 * var(--u))); }

/* «Возраст» фразы: 0 — печатается сейчас, дальше — всё тусклее */
.story__block[data-age="0"] { opacity: 1; }
.story__block[data-age="1"] { opacity: .55; }
.story__block[data-age="2"] { opacity: .3; }
.story__block[data-age="3"] { opacity: .15; }

/* Буквы появляются по одной */
.story__block .ch { opacity: 0; }
.story__block .ch.is-on { opacity: 1; }

/* Каретка печатной машинки */
/* Нулевая ширина — каретка не сдвигает ещё не напечатанный текст */
.caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: .9em;
  vertical-align: -.08em;
}

.caret::after {
  content: "";
  position: absolute;
  left: .05em;
  top: 0;
  width: .06em;
  height: 100%;
  background: var(--red);
  animation: caret-blink 1s steps(1) infinite;
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

/* Подсказка «листай» — когда можно открыть следующую фразу */
.story__hint {
  position: absolute;
  left: 50%;
  bottom: max(24px, calc(40 * var(--u)));
  transform: translateX(-50%);
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .45);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.story__hint span {
  display: inline-block;
  animation: hint-bob 1.6s ease-in-out infinite;
}

.story.can-next .story__hint { opacity: 1; }

@keyframes hint-bob {
  50% { transform: translateY(4px); }
}

/* =========================================================
   ГЛАВЫ ЛОНГРИДА
   ========================================================= */
.chapters { background: var(--black); }

.chapter {
  position: relative;
  padding: max(90px, calc(160 * var(--u))) max(20px, calc(52 * var(--u)));
  scroll-margin-top: max(96px, calc(127 * var(--u)));   /* под липкую шапку */
}

/* --- Заголовок главы: номер, красное «граффити», песня --- */
.chapter__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(14px, calc(22 * var(--u)));
  margin-bottom: max(56px, calc(110 * var(--u)));
  text-align: center;
}

.chapter__num {
  font-size: max(12px, calc(15 * var(--u)));
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .45);
}

.chapter__title {
  margin: 0;
  font-weight: 700;
  font-size: max(54px, calc(150 * var(--u)));
  line-height: .9;
  letter-spacing: .02em;
  text-wrap: balance;
  color: var(--red-spray);
  text-shadow:
    0 0 .015em #e0000c,
    0 0 .05em rgba(205, 0, 10, .7),
    0 0 .14em rgba(205, 0, 10, .3);
}

/* --- Кнопка-песня: красная полоса, как на круге --- */
.track-chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .45em .9em .45em .7em;
  background: var(--red);
  color: var(--white);
  font-size: max(14px, calc(19 * var(--u)));
  line-height: 1;
  white-space: nowrap;
  transition: background .2s ease, transform .2s ease;
}

.track-chip:hover { background: #e00000; transform: translateY(-1px); }
.track-chip:focus-visible { outline: 1px solid var(--white); outline-offset: 3px; }

.track-chip__icon {
  width: 0; height: 0;
  border-left: .62em solid currentColor;
  border-top: .38em solid transparent;
  border-bottom: .38em solid transparent;
}

/* играет сейчас — иконка паузы */
.track-chip.is-playing .track-chip__icon {
  width: .55em; height: .7em;
  border: 0;
  background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
}

.track-chip__name { font-style: normal; }
.track-chip__by { opacity: .8; font-size: .82em; }
.track-chip__by::before { content: "— "; }
.track-chip__time { opacity: .75; font-size: .82em; padding-left: .2em; border-left: 1px solid rgba(255, 255, 255, .4); margin-left: .1em; padding-left: .55em; }
.track-chip--small { font-size: max(12px, calc(15 * var(--u))); }

/* --- Проявление и печать --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

[data-type] .ch { opacity: 0; }
[data-type] .ch.is-on { opacity: 1; }

/* --- Монолог --- */
.monologue {
  display: flex;
  flex-direction: column;
  gap: max(22px, calc(38 * var(--u)));
  max-width: max(320px, calc(640 * var(--u)));
  margin: 0 auto;
  font-size: max(17px, calc(22 * var(--u)));
  line-height: 1.35;
  text-align: center;
}

.monologue p { transition: opacity 1s ease; }
.monologue p.is-past { opacity: .5; }   /* прошлые фразы затухают */

.monologue__big {
  margin-top: max(10px, calc(20 * var(--u)));
  font-size: max(26px, calc(40 * var(--u)));
  line-height: 1.05;
}

.monologue__small { font-size: max(14px, calc(17 * var(--u))); color: rgba(255,255,255,.6); }

/* --- Боковая реплика --- */
.chapter__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: max(280px, calc(420 * var(--u)));
  margin: max(70px, calc(130 * var(--u))) 0 0 max(0px, calc(80 * var(--u)));
  padding-left: 18px;
  border-left: 3px solid var(--red);
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.4;
  color: rgba(255, 255, 255, .75);
}
.chapter__aside--right { margin-left: auto; margin-right: max(0px, calc(80 * var(--u))); }

/* ===================== I. МЕРТВ: личное дело в темноте ===================== */
.chapter--dead { height: 430vh; padding: 0; }

.dead-scene {
  --lift: 0px;
  /* состояние сцены выставляет скрипт */
  --light: 0;                       /* лампа: 0 — темно, 1 — горит */
  --ry: 0deg; --rx: 0deg; --ty: 0px; --open: 0; --appear: 1;
  --fh: min(calc(100svh - var(--header-h) - 250px), 40vw);   /* высота папки */
  --fw: calc(var(--fh) * .74);                                /* ширина половинки */
  --ft: max(4px, calc(var(--fh) * .016));                     /* толщина картона */
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.chapter__head--compact {
  position: relative;
  z-index: 6;
  margin: max(16px, calc(24 * var(--u))) 0 0;
  gap: 10px;
}
.chapter__head--compact .chapter__title { font-size: max(44px, calc(96 * var(--u))); }
.chapter__head--chip { margin-top: max(18px, calc(28 * var(--u))); }

/* МЕРТВ — огромное слово позади папки; при раскрытии и рассыпании гаснет */
.dead-title {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  margin: 0;
  transform: translate(-50%, -54%) scale(calc(1 + var(--open) * .08));
  font-weight: 700;
  font-size: min(21vw, 44vh);
  line-height: .8;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--red-spray);
  text-shadow: 0 0 .015em #e0000c, 0 0 .05em rgba(205, 0, 10, .7), 0 0 .16em rgba(205, 0, 10, .35);
  opacity: calc((1 - var(--open)) * (1 - var(--dis, 0)) * var(--appear));
  filter: blur(calc(var(--open) * 10px));
  pointer-events: none;
  user-select: none;
}

/* --- стол: виден только там, где светит лампа --- */
.desk {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background:
    radial-gradient(ellipse 46% 60% at 50% 42%, #3a2f26 0%, #1c1713 45%, #060504 80%);
  opacity: calc((.18 + .82 * var(--light)) * (.55 + .45 * var(--li, 1)));
  transform: translateX(var(--lx, 0px));
  z-index: 0;
}
.desk::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .8; mix-blend-mode: multiply; }

/* --- свет: круглое пятно с мягкими краями ---
   --lx — покачивание (px), --li — яркость с миганиями, --light — включён ли свет. Всё ставит скрипт */
.light {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* слои чуть шире экрана (свет качается всего на пару десятков пикселей): двигаем их целиком */
.light__dark, .light__pool {
  position: absolute;
  left: -8%;
  top: -8%;
  width: 116%;
  height: 116%;
  will-change: transform;
  transform: translate3d(var(--lx, 0px), 0, 0);
}
.light__dark--idle {
  background: radial-gradient(ellipse calc(var(--fw) * 1.9) calc(var(--fh) * 1.05) at 50% 50%,
    rgba(0,0,0,.05) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.92) 100%);
  opacity: calc(1 - var(--light));
}
.light__dark--lit {
  background: radial-gradient(ellipse calc(var(--fw) * 1.55) calc(var(--fh) * .95) at 50% 54%,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 38%, rgba(0,0,0,.72) 62%, rgba(0,0,0,.97) 82%);
  opacity: var(--light);
}
/* тёплое пятно на столе; при мигании гаснет вместе с --li */
.light__pool {
  background: radial-gradient(ellipse calc(var(--fw) * 1.35) calc(var(--fh) * .78) at 50% 54%,
    rgba(255, 228, 186, .22) 0%, rgba(255, 220, 170, .10) 45%, rgba(255, 220, 170, 0) 72%);
  mix-blend-mode: screen;
  opacity: calc(var(--light) * var(--li, 1));
}
/* мигание: поверх всего ненадолго ложится тень */
.light::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(var(--light) * (1 - var(--li, 1)) * .75);
}

/* --- 3D-сцена --- */
.stage3d {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 1700px;
  perspective-origin: 50% 20%;
}

/* значения --ry/--rx/--ty/--open задаёт скрипт: вращение, наклон «на стол», раскрытие */
.folder {
  position: relative;
  width: calc(var(--fw) * 2);
  height: var(--fh);
  transform-style: preserve-3d;
  transform-origin: 75% 50%;
  transform:
    translateY(var(--ty))
    translateX(calc((1 - var(--open)) * var(--fw) * -0.5))
    rotateX(var(--rx))
    rotateY(var(--ry))
    scale(calc(.85 + .15 * var(--appear)));
  opacity: var(--appear);
  cursor: pointer;
  outline: none;
}
.folder.is-open { cursor: default; }
.folder:focus-visible .cover { box-shadow: inset 0 0 0 2px var(--red); }

.folder-shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--fw) * (1.1 + 1.0 * var(--open)));
  height: calc(var(--fh) * (.18 + .3 * var(--open)));
  transform: translate(-50%, calc(var(--fh) * (.62 - .3 * var(--open))));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0));
  filter: blur(6px);
  pointer-events: none;
}

/* «доска» картона с толщиной */
.board {
  position: absolute;
  top: 0;
  width: var(--fw);
  height: var(--fh);
  transform-style: preserve-3d;
}
.board--back { left: var(--fw); }

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.face--top { transform: translateZ(calc(var(--ft) / 2)); }
.face--bottom { transform: rotateY(180deg) translateZ(calc(var(--ft) / 2)); }
.face::after {   /* тень грани: темнее, когда отвёрнута от света */
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--dim, 0);
  pointer-events: none;
}
.board--back .face--top, .hinge .face--bottom { --dim: var(--dimIn, .1); }
.board--back .face--bottom { --dim: var(--dimB, .4); }
.hinge .face--top { --dim: var(--dimF, .1); }

.edge { position: absolute; background: #8d877b; }
.edge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.05), rgba(0,0,0,.35)); }
.edge--right  { top: 0; height: 100%; width: var(--ft); left: calc(100% - var(--ft) / 2); transform: rotateY(90deg); }
.edge--spine  { top: 0; height: 100%; width: var(--ft); left: calc(var(--ft) / -2); transform: rotateY(90deg); background: #5b564d; }
.edge--top    { left: 0; width: 100%; height: var(--ft); top: calc(var(--ft) / -2); transform: rotateX(90deg); }
.edge--bottom { left: 0; width: 100%; height: var(--ft); top: calc(100% - var(--ft) / 2); transform: rotateX(90deg); }

/* петля обложки: крутится вокруг левого края */
.hinge {
  position: absolute;
  left: var(--fw);
  top: 0;
  width: var(--fw);
  height: var(--fh);
  transform-style: preserve-3d;
  transform-origin: 0 50%;
  transform: translateZ(calc(var(--ft) * 1.05)) rotateY(calc(var(--open) * -180deg));
}
.board--cover { left: 0; }

/* картон папки */
.cover, .folder-back, .inner-right, .inner-left { background: #b9b2a3; }
.cover::before, .folder-back::before, .inner-right::before, .inner-left::before {
  content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: .9; pointer-events: none;
}

.cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8% 8% 9%;
  color: #1b1a18;
  text-align: center;
}
.cover__photo {
  position: absolute;
  left: 13%;
  top: 9%;
  width: 54%;
  aspect-ratio: 1;
  object-fit: cover;
  transform: rotate(-4deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
  border: calc(var(--fh) * .008) solid #eeeae2;
}
.cover__clip {    /* скрепка */
  position: absolute;
  left: 34%;
  top: 5.5%;
  z-index: 2;
  width: 5%;
  height: 16%;
  border: calc(var(--fh) * .005) solid #9a9a9c;
  border-radius: 999px;
  transform: rotate(-4deg);
}
.cover__kicker { font-size: calc(var(--fh) * .022); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.cover__title { font-size: calc(var(--fh) * .075); line-height: 1; letter-spacing: .04em; margin-top: 2%; }
.cover__sub { font-size: calc(var(--fh) * .032); margin-top: 2%; }
.cover__stamp {
  position: absolute;
  right: 8%;
  top: 30%;
  padding: .2em .5em;
  border: 2px solid var(--red);
  color: var(--red);
  font-size: calc(var(--fh) * .03);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(14deg);
  mix-blend-mode: multiply;
}
.folder-back { display: grid; place-items: center; color: rgba(0,0,0,.45); font-size: calc(var(--fh) * .05); }

/* правая внутренняя сторона: прозрачный конверт под диск */
.inner-right { background: #aea797; }
.sleeve {
  position: absolute;
  left: 9%; right: 9%;
  top: 50%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, .35);
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04) 40%, rgba(255,255,255,.12));
}

/* --- диск в 3D: лежит в конверте, приподнимается и крутится --- */
.disc3d {
  position: absolute;
  left: calc(var(--fw) * 1.09);
  top: calc(50% - var(--fw) * .41);
  width: calc(var(--fw) * .82);
  height: calc(var(--fw) * .82);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--ft) / 2 + 1px + var(--lift)));
}
.disc3d__shadow {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  filter: blur(calc(4px + var(--lift) * .4));
  transform: translateZ(calc(-1 * var(--lift)));
}
.disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-mask: radial-gradient(circle, transparent 0 7.5%, #000 7.7%);
          mask: radial-gradient(circle, transparent 0 7.5%, #000 7.7%);
}
.disc:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--red); }
.disc__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 15.5%, rgba(255,255,255,.18) 15.6% 16.2%, transparent 16.3%),
    radial-gradient(circle, #2a2a2b 0 15.5%, #0a0a0b 16% 98%, #3a3a3c 98.5% 100%),
    repeating-radial-gradient(circle, rgba(255,255,255,.03) 0 1px, transparent 1px 3px);
  background-blend-mode: normal, normal, screen;
  animation: disc-spin 7s linear infinite;
  animation-play-state: paused;
}
.folder.is-open .disc__body { animation-play-state: running; }
.disc.is-playing .disc__body { animation-duration: 1.8s; }
@keyframes disc-spin { to { transform: rotate(360deg); } }
.disc__edge {   /* ребро диска */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 0 #2a2a2c, 0 2px 0 #1a1a1c;
  pointer-events: none;
}
.disc__ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.disc__ink text { font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive; font-weight: 700; font-size: 27px; fill: #f2f0ea; filter: url(#marker); }
.disc__ink .disc__small { font-size: 13px; font-weight: 500; opacity: .8; }
.disc__ink path { fill: none; stroke: #f2f0ea; stroke-width: 2.4; stroke-linecap: round; filter: url(#marker); }
.disc__sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    rgba(255,255,255,0) 0deg, rgba(150,180,255,.16) 30deg, rgba(255,255,255,0) 70deg,
    rgba(255,140,210,.10) 140deg, rgba(255,255,255,0) 190deg,
    rgba(120,255,220,.12) 230deg, rgba(255,240,210,.22) 250deg, rgba(255,255,255,0) 290deg);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- кармашек с документами: лежит поверх раскрытой обложки отдельным слоем --- */
.pocket-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--fw);
  height: var(--fh);
  transform: translateZ(calc(var(--ft) * 1.6 + 1px));
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s linear .35s;
  pointer-events: none;
}
.folder.is-open .pocket-layer { opacity: 1; visibility: visible; transition: opacity .35s ease; }
.pocket { position: absolute; inset: 6%; }
.doc {
  position: absolute;
  width: 46%;
  height: 74%;
  padding: 0;
  pointer-events: none;   /* пока папка закрыта */
}
.folder.is-open .doc { pointer-events: auto; }
/* веером: у каждого листа своя видимая часть, клик попадает точно в него */
.doc--record { left: 0%;  top: 7%; transform: rotate(-8deg); }
.doc--xray   { left: 27%; top: 2%; transform: rotate(0deg); }
.doc--note   { left: 54%; top: 7%; transform: rotate(8deg); }
.doc:hover, .doc:focus-visible { z-index: 5; }

/* двигается только «бумага» внутри — кнопка стоит на месте, поэтому ничего не дёргается */
.doc__paper {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  padding: 7%;
  text-align: left;
  background: #ebe8e1;
  color: #161515;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
.doc:hover .doc__paper, .doc:focus-visible .doc__paper { transform: translateY(-16%); box-shadow: 0 14px 26px rgba(0, 0, 0, .6); }
.doc:focus-visible { outline: none; }
.doc:focus-visible .doc__paper { outline: 2px solid var(--red); }
.doc.is-out .doc__paper { opacity: 0; transition: opacity .15s; }
.doc--xray .doc__paper { padding: 0; background: #050505; }
.doc--xray img { width: 100%; height: 100%; object-fit: cover; }
.doc--note .doc__paper { background: #efece4; }

.doc__tab { position: absolute; right: 7%; top: 5%; z-index: 1; font-size: calc(var(--fh) * .022); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.doc--xray .doc__tab { color: #f2d2cc; }
.doc__title { display: block; margin-top: 14%; font-size: calc(var(--fh) * .032); line-height: 1.1; }
.doc__lines { display: block; height: 60%; margin-top: 8%; background: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px calc(var(--fh) * .034)); opacity: .6; }
.doc__hand { display: block; margin-top: 16%; font-family: "Caveat", "Segoe Print", cursive; font-size: calc(var(--fh) * .046); line-height: 1.1; color: #23262e; }

.pocket__front {
  position: absolute;
  left: -2%; right: -2%; bottom: -3%;
  height: 42%;
  background: linear-gradient(180deg, #a59e8f, #958e80);
  border-top: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 -6px 12px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.pocket__front::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

/* --- пыль в луче --- */
.dust {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- окно для чтения документа --- */
.doc-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  perspective: 1400px;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overscroll-behavior: contain;
}
.doc-viewer[hidden] { display: none; }
.doc-viewer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .82);
  opacity: 0;
  transition: opacity .35s ease;
}
.doc-viewer.is-open .doc-viewer__backdrop { opacity: 1; }
.doc-viewer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(680px, 100%);
}
.doc-viewer__card {
  position: relative;
  width: 100%;
  max-height: calc(100vh - 110px);
  max-height: calc(100svh - 110px);
  overflow: auto;
  overscroll-behavior: contain;
  transform-origin: 50% 50%;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
}
.doc-viewer__close {
  font-size: 15px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .35);
  padding-bottom: 3px;
  opacity: 0;
  transition: opacity .3s ease .25s, color .2s;
}
.doc-viewer.is-open .doc-viewer__close { opacity: 1; }
.doc-viewer__close:hover, .doc-viewer__close:focus-visible { color: var(--red); border-color: var(--red); outline: none; }

.sheet { position: relative; margin: 0; padding: 42px 46px; font-size: 17px; line-height: 1.5; }
.sheet::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; pointer-events: none; }
.sheet--record { background: #ebe8e1; color: #161515; }
.sheet__head p { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.sheet__head h3 { margin: 8px 0 24px; font-size: 26px; font-weight: 400; line-height: 1.15; }
.sheet__fields { margin: 0 0 22px; display: grid; gap: 8px; }
.sheet__fields div { display: flex; gap: 16px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, .2); }
.sheet__fields dt { flex: 0 0 38%; opacity: .55; }
.sheet__fields dd { margin: 0; }
.sheet__note { margin-bottom: 26px; }
.sheet__sign { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet__stamp { padding: .2em .6em; border: 2px solid var(--red); color: var(--red); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); mix-blend-mode: multiply; }

.sheet--xray { padding: 0; background: #000; color: #e4d6d2; }
.sheet--xray::after { display: none; }
.sheet--xray img { display: block; width: 100%; }
.xray__mark { position: absolute; font-size: 22px; letter-spacing: .1em; color: #f1e6e2; text-shadow: 0 0 6px #000; }
.xray__mark--r { left: 22px; top: 18px; }
.xray__mark--id { right: 22px; top: 18px; font-size: 15px; }
.xray__caption { padding: 16px 22px 22px; font-size: 15px; }

.sheet--note {
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(40, 70, 140, .25) 33px 34px), #f1eee6;
  color: #22252d;
  font-family: "Caveat", "Segoe Print", cursive;
  font-size: 25px;
  line-height: 34px;
  padding-top: 34px;
  border-left: 2px solid rgba(197, 0, 0, .35);
}
.sheet--note p { margin: 0 0 34px; }
.sheet__ps { color: var(--red); }

/* --- рассыпание папки --- */
.stage3d.is-dissolving { filter: url(#dissolve); }

/* --- текст, который остаётся --- */
.remains {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 6;
  width: min(86%, max(320px, calc(760 * var(--u))));
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.remains p { opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; }
.remains.is-shown p { opacity: 1; transform: none; filter: none; }
.remains.is-shown .remains__small--late { transition-delay: .9s; }
.remains__small { font-size: max(16px, calc(21 * var(--u))); line-height: 1.4; color: #fff; }
.remains__big { margin: .75em 0; font-size: max(32px, calc(58 * var(--u))); line-height: 1.04; color: #fff; }
.remains__small--late { color: #fff; }

/* --- плавный переход в красный (--red ставит скрипт) --- */
.dead-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  background-color: #AE0C0C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--red, 0);
  pointer-events: none;
}

/* ===================== II. ПАРАД: телевизор и карточки ===================== */
.chapter--parade {
  height: 640vh;
  padding: 0;
  background-color: #AE0C0C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.parade-scene {
  --dim: 0;                 /* насколько потускнел красный (ставит скрипт) */
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  isolation: isolate;
}
.parade-dim {   /* красный тускнеет к концу главы */
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0, calc(var(--dim) * .75)) 0%, rgba(0,0,0, calc(var(--dim) * .95)) 70%);
  pointer-events: none;
}
.chapter--parade .chapter__head { position: relative; z-index: 3; }
.chapter--parade .chapter__title { color: #0b0b0b; text-shadow: 0 0 .08em rgba(0, 0, 0, .25); }
.chapter--parade .chapter__num { color: rgba(0, 0, 0, .55); }
.chapter--parade .track-chip { background: #0b0b0b; }
.chapter--parade .track-chip:hover { background: #222; }

.tv-stage {
  --tw: min(44vw, calc(100svh - var(--header-h) - 300px), 660px);
  --th: calc(var(--tw) * .74);
  --td: calc(var(--tw) * .42);
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

/* белое свечение экрана (гаснет вместе с телевизором) */
.tv-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tw) * 2.4);
  height: calc(var(--th) * 2.2);
  transform: translate(-50%, -52%);
  background: radial-gradient(ellipse at center, rgba(255,255,255,.42) 0%, rgba(255,255,255,.16) 28%, rgba(255,255,255,0) 62%);
  animation: tv-glow 3.2s ease-in-out infinite;
  will-change: opacity, transform;
  transition: opacity .8s ease;
  pointer-events: none;
}
.tv-floor {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--tw) * 1.8);
  height: calc(var(--th) * .5);
  transform: translate(-50%, calc(var(--th) * .55));
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,255,255,.35), rgba(255,255,255,0));
  mix-blend-mode: screen;
  filter: blur(8px);
  transition: opacity .8s ease;
}
.tv-floor::after {
  content: "";
  position: absolute;
  left: 25%; right: 25%; top: 30%; bottom: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.tv-stage.is-off .tv-glow, .tv-stage.is-off .tv-floor { opacity: 0; }
@keyframes tv-glow { 0%, 100% { opacity: .9; } 50% { opacity: 1; } 52% { opacity: .75; } 54% { opacity: 1; } }

.tv {
  position: relative;
  width: var(--tw);
  height: var(--th);
  transform-style: preserve-3d;
  animation: tv-sway 11s ease-in-out infinite;
}
@keyframes tv-sway {
  0%, 100% { transform: rotateX(8deg) rotateY(-24deg); }
  50% { transform: rotateX(4deg) rotateY(24deg); }
}

/* коробка из шести граней: --w --h --d */
.box { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.bf { position: absolute; left: 50%; top: 50%; backface-visibility: hidden; }
.bf--front, .bf--back { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.bf--left, .bf--right { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); }
.bf--top, .bf--bottom { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.bf--front  { transform: translateZ(calc(var(--d) / 2)); }
.bf--back   { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.bf--left   { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.bf--right  { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.bf--top    { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.bf--bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

.box--cab { --w: var(--tw); --h: var(--th); --d: var(--td); }
.box--rear {
  --w: calc(var(--tw) * .66); --h: calc(var(--th) * .7); --d: calc(var(--td) * .7);
  transform: translateZ(calc(var(--td) * -.5 - var(--td) * .35));
}

/* пластик корпуса: углы у всех граней прямые, обводка в цвет грани закрывает щели на стыках */
.box .bf { background: var(--c); outline: 1px solid var(--c); }
.box--cab .bf--front  { --c: #1f1c1c; background: linear-gradient(180deg, #2a2626, #161313); }
.box--cab .bf--back   { --c: #121010; }
.box--cab .bf--left   { --c: #0f0d0d; }
.box--cab .bf--right  { --c: #262222; }
.box--cab .bf--top    { --c: #2a2626; }
.box--cab .bf--bottom { --c: #080707; }
.box--rear .bf        { --c: #141111; }
.box--rear .bf--left  { --c: #0d0b0b; }
.box--rear .bf--right { --c: #1d1a1a; }
.box--rear .bf--top   { --c: #1f1b1b; }
.box--rear .bf--back {
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 10px), #151212;
}
/* закругление — только внутренняя рамка вокруг экрана */
.tv-bezel {
  position: absolute;
  inset: 3.5%;
  border-radius: calc(var(--tw) * .035);
  background: linear-gradient(180deg, #312c2c, #1a1717);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 6px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.5);
}

/* экран: выпуклый кинескоп с белым светом */
.tv-screen {
  position: absolute;
  left: 5%;
  top: 8%;
  width: 70%;
  height: 84%;
  overflow: hidden;
  border-radius: 14% / 18%;
  background: #0a0a0a;
  box-shadow:
    0 0 0 calc(var(--tw) * .012) #0a0909,
    0 0 calc(var(--tw) * .06) rgba(255, 255, 255, .55),
    inset 0 0 calc(var(--tw) * .05) rgba(0, 0, 0, .7);
}
.tv-screen__content {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, #fbfcfd 0%, #dfe4e8 45%, #9aa2a9 100%);
  transform-origin: 50% 50%;
  transform: scale(1, .004);
  filter: brightness(3);
}
.tv.is-on .tv-screen__content { animation: crt-on .9s cubic-bezier(.2, .8, .2, 1) forwards, crt-flicker 6s 1s steps(1) infinite; }
.tv.is-off .tv-screen__content { animation: crt-off .7s cubic-bezier(.6, 0, .4, 1) forwards; }
@keyframes crt-off {   /* кинескоп гаснет: в полоску, потом в точку */
  0% { transform: scale(1, 1); filter: brightness(1); }
  45% { transform: scale(1, .008); filter: brightness(3); }
  80% { transform: scale(.02, .008); filter: brightness(4); opacity: 1; }
  100% { transform: scale(0, 0); opacity: 0; }
}
@keyframes crt-on {
  0% { transform: scale(.4, .004); filter: brightness(4); }
  45% { transform: scale(1, .01); filter: brightness(3); }
  100% { transform: scale(1, 1); filter: brightness(1); }
}
@keyframes crt-flicker { 0%, 100% { opacity: 1; } 31% { opacity: .82; } 32% { opacity: 1; } 77% { opacity: .9; } 78% { opacity: 1; } }

.tv-screen__word {
  position: absolute;
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: calc(var(--tw) * .085);
  white-space: nowrap;
  color: rgba(0, 0, 0, .12);
}
.tv-screen__track {
  position: absolute;
  left: 0;
  bottom: 16%;
  height: 66%;
  display: flex;
  align-items: flex-end;
  gap: calc(var(--tw) * .02);
  animation: march-loop 16s linear infinite;
}
@keyframes march-loop { to { transform: translateX(-50%); } }
.tv-screen__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; background: linear-gradient(180deg, #6d757c, #3c4247); }
.tv-screen__lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.tv-screen__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 70% 40% at 30% 18%, rgba(255,255,255,.35), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}

.tv-panel {
  position: absolute;
  right: 4%;
  top: 10%;
  width: 17%;
  height: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8%;
  padding-top: 4%;
}
.tv-knob {
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a7472, #2a2626 60%, #111 100%);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .6), inset 0 0 0 2px rgba(255,255,255,.06);
}
.tv-knob--small { width: 42%; }
.tv-grille {
  flex: 1;
  width: 80%;
  margin-bottom: 8%;
  border-radius: 6px;
  background: repeating-linear-gradient(180deg, #050505 0 3px, #2a2626 3px 6px);
}
.tv-antenna {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: calc(var(--th) * .7);
  background: linear-gradient(180deg, #9a9696, #3a3636);
  transform-origin: 50% 100%;
}
.tv-antenna::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: #b5b0ae; }
.tv-antenna--l { transform: translate(-50%, -100%) rotateX(-90deg) rotateZ(-28deg); }
.tv-antenna--r { transform: translate(-50%, -100%) rotateX(-90deg) rotateZ(28deg); }
.tv-leg {
  position: absolute;
  bottom: calc(var(--th) * -.09);
  width: calc(var(--tw) * .05);
  height: calc(var(--th) * .1);
  background: #0d0b0b;
  transform: translateZ(calc(var(--td) * .3));
}
.tv-leg--l { left: 14%; }
.tv-leg--r { right: 14%; }

/* фигурки марша (используются в телевизоре) */
.marcher { height: 100%; width: auto; flex: none; overflow: visible; }
.marcher .leg-a, .marcher .leg-b { transform-box: fill-box; transform-origin: 50% 0; }
.marcher .leg-a { animation: step-a .9s ease-in-out infinite; }
.marcher .leg-b { animation: step-b .9s ease-in-out infinite; }
.marcher .body { animation: bob .45s ease-in-out infinite; }
@keyframes step-a { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes step-b { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes bob { 50% { transform: translateY(-3px); } }

/* --- объёмные карточки по бокам от телевизора --- */
.pcards { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pcard-wrap {
  --a: 0;                    /* появление 0…1 (ставит скрипт) */
  --cw: min(22vw, 320px);
  position: absolute;
  top: 54%;
  width: var(--cw);
  height: calc(var(--cw) * 1.06);
  perspective: 900px;
  opacity: var(--a);
  visibility: hidden;
}
.pcard-wrap.is-active { visibility: visible; }
.pcard-wrap--l { left: max(16px, calc(50% - var(--cw) - min(22vw, 330px) - 4vw)); }
.pcard-wrap--r { right: max(16px, calc(50% - var(--cw) - min(22vw, 330px) - 4vw)); }
.pcard-wrap--l { transform: translateY(-50%); }
.pcard-wrap--r { transform: translateY(-50%); }

/* потрёпанная записка: рваные края (--clip), сгиб, грязь, скотч — всё задаёт script, у каждой своё */
.pcard {
  position: absolute;
  inset: 0;
  transform: translateZ(calc((1 - var(--a)) * -260px)) rotateY(var(--ry)) rotateX(5deg) rotateZ(var(--rz, 0deg));
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
  will-change: transform;   /* своя прослойка: тень не перерисовывается, когда рядом шагает парад */
}
.pcard-wrap--l .pcard { --ry: 22deg; }
.pcard-wrap--r .pcard { --ry: -22deg; animation-delay: -3s; }
@keyframes pcard-float { 50% { translate: 0 -8px; } }

.pcard__paper {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 13% 12% 12%;
  clip-path: var(--clip, none);
  color: #0e0e0e;
  font-size: max(14px, calc(var(--cw) * .058));
  line-height: 1.38;
  pointer-events: auto;
  background:
    /* сгиб: тонкая тёмная и светлая линии + тень по одну сторону */
    linear-gradient(var(--fold, 112deg), rgba(0,0,0,0) 49.3%, rgba(0,0,0,.16) 49.8%, rgba(255,255,255,.7) 50.2%, rgba(0,0,0,.05) 50.6%, rgba(0,0,0,0) 62%),
    /* вторая, поперечная складка — бледнее */
    linear-gradient(calc(var(--fold, 112deg) + 78deg), rgba(0,0,0,0) 49.6%, rgba(0,0,0,.08) 50%, rgba(255,255,255,.45) 50.3%, rgba(0,0,0,0) 51%),
    /* грязь и следы пальцев */
    radial-gradient(ellipse 18% 12% at var(--s1x, 80%) var(--s1y, 18%), rgba(0,0,0,.16), rgba(0,0,0,0) 70%),
    radial-gradient(ellipse 30% 20% at var(--s2x, 15%) var(--s2y, 85%), rgba(0,0,0,.12), rgba(0,0,0,0) 70%),
    radial-gradient(circle at var(--s3x, 60%) var(--s3y, 70%), rgba(0,0,0,0) 9%, rgba(0,0,0,.09) 10%, rgba(0,0,0,.03) 12%, rgba(0,0,0,0) 13%),
    /* края темнее, середина светлее — бумага повидала */
    radial-gradient(ellipse 75% 70% at 45% 45%, rgba(255,255,255,.4), rgba(0,0,0,.1) 100%),
    #f4f3f0;
}
/* волокна бумаги и зерно */
.pcard__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}
/* кусок скотча сверху */
.pcard__paper::after {
  content: "";
  position: absolute;
  left: var(--tape-x, 38%);
  top: -2%;
  width: 30%;
  height: 9%;
  transform: rotate(var(--tape-r, -4deg));
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(240,240,240,.35));
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  clip-path: polygon(0 8%, 4% 0, 9% 10%, 14% 0, 100% 0, 100% 92%, 95% 100%, 90% 88%, 86% 100%, 0 100%);
  opacity: var(--tape, 1);
  pointer-events: none;
}
.pcard__paper p { margin: 0; position: relative; z-index: 1; }
.pcard__paper .track-chip { position: relative; z-index: 1; align-self: flex-start; }
.pcard--big .pcard__paper { font-size: max(19px, calc(var(--cw) * .092)); line-height: 1.1; }

.shards { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.pcard-filters { position: absolute; }

/* ===================== ОТСЧЁТ 10 → 0 ===================== */
.countdown { position: relative; height: 100vh; height: 100svh; background: #000; }
.countdown-scene {
  --noise: 0;                /* сила помех 0…1 */
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #000;
  transition: background-color .25s ease;
}
.countdown__noise--over {
  z-index: 3;
  mix-blend-mode: screen;
  opacity: calc(var(--noise) * .14) !important;
}
.countdown__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: calc(var(--noise) * .38);
  transition: opacity .3s ease;
}

/* --- полотно текста: две колонки по бокам от часов --- */
.count-wall {
  position: absolute;
  inset: 5% 4% 5%;
  z-index: 1;
  column-count: 2;
  column-gap: calc(min(28vw, 380px) + 6vw);
  column-fill: auto;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.55;
  color: #fff;
  text-align: justify;
  hyphens: auto;
  pointer-events: none;
}
.count-wall p {
  margin: 0 0 .9em;
  opacity: 0;
  filter: blur(5px);
  transition: opacity 3.2s ease, filter 3.2s ease, text-shadow 3.2s ease;
}
.count-wall p.is-past { opacity: .34; filter: blur(0); }
.count-wall p.is-current { opacity: 1; filter: blur(0); text-shadow: 0 0 .7em rgba(255, 255, 255, .35); }
.countdown-scene.is-white .count-wall { opacity: 0; transition: opacity .2s ease; }

/* --- 3D-часы --- */
.clock-stage {
  --ca: 0;                               /* 0 — в темноте и далеко, 1 — прибыли (ставит скрипт) */
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 1500px;
  transform: translate(calc(var(--shx, 0) * 1px), calc(var(--shy, 0) * 1px));
}
/* --ca — проступает из темноты (свет), --cg — растёт весь отсчёт: из глубины к зрителю */
.clock {
  --cw: min(28vw, calc((100svh - var(--header-h) - 260px) * .85), 380px);
  --chh: calc(var(--cw) * .6);
  --cd: calc(var(--cw) * .3);
  position: relative;
  width: var(--cw);
  height: var(--chh);
  transform-style: preserve-3d;
  transform:
    translateZ(calc((1 - var(--cg, 0)) * -1900px - (1 - var(--ca)) * 400px))
    rotateX(calc(12deg + (1 - var(--cg, 0)) * 14deg))
    rotateY(calc(-18deg - (1 - var(--cg, 0)) * 20deg));
}
.clock-sway {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: clock-sway 9s ease-in-out infinite;
}
@keyframes clock-sway {
  0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
  50% { transform: rotateY(40deg) rotateX(-8deg); }
}
.box--clock { --w: var(--cw); --h: var(--chh); --d: var(--cd); }
.box--clock .bf--front  { --c: #1b1a1a; background: linear-gradient(170deg, #2b2a29, #151414 60%, #0d0c0c); }
.box--clock .bf--back   { --c: #0e0d0d; }
.box--clock .bf--left   { --c: #0b0a0a; background: linear-gradient(90deg, #070606, #1a1818); }
.box--clock .bf--right  { --c: #2a2827; background: linear-gradient(90deg, #353231, #161414); }
.box--clock .bf--top    { --c: #3a3736; background: linear-gradient(180deg, #4a4645, #262423); }
.box--clock .bf--bottom { --c: #070606; }

.clock__face {
  position: absolute;
  inset: 9% 7%;
  display: flex;
  gap: 5%;
}
.clock__screw {
  position: absolute;
  width: calc(var(--cw) * .018);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8a8786, #2b2929 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);
}
.clock__screw::after { content: ""; position: absolute; left: 15%; right: 15%; top: 45%; height: 10%; background: #1a1919; transform: rotate(35deg); }
.clock__screw--tl { left: 2.4%; top: 4%; } .clock__screw--tr { right: 2.4%; top: 4%; }
.clock__screw--bl { left: 2.4%; bottom: 4%; } .clock__screw--br { right: 2.4%; bottom: 4%; }

/* перекидная цифра: верх и низ + две створки */
.flip {
  position: relative;
  flex: 1;
  height: 100%;
  perspective: 900px;
  font-family: var(--font);
  font-weight: 400;
  color: #f4f4f4;
}
.flip__half, .flip__flap {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.flip__half--top, .flip__flap--top {
  top: 0;
  border-radius: 7% 7% 0 0 / 12% 12% 0 0;
  background: linear-gradient(180deg, #2a2929, #1c1b1b);
  transform-origin: 50% 100%;
}
.flip__half--bot, .flip__flap--bot {
  bottom: 0;
  border-radius: 0 0 7% 7% / 0 0 12% 12%;
  background: linear-gradient(180deg, #171616, #0e0d0d);
  transform-origin: 50% 0;
}
.flip__half { z-index: 1; }
.flip__flap { z-index: 3; }
.flip__flap--bot { transform: rotateX(90deg); }
.flip span {
  position: absolute;
  left: 0;
  right: 0;
  height: 200%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--chh) * .7);
  line-height: 1;
}
.flip__half--top span, .flip__flap--top span { top: 0; }
.flip__half--bot span, .flip__flap--bot span { bottom: 0; }
/* щель-петля посередине и блик сверху */
.flip::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  z-index: 5;
  height: 3px;
  margin-top: -1.5px;
  background: #040404;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.flip::after {
  content: "";
  position: absolute;
  inset: 0 0 50% 0;
  z-index: 4;
  border-radius: 7% 7% 0 0 / 12% 12% 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  pointer-events: none;
}
.flip.is-flipping .flip__flap--top { animation: flap-top .3s cubic-bezier(.55, 0, .9, .5) forwards; }
.flip.is-flipping .flip__flap--bot { animation: flap-bot .3s cubic-bezier(.1, .5, .45, 1) .3s forwards; }
@keyframes flap-top { from { transform: rotateX(0deg); filter: brightness(1); } to { transform: rotateX(-90deg); filter: brightness(.45); } }
@keyframes flap-bot { from { transform: rotateX(90deg); filter: brightness(1.6); } to { transform: rotateX(0deg); filter: brightness(1); } }

/* холодный свет вокруг часов и темнота, из которой они выходят */
.clock-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1400px);
  height: min(90vh, 900px);
  background: radial-gradient(ellipse at center, rgba(220, 230, 255, .16) 0%, rgba(220, 230, 255, .05) 32%, rgba(0,0,0,0) 62%);
  opacity: calc(var(--ca) * (.35 + .65 * var(--cg, 0)));
  transform: translate(-50%, -50%) scale(calc(.5 + .5 * var(--cg, 0)));
  pointer-events: none;
}
.clock-veil {
  position: absolute;
  inset: -20% -15%;
  background: radial-gradient(ellipse at center, #000 45%, rgba(0,0,0,0) 72%);
  opacity: calc(1 - var(--ca));
  pointer-events: none;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}


.countdown__flashes { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.flash {
  position: absolute;
  padding: 0 .25em;
  background: rgba(0, 0, 0, .7);
  white-space: nowrap;
  color: #fff;
  letter-spacing: .04em;
  text-shadow: 2px 0 rgba(255,0,0,.8), -2px 0 rgba(0,255,255,.6);
  animation: flash-life var(--life, 1s) steps(6) forwards;
}
.flash--red { color: #ff2a2a; }
@keyframes flash-life {
  0% { opacity: 0; } 10% { opacity: 1; } 25% { opacity: .3; } 35% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; }
}

/* на нуле — белый: помехи и вспышки уходят */
.countdown-scene.is-white { background: #fff; }
.countdown-scene.is-white .countdown__noise { opacity: 0; }
.countdown-scene.is-white .countdown__flashes { opacity: 0; }
.countdown-scene.is-white .countdown__noise--over { opacity: 0 !important; }
.countdown-scene.is-white .clock-stage { opacity: 0; transition: opacity .2s ease; }

/* белый плавно уходит в чёрный перед следующей главой */
.from-white { height: 70vh; background: linear-gradient(180deg, #fff 0%, #fff 15%, #000 100%); }

/* ===================== III. Я ТЕБЯ НЕ ЛЮБЛЮ: телефон и SMS ===================== */
.chapter--love { height: 520vh; padding: 0; background: #000; }
.love-scene {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: radial-gradient(ellipse 50% 60% at 50% 60%, rgba(130, 200, 150, .09), rgba(0,0,0,0) 70%), #000;
}
.love-stage {
  --ph: min(calc(100svh - var(--header-h) - 270px), 540px);   /* высота телефона */
  --pw: calc(var(--ph) * .46);
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

/* колонки текста: прокручиваются внутри закреплённой сцены (--y ставит скрипт) */
.love-col {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(40vw, 520px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  pointer-events: none;
}
.love-col--l { left: max(20px, 7vw); }
.love-col--r { right: max(20px, 7vw); }
.love-col__inner {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  transform: translateY(var(--y, 100vh));
  font-size: max(17px, calc(24 * var(--u)));
  line-height: 1.45;
  color: #fff;
  will-change: transform;
}
.love-col__inner p { margin: 0; }
.love-col__accent { font-size: 1.35em; line-height: 1.2; }
.love-col__big { font-size: 1.7em; line-height: 1.1; color: var(--red-spray); }

/* телефон: толщина набрана слоями; --px/--ps — куда сдвинут и насколько увеличен (ставит скрипт) */
.phone-wrap {
  position: relative;
  z-index: 2;
  transform: translateX(var(--px, 0px)) scale(var(--ps, 1));
}
.phone {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
  transform: rotateX(var(--prx, 10deg)) rotateY(var(--pry, -18deg));
  transition: transform .2s linear;
}
.phone__layer, .phone__front {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--pw) * .16) / calc(var(--ph) * .08);
}
.phone__layer {
  background: #151617;
  transform: translateZ(calc(var(--i) * -2px));
  box-shadow: inset 0 0 0 1px #2b2d2f;
}
.phone__front {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7% 8% 8%;
  background: linear-gradient(160deg, #3a3d40 0%, #222426 45%, #141516 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone__ear { width: 26%; height: calc(var(--ph) * .012); border-radius: 99px; background: #0b0b0c; margin-bottom: 6%; box-shadow: inset 0 1px 2px #000; }

.phone__screen {
  position: relative;
  width: 100%;
  height: 46%;
  display: flex;
  flex-direction: column;
  padding: 5% 6%;
  border-radius: 4px;
  background: #b7cfae;
  color: #1c2a1c;
  font-family: "PT Mono", "Courier New", monospace;
  font-size: calc(var(--pw) * .056);
  line-height: 1.25;
  box-shadow: inset 0 0 0 calc(var(--pw) * .03) #0d0e0e, inset 0 2px 10px rgba(0,0,0,.45), 0 0 calc(var(--pw) * .35) rgba(160, 220, 170, .25);
  overflow: hidden;
}
.phone__screen::after {   /* пиксельная сетка ЖК */
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.sms-status { display: flex; justify-content: space-between; align-items: center; font-size: .8em; opacity: .75; margin-top: 4%; }
.sms-signal { display: inline-flex; align-items: flex-end; gap: 1px; height: .9em; }
.sms-signal i { width: 2px; background: currentColor; }
.sms-signal i:nth-child(1) { height: 30%; } .sms-signal i:nth-child(2) { height: 55%; }
.sms-signal i:nth-child(3) { height: 80%; } .sms-signal i:nth-child(4) { height: 100%; opacity: .3; }
.sms-battery { width: 1.6em; height: .7em; border: 1px solid currentColor; position: relative; }
.sms-battery::before { content: ""; position: absolute; right: -3px; top: 25%; bottom: 25%; width: 2px; background: currentColor; }
.sms-battery::after { content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px; width: calc(var(--bat, 1) * (100% - 2px)); background: currentColor; }
.phone.is-low .sms-battery { animation: bat-blink 1s steps(1) infinite; }
@keyframes bat-blink { 50% { opacity: 0; } }

/* экран тускнеет по мере разрядки (--glow), в конце гаснет совсем */
.phone__screen { transition: background-color 1.2s ease, box-shadow 1.2s ease, filter .6s ease; filter: brightness(calc(.72 + .28 * var(--glow, 1))); }
.phone__screen > * { transition: opacity .5s ease; }
.phone.is-off .phone__screen {
  background-color: #0f130f;
  box-shadow: inset 0 0 0 calc(var(--pw) * .03) #0d0e0e, inset 0 2px 10px rgba(0,0,0,.6);
  filter: none;
  animation: screen-die .9s ease forwards;
}
.phone.is-off .phone__screen > * { opacity: 0; }
@keyframes screen-die { 0% { filter: brightness(1.6); } 12% { filter: brightness(.4); } 20% { filter: brightness(1.2); } 100% { filter: brightness(1); } }
.sms-head { margin: 3% 0 2%; padding-bottom: 2%; border-bottom: 1px solid rgba(28,42,28,.4); font-weight: 700; letter-spacing: .05em; }
.sms-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  overflow: hidden;
}
.sms {
  max-width: 86%;
  padding: 3px 6px;
  border: 1px solid rgba(28,42,28,.55);
  animation: sms-in .35s steps(3);
}
.sms--her { align-self: flex-start; }
.sms--me { align-self: flex-end; background: rgba(28,42,28,.85); color: #b7cfae; }
.sms__meta { display: block; font-size: .72em; opacity: .7; }
@keyframes sms-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.sms-input {
  min-height: 1.4em;
  margin-top: 4%;
  padding: 2px 4px;
  border: 1px dashed rgba(28,42,28,.6);
  white-space: pre-wrap;
  word-break: break-word;
}
.sms-input:empty::before { content: ""; }
.sms-caret { display: inline-block; width: .5em; height: 1em; vertical-align: -.15em; background: #1c2a1c; animation: caret-blink 1s steps(1) infinite; }
.sms-input.is-sent { animation: sent .5s ease; }
@keyframes sent { 0% { background: rgba(28,42,28,.3); } 100% { background: transparent; } }

.phone__nav { display: flex; align-items: center; justify-content: space-between; width: 82%; margin: 6% 0 4%; }
.phone__nav span { width: 24%; height: calc(var(--ph) * .022); border-radius: 99px; background: #2e3133; box-shadow: 0 2px 0 #0a0a0b; }
.phone__nav .phone__joy { width: calc(var(--pw) * .16); height: calc(var(--pw) * .16); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #5a5d60, #2a2c2e); }
.phone__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--ph) * .012) calc(var(--pw) * .05); width: 82%; }
.key {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3em;
  padding: calc(var(--ph) * .006) 0;
  border-radius: 40%;
  background: linear-gradient(180deg, #34373a, #232527);
  box-shadow: 0 2px 0 #09090a, inset 0 1px 0 rgba(255,255,255,.1);
  color: #e6e6e6;
  font-size: calc(var(--pw) * .06);
  transition: transform .06s, background .06s;
}
.key i { font-style: normal; font-size: .55em; opacity: .55; }
.key.is-down { transform: translateY(2px); background: #4a4d50; box-shadow: 0 0 0 #09090a; }
.phone-shadow {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ph) * -.06);
  width: calc(var(--pw) * 1.4);
  height: calc(var(--ph) * .08);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,0));
  filter: blur(6px);
}

/* ===================== IV. МАМА...: кольца письма и горящие конверты ===================== */
.chapter--mama { height: 620vh; padding: 0; background: #000; }
.mama-scene {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: radial-gradient(ellipse 45% 50% at 50% 58%, rgba(255, 120, 40, .05), rgba(0,0,0,0) 70%), #000;
}
.mama-scene .chapter__head { position: relative; z-index: 2; }
.mama-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* кольца прочитанных строк: нарисованы один раз, вращает их CSS */
.mama-rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mama-ring {
  position: absolute;
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: mama-spin 300s linear infinite;
  will-change: transform;
}
.mama-ring.is-on { opacity: .3; }
.mama-rings.is-paused .mama-ring { animation-play-state: paused; }
@keyframes mama-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mama-ring { animation: none; } }
/* одна строка письма — крупно и неподвижно; меняется только прозрачностью */
.mama-line {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: var(--my, 55%);
  width: var(--mw, min(620px, 80vw));
  margin: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  font-family: var(--font);
  font-size: clamp(22px, 2.6vw, 38px);
  line-height: 1.32;
  text-wrap: balance;
  opacity: 0;
  filter: blur(6px);
  transition: opacity .9s ease, filter .9s ease;
  text-shadow: 0 0 18px #000, 0 0 36px #000;
  pointer-events: none;
}
.mama-line.is-on { opacity: 1; filter: blur(0); }
.mama-line.is-last { font-style: italic; font-size: clamp(26px, 3.2vw, 48px); }
@media (max-width: 640px) {
  .mama-line { font-size: 22px; }
  .mama-line.is-last { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mama-line { transition: none; filter: none; }
}

/* ===================== V. ПОСЛЕДНЕЕ СЛОВО: текст в глубине ===================== */
.chapter--last { height: 760vh; padding: 0; background: #000; }
.last-scene {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  background: radial-gradient(ellipse 60% 55% at 50% 55%, #0c0c0c, #000 75%);
}
.last-scene .chapter__head { position: relative; z-index: 3; }
.vortex {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 900px;
  perspective-origin: 50% 55%;
  overflow: hidden;
}
.vx {
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(34vw, 400px);
  margin: 0;
  font-size: max(16px, calc(22 * var(--u)));
  line-height: 1.35;
  text-align: center;
  color: #fff;
  will-change: transform, opacity;
  filter: blur(1.4px);
  pointer-events: none;
}
.vx--deep { font-size: max(12px, calc(15 * var(--u))); width: min(26vw, 300px); }
/* то, что он говорит сейчас: неподвижно, крупно, в центре; уже сказанное уходит в вихрь позади */
.last-line {
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 2;
  width: min(680px, calc(100vw - 48px));
  margin: 0;
  transform: translate(-50%, -50%);
  color: #fff;
  font-family: var(--font);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.42;
  text-align: center;
  text-wrap: pretty;
  text-shadow: 0 0 16px #000, 0 0 32px #000, 0 0 48px #000;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1s ease, filter 1s ease;
  pointer-events: none;
}
.last-line.is-on { opacity: 1; filter: blur(0); }
.last-line.is-final { font-style: italic; font-size: clamp(24px, 2.8vw, 40px); }
@media (prefers-reduced-motion: reduce) { .last-line { transition: none; filter: none; } }
@media (max-width: 760px) {
  .last-line { font-size: 19px; top: 52%; }
  .vx { width: min(72vw, 320px); font-size: 15px; }
  .vx--deep { width: 50vw; font-size: 12px; }
}

/* кнопка в стиле лонгрида: красная полоса, как у песен */
.ask-btn {
  position: absolute;
  left: 50%;
  bottom: max(28px, 6%);
  z-index: 4;
  padding: .55em 1.2em .6em;
  background: var(--red);
  color: #fff;
  font-size: max(17px, calc(24 * var(--u)));
  letter-spacing: .02em;
  white-space: nowrap;
  transform: translate(-50%, 16px);
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), background .2s ease;
}
.ask-btn.is-shown { opacity: 1; transform: translate(-50%, 0); }
.ask-btn:hover { background: #e00000; }
.ask-btn:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

/* --- вопрос --- */
.question {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 48px;
  padding: 24px;
  background: #000;
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 1.2s ease, background-color 1.6s ease;
}
.question[hidden] { display: none; }
.question.is-open { opacity: 1; }
.question__text { margin: 0; display: grid; gap: .6em; max-width: 760px; }
.question__line { opacity: 0; transition: opacity 1.6s ease; }
.question__line--1 { font-size: max(18px, calc(26 * var(--u))); }
.question__line--2 { font-size: max(26px, calc(46 * var(--u))); line-height: 1.12; }
.question.is-l1 .question__line--1, .question.is-l2 .question__line--2 { opacity: 1; }
.question__yes {
  position: relative;
  min-width: 5.4em;
  padding: .45em 1.4em .5em;
  border: 1px solid #fff;
  color: #fff;
  font-size: max(20px, calc(28 * var(--u)));
  opacity: 0;
  transition: opacity 1s ease, background .2s ease, color .2s ease;
}
.question__answers { display: flex; gap: 28px; justify-content: center; }
.question.is-ask .question__yes { opacity: 1; }
.question__yes:hover, .question__yes:focus-visible { background: #fff; color: #000; outline: none; }

.question.is-fading { background-color: rgba(0, 0, 0, 0); pointer-events: none; }

/* --- ответ: возвращается телефон из главы «Я ТЕБЯ НЕ ЛЮБЛЮ» --- */
.verdict {
  --ph: min(70svh, 600px);
  --pw: calc(var(--ph) * .46);
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 96px);
  padding: 24px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease, visibility 0s 1.6s;
  perspective: 1400px;
}
.question.is-verdict .verdict { opacity: 1; visibility: visible; transition: opacity 1.6s ease; }
.question.is-verdict .question__text, .question.is-verdict .question__answers { opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.verdict__phone { position: relative; }
.verdict__phone .phone { --prx: 6deg; --pry: 14deg; }
.verdict__phone .phone__screen { --glow: .7; }
.verdict__words { display: grid; gap: .9em; }
.verdict__words p {
  margin: 0;
  font-size: clamp(19px, 1.9vw, 28px);
  line-height: 1.35;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.verdict__words p.is-big { font-size: clamp(26px, 2.9vw, 44px); line-height: 1.15; }
.verdict__words p.is-on { opacity: 1; transform: none; }
.sms__status { display: block; font-size: .72em; opacity: .7; }
/* сначала гаснет телефон и слова, потом сквозь чёрное видно, как исчезает лонгрид */
.question.is-fading { transition: opacity 1.2s ease, background-color 1.4s ease 1.3s; }
.question.is-fading .verdict { opacity: 0; transition: opacity 1.2s ease; }
@media (max-width: 760px) {
  .verdict { --ph: min(42svh, 330px); grid-template-columns: 1fr; justify-items: center; align-content: center; gap: 28px; text-align: center; }
  .verdict__words p { font-size: 18px; }
  .verdict__words p.is-big { font-size: 24px; }
}

/* --- лонгрид исчезает --- */
html.is-vanishing .header,
html.is-vanishing .entry,
html.is-vanishing .hero,
html.is-vanishing .story,
html.is-vanishing .chapters {
  animation: vanish 3.6s cubic-bezier(.5, 0, .7, .4) forwards;
  pointer-events: none;
}
@keyframes vanish {
  0%   { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
  35%  { opacity: .85; filter: blur(2px) brightness(1.4); }
  100% { opacity: 0; filter: blur(18px) brightness(2); transform: scale(.94); }
}
html.is-gone .header, html.is-gone .entry, html.is-gone .hero, html.is-gone .story, html.is-gone .chapters { display: none; }
html.is-gone body { background: #000; }

/* --- источники --- */
.sources {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: max(80px, calc(140 * var(--u))) 24px max(70px, calc(110 * var(--u)));
  color: #fff;
}
.sources__title {
  margin: 0 0 .7em;
  font-weight: 700;
  font-size: max(36px, calc(64 * var(--u)));
  line-height: 1;
  color: var(--red-spray);
  text-shadow: 0 0 .05em rgba(205, 0, 10, .7), 0 0 .14em rgba(205, 0, 10, .3);
}
.sources__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.1em; font-size: max(15px, calc(18 * var(--u))); line-height: 1.5; }
.sources__list li { padding-left: 1.2em; position: relative; }
.sources__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .55em; height: 2px; background: var(--red); }
.sources__list a { color: #fff; text-decoration-color: var(--red); text-underline-offset: 3px; }
.sources__list a:hover { color: var(--red); }
.sources__again {
  margin-top: 48px;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
  color: #fff;
  font-size: 16px;
  letter-spacing: .1em;
}
.sources__again:hover { color: var(--red); border-color: var(--red); }
/* --- красный подвал: парад идёт слева направо, внизу авторы --- */
.credits {
  position: relative;
  overflow: hidden;
  background-color: #AE0C0C;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #fff;
}
.credits__march {
  position: relative;
  height: max(170px, calc(260 * var(--u)));
}
.credits__track {
  position: absolute;
  left: 0;
  bottom: 22%;
  height: 70%;
  display: flex;
  align-items: flex-end;
  gap: max(18px, calc(34 * var(--u)));
  animation: credits-march 30s linear infinite;
  will-change: transform;
}
/* лента из двух одинаковых рядов: сдвигаем на половину — бесконечно, слева направо */
@keyframes credits-march { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.credits__ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #0b0b0b 0 55%, rgba(11,11,11,0)); }
.credits__names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4em 2.4em;
  margin: 0;
  padding: max(22px, calc(34 * var(--u))) 20px max(34px, calc(50 * var(--u)));
  font-size: max(16px, calc(22 * var(--u)));
  letter-spacing: .04em;
}
html.is-vanishing .sources, html.is-vanishing .credits { opacity: 0; }
html.is-gone .credits { animation: sources-in 2.4s ease .6s both; }
html.is-gone .sources { animation: sources-in 2.4s ease both; }
@keyframes sources-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ===================== Титры на первом экране ===================== */
.titles {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 24px;
  background: #000;
  color: #fff;
  text-align: center;
  transition: opacity 1.1s ease, visibility 0s 1.1s;
}
.titles[hidden] { display: none; }
.titles.is-gone { opacity: 0; visibility: hidden; }
.titles > * { opacity: 0; animation: titles-in 1.2s ease forwards; }
.titles__kicker { font-size: max(13px, calc(18 * var(--u))); letter-spacing: .3em; text-transform: uppercase; animation-delay: .2s; }
.titles__name { margin: .35em 0 0; font-size: clamp(40px, 6.2vw, 108px); line-height: 1; font-weight: 400; animation-delay: .5s; }
.titles__about { margin-top: 1.4em; font-size: max(15px, calc(22 * var(--u))); line-height: 1.4; max-width: 34em; animation-delay: 1.1s; }
.titles__people { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em 2.4em; margin-top: 3.2em; font-size: max(15px, calc(22 * var(--u))); animation-delay: 1.6s; }
.titles__people span { position: relative; z-index: 0; }
.titles__people span::before { content: ""; position: absolute; left: -.25em; right: -.35em; top: 52%; bottom: -.08em; background: var(--red); z-index: -1; }
.titles__hint { position: absolute; bottom: 7vh; left: 0; right: 0; font-size: max(13px, calc(16 * var(--u))); letter-spacing: .08em; opacity: 0; animation: titles-hint 1.2s ease 2s forwards; }
@keyframes titles-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes titles-hint { to { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .titles > *, .titles__hint { animation-duration: .01s; animation-delay: 0s; }
}

/* ===================== Липкая шапка и текущая глава ===================== */
.header { position: sticky; top: 0; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
/* на вступлении шапки нет — только голос */
.header.is-intro { opacity: 0; transform: translateY(-100%); pointer-events: none; }
.header.is-intro * { visibility: hidden; transition: visibility 0s .7s; }
.nav a.is-current { color: var(--red); }

/* ===================== Узкие экраны для глав ===================== */
@media (max-width: 900px) {
  .cross { grid-template-columns: 1fr; max-width: 560px; }
  .dead-scene { --fh: min(calc(100svh - var(--header-h) - 250px), 62vw); }
  .tv-stage { --tw: min(78vw, calc(100svh - var(--header-h) - 420px)); align-items: start; padding-top: 20px; }
  .pcard-wrap { --cw: min(78vw, 360px); top: auto; bottom: 4%; height: calc(var(--cw) * .62); }
  .pcard-wrap--l, .pcard-wrap--r { left: 50%; right: auto; transform: translateX(-50%); }
  .pcard-wrap--l .pcard { --ry: 10deg; }
  .pcard-wrap--r .pcard { --ry: -10deg; }
  .countdown-scene { place-items: start center; }
  .clock-stage { margin-top: 18px; }
  .clock { --cw: min(56vw, 240px); }
  .count-wall { inset: auto 16px 4% 16px; height: 54%; column-count: 1; column-gap: 0; }
  .love-stage { --ph: min(calc(100svh - var(--header-h) - 430px), 380px); align-items: start; padding-top: 8px; }
  .love-col { top: auto; height: 40%; width: auto; left: 16px; right: 16px; }
  .love-col__inner { font-size: 16px; }
  .note { margin-top: 0; min-height: 0; }
  .letter { min-height: 0; }
  .chapter__aside, .chapter__aside--right { margin-left: 0; margin-right: 0; }
}


/* =========================================================
   ПЛЁНКА поверх всего лонгрида: зерно, светлые пылинки,
   виньетка, мерцание экспозиции, редкие царапины
   ========================================================= */
/* у обёртки нет своего слоя — иначе режим наложения смешивал бы зерно само с собой */
.film { position: static; pointer-events: none; }
.film > * { position: fixed; z-index: 300; pointer-events: none; }
/* зерно — маленькая готовая текстура, слой только сдвигается (это делает видеокарта, страница не перерисовывается) */
.film__grain, .film__specks {
  left: -64px;
  top: -64px;
  right: -64px;
  bottom: -64px;
  will-change: transform;
  backface-visibility: hidden;
}
.film__grain {
  background: url("assets/grain.png") repeat;
  background-size: 256px 256px;
  opacity: .55;
  animation: film-grain 1s steps(1) infinite;
}
/* светлое зерно видно и на чёрном */
.film__specks {
  background: url("assets/specks.png") repeat;
  background-size: 320px 320px;
  opacity: .22;
  animation: film-grain 1.4s steps(1) infinite reverse;
}
/* пока страницу прокручивают, зерно замирает — прокрутке достаётся вся мощность */
.film.is-scrolling > * { animation-play-state: paused; }
@keyframes film-grain {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-37px, 23px, 0); }
  33%  { transform: translate3d(29px, -41px, 0); }
  50%  { transform: translate3d(-17px, -26px, 0); }
  67%  { transform: translate3d(43px, 35px, 0); }
  83%  { transform: translate3d(-49px, 11px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.film__vignette {
  inset: 0;
  background:
    /* бока темнее, чем верх и низ */
    linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 7%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,.28) 93%, rgba(0,0,0,.62) 100%),
    radial-gradient(ellipse 105% 92% at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.38) 70%, rgba(0,0,0,.85) 100%);
  animation: film-flicker 5.3s steps(1) infinite;
}
@keyframes film-flicker {
  0% { opacity: 1; } 11% { opacity: .9; } 12% { opacity: 1; }
  43% { opacity: .94; } 44% { opacity: 1; } 71% { opacity: .86; } 72% { opacity: .97; } 73% { opacity: 1; }
}
/* скруглённые края экрана и блик выпуклого стекла */
.film__crt {
  inset: 0;
  border-radius: 4.5vmin / 5.5vmin;
  box-shadow: 0 0 0 30vmax #000, inset 0 0 6vmin rgba(0, 0, 0, .55), inset 0 0 1.2vmin rgba(0, 0, 0, .7);
  background: radial-gradient(ellipse 60% 45% at 32% 22%, rgba(255, 255, 255, .045), rgba(255, 255, 255, 0) 70%);
}
/* выпуклое стекло: центр светлее и «ближе», к краям — глубже и темнее */
.film__bulge {
  inset: 0;
  background:
    radial-gradient(ellipse 70% 62% at 50% 48%, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 140% 120% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .25) 80%, rgba(0, 0, 0, .45) 100%);
  mix-blend-mode: normal;
}
.film__scratch {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.35) 20%, rgba(255,255,255,.12) 60%, rgba(255,255,255,0));
  opacity: 0;
}
.film__scratch--a { left: 23%; animation: film-scratch 7s steps(1) infinite; }
.film__scratch--b { left: 71%; width: 2px; animation: film-scratch 11s steps(1) 3s infinite; }
@keyframes film-scratch {
  0%, 91%, 100% { opacity: 0; transform: translateX(0); }
  92% { opacity: .8; transform: translateX(0); }
  94% { opacity: .5; transform: translateX(14px); }
  96% { opacity: .9; transform: translateX(-9px); }
  98% { opacity: .3; transform: translateX(4px); }
}

/* ===================== Мобильные ===================== */
@media (max-width: 760px) {
  :root { --u: calc(100vw / 1000); }

  .nav {
    justify-content: flex-start;
    gap: 22px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }

  .hero { height: calc(1060 * var(--u)); }

  .marquee--left  { left: calc(-260 * var(--u)); }
  .marquee--right { right: calc(-330 * var(--u)); }
}

/* ===================== Меньше движения ===================== */
@media (prefers-reduced-motion: reduce) {
  .film__grain, .film__specks, .film__vignette, .film__scratch { animation: none; }
  .marquee__track { animation: none; }
  .ray { transition: opacity .3s ease; }
  .caret::after, .story__hint span { animation: none; }
  [data-reveal] { transition: none; opacity: 1; transform: none; }
  .entry__line, .entry__ask, .entry__note, .entry__figure, .marcher *, .tv, .tv-screen__track, .tv-glow, .pcard, .flash, .sms, .sms-caret, .credits__track { animation: none !important; }
  .tv-screen__content { transform: none; filter: none; }
  html.is-vanishing .header, html.is-vanishing .hero, html.is-vanishing .story, html.is-vanishing .chapters { animation-duration: .01s; }
}

/* =========================================================
   ТЕЛЕФОН: крупнее текст, компактнее шапка, удобнее касания
   ========================================================= */
@media (max-width: 760px) {
  :root { --header-h: 90px; }

  /* меню: крупные пункты, лента прокручивается пальцем, справа — затухание-подсказка */
  .nav {
    height: 42px;
    gap: 26px;
    padding: 0 18px;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent);
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
  }
  .nav a { font-size: 15px; line-height: 42px; scroll-snap-align: start; }
  .player { height: 48px; gap: 4px; }
  .player__title { font-size: 13px; }
  .player__controls { gap: 6px; }
  .player__btn { width: 44px; height: 26px; }

  /* вступление: без ручных переносов, нормальный размер */
  .story { padding: 32px 22px 0; }
  .story__stack { width: 100%; gap: 34px; }
  .story__block br { display: none; }
  .story__block--1 { font-size: 18px; line-height: 1.55; width: auto; }
  .story__block--2 { font-size: 21px; line-height: 1.3; width: auto; }
  .story__block--3 { font-size: 23px; line-height: 1.25; width: auto; }
  .story__block--4 { font-size: 30px; line-height: 1.08; width: auto; }
  .story__hint { font-size: 15px; bottom: 28px; }

  /* титры */
  .titles__about, .titles__people { font-size: 17px; }
  .titles__kicker { font-size: 14px; }

  /* заголовки глав и треки */
  .chapter__head--compact .chapter__title { font-size: 40px; line-height: 1; }
  .track-chip { font-size: 15px; max-width: calc(100vw - 32px); flex-wrap: wrap; row-gap: 2px; }
  .track-chip--small { font-size: 15px; }
  .track-chip__by, .track-chip__time { font-size: .8em; }

  /* записки «Парада» */
  .pcard__paper { font-size: 16px; }
  .pcard--big .pcard__paper { font-size: 21px; }

  /* стена текста за часами: только текущий абзац, читаемым размером */
  .count-wall { inset: auto 20px 5% 20px; height: 50%; font-size: 17px !important; line-height: 1.5; text-align: left; hyphens: manual; }
  .count-wall p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
  .count-wall p.is-past { opacity: 0; }
  .count-wall p { transition-duration: 1.4s; }

  /* телефон в «Я тебя не люблю»: крупнее, текст на экране — не меньше 11 px */
  .love-stage { --ph: min(calc(100svh - var(--header-h) - 360px), 420px); }
  .love-col { height: 36%; }
  .love-col__inner { font-size: 17px; line-height: 1.5; }
  .phone__screen { font-size: max(11px, calc(var(--pw) * .056)); }

  /* «Мама» и «Последнее слово» */
  .mama-line { font-size: 23px; line-height: 1.35; }
  .mama-line.is-last { font-size: 28px; }
  .last-line { font-size: 21px; line-height: 1.45; }
  .ask-btn { font-size: 18px; padding: .7em 1.4em; }

  /* вопрос и ответ */
  .question__line--1 { font-size: 19px; }
  .question__line--2 { font-size: 30px; }
  .question__yes { font-size: 22px; min-width: 5em; padding: .55em 1.4em; }
  .verdict__words p { font-size: 19px; }
  .verdict__words p.is-big { font-size: 27px; }

  /* источники и подвал */
  .sources__list { font-size: 17px; }
  .credits__names { font-size: 16px; }
}