/* Экран слоя 4 в главном макете: чёрная полоса во всю ширину окна, изображающая
   старый монохромный монитор. Собрано из макета эксперименты/матрица/монитор.html,
   принятого Павлом 27.08.2026. Раскладка экрана — ниже, стекло трубки — во второй
   половине файла.

   🚨 Правится здесь, а не в эксперименты/матрица/: та папка осталась стендом выбора. */

:root{
  /* Монохромный люминофор. Экран не берёт золото сайта: монитор должен быть
     одноцветным, иначе он читается как обычная тёмная секция, а не как дисплей.
     Иерархия держится на яркости одного тона, а не на разных цветах. */
  --экран-фон:#050806;
  --экран-текст:#cfe9d6;
  --экран-тихо:#8ab097;
  --экран-ярко:#6cf29a;
  --экран-глиф:#4e8f63;
  --экран-глиф-ярко:#9df0b6;
  --экран-свет:rgba(108,242,154,.30);
  --экран-линия:rgba(108,242,154,.55);
}

/* ── экран ───────────────────────────────────────────────────────────── */
/* 🚨 Секция — прямой ребёнок body шириной 100%: чёрное поле упирается ровно в срез
   левого и правого края окна, без полей и без горизонтальной прокрутки. 100vw здесь
   нельзя: он считает и полосу прокрутки, и справа вылезает лишняя щель. */
.экран{position:relative;width:100%;background:var(--экран-фон);color:var(--экран-текст);
  overflow:clip;overflow-clip-margin:0;isolation:isolate;
  /* 🚨 Своё поле у экрана небольшое: воздух между главами держит их собственный
     padding:64px 0, общий для всего сайта. Раньше здесь было наоборот — экран забирал
     поле себе, а главе оставлял 27px, и регресс справедливо ругался на «главы стоят
     вплотную»: ритм четвёртого слоя ломался ровно на чёрной полосе. */
  padding:clamp(14px,2.2vh,28px) 0}
/* 🚨 Ширина считается ПО ВНУТРЕННЕЙ полосе, а не по боксу. У светлых глав поле
   даёт .blk снаружи, а .blk-in внутри — ровно 1440 без отступов, и текст встаёт
   на 304 при окне 2048. Здесь отступ живёт на том же боксе, что и max-width,
   поэтому при box-sizing:border-box он съедал ширину изнутри: полоса выходила
   1312 вместо 1440 и левый край уезжал на 64 px правее соседних глав. Заметно
   от 1500 и шире, на 1440 и уже совпадало само. Поймано Павлом 03.09 на 2048.
   Прибавляем к пределу оба поля — тогда внутренняя полоса снова ровно 1440. */
.экран-нутро{position:relative;z-index:1;max-width:calc(1440px + 2*clamp(20px,4vw,64px));margin:0 auto;
  padding:0 clamp(20px,4vw,64px)}
.экран .chn{color:var(--экран-текст);text-shadow:0 0 10px var(--экран-свет)}
.экран .chln{background:var(--экран-ярко);box-shadow:0 0 8px var(--экран-свет)}
.экран .st4 b,.экран .st4 h4{color:var(--экран-текст);text-shadow:0 0 9px var(--экран-свет)}
.экран .st4 span{color:var(--экран-тихо)}
.экран .bignum{color:var(--экран-ярко);text-shadow:0 0 16px var(--экран-свет)}
.экран .bignum small{color:var(--экран-тихо);text-shadow:none}

/* канвас полосы шума развёртки: над текстом, под стеклом */
.экран-шум{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* стекло: только рисует, событий не ест — иначе наведение на блок не сработает */
.экран-стекло{position:absolute;inset:0;z-index:4;pointer-events:none}
.экран-стекло i{position:absolute;inset:0;display:block;pointer-events:none}

/* машинный слой строит движок; здесь только его типографика */
.слой-машина{position:absolute;inset:0;z-index:2;margin:0;pointer-events:none;
  font:400 13px/1.62 ui-monospace,'SF Mono',Menlo,monospace;letter-spacing:.02em;
  color:var(--экран-глиф);background:var(--экран-фон);white-space:pre;overflow:hidden}
.слой-машина b{font-weight:400;color:var(--экран-глиф-ярко)}


/* В v1.html крупная цифра выезжает по наблюдателю и до него держит opacity:0.
   На экране её выход — сама развёртка, поэтому она видна с первого кадра. */
.экран .bignum{opacity:1;transform:none}

@media (max-width:900px){
  .экран .chap{grid-template-columns:1fr}
}

/* корпус.css — стекло монитора и ничего кроме него.
   Задача файла одна: чёрный прямоугольник во всю ширину окна должен читаться как
   выпуклая трубка монохромного дисплея, а не как тёмная секция лендинга.
   Раскладка, цвета контента и типографика живут в монитор.css — сюда не переносить.
   Вне стекла файл трогает одно: набор переменных на самой секции .экран, где висит
   data-сила. Объявить их больше негде, и ничего кроме них там нет.

   Приём везде один: полупрозрачные градиенты поверх готовой картинки. Тёмные слои
   пишутся чистым rgba(0,0,0,α) без mix-blend-mode — над непрозрачной подложкой чёрное
   наложение даёт ровно тот же результат, что multiply, и переживает стекинг-контексты,
   которые создают фильтры соседних слоёв. */

/* ── три силы ────────────────────────────────────────────────────────────
   Слои описаны по одному разу, различия живут только в этих переменных.
   тихий   — страховка на случай «эффект спорит с текстом»: почти сухая статика.
   средний — рабочий режим; он же набор по умолчанию, поэтому отдельного селектора
             под него нет: экран без атрибута обязан выглядеть рабочим, а не голым.
   полный  — заметная трубка: сильная виньетка, глубокая развёртка, двоение растра. */
.экран{
  --реш-альфа:.09;      /* апертурная решётка — вертикальные щели маски */
  --разв-альфа:.17;     /* строчная развёртка, частая, шаг 3px */
  --разв2-альфа:.06;    /* вторая, редкая волна шагом 9px — она даёт глубину */
  --прокат-альфа:.045;  /* полоса кадровой развёртки */
  --прокат-время:11s;
  --прокат-имя:прокат;
  --прокат-показ:block; /* полосу гасим display'ем, а не нулевой альфой: невидимый слой
                           с will-change всё равно держит слой композитора */
  --блик-альфа:.04;     /* отражение в стекле; выше .05 читается как фара */
  --вин:.5;             /* затемнение к краям */
  --кромка:.72;         /* плотность самой кромки трубки */
  --налёт:3%;           /* люминофорное свечение всего поля */
  --радиус:clamp(16px,2.2vw,38px);
  --отступ-кромки:7px 9px;   /* контур трубки не лежит впритык к срезу окна */
  --хром:none;          /* двоение растра: display слоёв, только на «полном» */
  --дрожь-имя:дрожь;
  --дрожь-период:7s;
}

.экран[data-сила="тихий"]{
  --реш-альфа:.045; --разв-альфа:.09; --разв2-альфа:.028;
  --прокат-альфа:0; --прокат-имя:none; --прокат-показ:none;
  --блик-альфа:.022; --вин:.34; --кромка:.55; --налёт:2%;
  --дрожь-имя:none;
}

.экран[data-сила="полный"]{
  --реш-альфа:.13; --разв-альфа:.26; --разв2-альфа:.095;
  --прокат-альфа:.062; --прокат-время:9s;
  --блик-альфа:.05; --вин:.66; --кромка:.86; --налёт:4.2%;
  --хром:block; --дрожь-имя:дрожь-сильная; --дрожь-период:6s;
}

/* ── стекло целиком: налёт и дрожь яркости ───────────────────────────────
   Тонкая зелёная дымка по центру: у настоящей трубки светится не только глиф, но и
   весь слой люминофора вокруг него. Без неё чёрный фон остаётся «краской», с ней —
   стеклом, за которым что-то горит. Цвет берётся из токена монитор.css и разбавляется
   color-mix — своих оттенков файл не заводит.

   Здесь же сидит дрожь: backdrop-filter, а не filter — filter красит сам слой, а он
   почти прозрачный, эффекта ноль. Период семь секунд и амплитуда в полтора процента —
   дыхание блока питания, а не мигание: фликер с частотой кадра выглядит сломанным
   монитором и через минуту чтения даёт резь в глазах. */
.экран-стекло{
  background:
    radial-gradient(78% 118% at 50% 44%,
      color-mix(in srgb, var(--экран-ярко) var(--налёт), transparent) 0%,
      transparent 72%);
  animation:var(--дрожь-имя) var(--дрожь-период) ease-in-out infinite;
}

/* 🚨 Стекло не имеет права есть события мыши: на .экран висит триггер прогона по
   наведению, и стоит любому слою стать мишенью — курсор до секции не доходит вовсе.
   Свойство наследуется, но перечислено явно по всем детям и псевдоэлементам: цена
   ошибки — молча неработающий эффект, который никто не свяжет со стеклом. */
.экран-стекло,
.экран-стекло>i,
.стекло-развёртка::before, .стекло-развёртка::after,
.стекло-кромка::before,   .стекло-кромка::after{pointer-events:none}

/* ── 1. апертурная решётка ───────────────────────────────────────────────
   Вертикальная маска шагом 3px тремя разными по плотности щелями: ровный частокол
   одинаковых линий даёт мёртвый муар, чуть разная плотность — рисунок триады.
   Над чёрным фоном слой невидим и проявляется только на светящемся тексте — это и
   есть поведение настоящей маски. */
.стекло-решётка{
  background-image:repeating-linear-gradient(90deg,
    rgba(0,0,0,var(--реш-альфа)) 0 1px,
    rgba(0,0,0,calc(var(--реш-альфа) * .45)) 1px 2px,
    rgba(0,0,0,0) 2px 3px);
}

/* ── 2. строчная развёртка ───────────────────────────────────────────────
   Две частоты сразу. Частая (3px) даёт саму строку, редкая (9px) — мягкую волну
   поперёк экрана: одна частота выглядит наклейкой, две читаются как объём. */
.стекло-развёртка{
  background-image:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,var(--разв-альфа)) 0 1px,
      rgba(0,0,0,0) 1px 3px),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,var(--разв2-альфа)) 0,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 5px,
      rgba(0,0,0,var(--разв2-альфа)) 9px);
}

/* Двоение по горизонтали, только на «полном». Настоящей цветовой аберрации тут взяться
   неоткуда — экран одноцветный, поэтому двоение делается сдвигом по фазе. Оба слоя
   берут картинку под собой, размывают и правят яркость, но сняты полосатыми масками
   в противофазе: на одних колонках глиф светлеет, на соседних гаснет, и у буквы
   вырастает вторая кромка со сдвигом в пару пикселей. Чёрное поле остаётся чёрным —
   размытый ноль остаётся нулём; обычный оверлей покрасил бы всю плоскость и превратил
   экран в зелёную сетку поверх пустоты. Выключается через display, а не прозрачностью:
   слой с opacity:0 всё равно заставляет считать фильтр на весь блок каждый кадр. */
.стекло-развёртка::before,
.стекло-развёртка::after{
  content:'';display:var(--хром);position:absolute;inset:0;
}
.стекло-развёртка::before{
  -webkit-backdrop-filter:blur(1.4px) brightness(1.16);
  backdrop-filter:blur(1.4px) brightness(1.16);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,0) 2px 4px);
  mask-image:repeating-linear-gradient(90deg,#000 0 2px,rgba(0,0,0,0) 2px 4px);
  opacity:.7;
}
.стекло-развёртка::after{
  -webkit-backdrop-filter:blur(1.1px) brightness(.9);
  backdrop-filter:blur(1.1px) brightness(.9);
  -webkit-mask-image:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 2px,#000 2px 4px);
  mask-image:repeating-linear-gradient(90deg,rgba(0,0,0,0) 0 2px,#000 2px 4px);
  opacity:.5;
}

/* ── 3. прокат кадровой развёртки ────────────────────────────────────────
   Светлая полоса, медленно уходящая сверху вниз: несинхронный кадровый импульс.
   Медленно и еле заметно — быстрый яркий прокат превращает экран в стробоскоп.
   Специфичность поднята через родителя: в монитор.css у всех слоёв inset:0, а этой
   полосе нужна своя высота. */
.экран-стекло .стекло-прокат{
  display:var(--прокат-показ);
  inset:0 0 auto 0;height:18%;
  background-image:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,calc(var(--прокат-альфа) * .5)) 38%,
    rgba(255,255,255,var(--прокат-альфа)) 52%,
    rgba(255,255,255,0) 100%);
  animation:var(--прокат-имя) var(--прокат-время) linear infinite;
  will-change:transform;
}
@keyframes прокат{
  from{transform:translate3d(0,-100%,0)}
  to{transform:translate3d(0,660%,0)}
}

/* ── 4. блик на стекле ───────────────────────────────────────────────────
   Широкое диагональное отражение в левом верхнем углу. Держится ниже .05 по альфе:
   стекло отражает комнату слабо, всё, что ярче, читается как источник света в кадре
   и сразу съедает первые строки текста. */
.стекло-блик{
  background-image:
    linear-gradient(122deg,
      rgba(255,255,255,var(--блик-альфа)) 0%,
      rgba(255,255,255,calc(var(--блик-альфа) * .4)) 16%,
      rgba(255,255,255,0) 44%),
    radial-gradient(130% 90% at 16% 4%,
      rgba(255,255,255,calc(var(--блик-альфа) * .7)) 0%,
      rgba(255,255,255,0) 62%);
}

/* ── 5. виньетка ─────────────────────────────────────────────────────────
   Эллипс, а не круг: у трубки радиус кривизны по горизонтали меньше, поэтому к
   левому и правому краю картинка уходит в темноту заметно раньше, чем к верхнему
   и нижнему. Отсюда радиус по X (66%) вдвое меньше радиуса по Y (128%).
   Прозрачная зона доведена до 46%: дальше начинается текстовая колонка, а ранний старт
   затемнения превращает абзацы в серую кашу. */
.стекло-виньетка{
  background-image:radial-gradient(66% 128% at 50% 50%,
    rgba(0,0,0,0) 46%,
    rgba(0,0,0,calc(var(--вин) * .42)) 78%,
    rgba(0,0,0,var(--вин)) 100%);
}

/* ── 6. кромка трубки ────────────────────────────────────────────────────
   Четыре плотных градиента по краям. Сверху и снизу полосы шире (62px), слева и
   справа уже (30px): так на трубке и есть — по вертикали изображение заваливается
   плавно, по горизонтали обрезается почти сразу за краем маски. */
.стекло-кромка{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,var(--кромка)) 0,
      rgba(0,0,0,calc(var(--кромка) * .38)) 16px, rgba(0,0,0,0) 62px),
    linear-gradient(0deg,   rgba(0,0,0,var(--кромка)) 0,
      rgba(0,0,0,calc(var(--кромка) * .38)) 16px, rgba(0,0,0,0) 62px),
    linear-gradient(90deg,  rgba(0,0,0,var(--кромка)) 0,
      rgba(0,0,0,calc(var(--кромка) * .34)) 8px, rgba(0,0,0,0) 30px),
    linear-gradient(270deg, rgba(0,0,0,var(--кромка)) 0,
      rgba(0,0,0,calc(var(--кромка) * .34)) 8px, rgba(0,0,0,0) 30px);
}

/* Контур самой трубки. Волосяная зелёная линия по скруглённому прямоугольнику плюс
   мягкая тень внутрь: линия показывает, где кончается люминофор, тень гасит углы
   сильнее середины стороны — вместе глаз достраивает выпуклое стекло. Контур отодвинут
   от края блока на несколько пикселей: он должен читаться как кромка экрана, а не как
   рамка секции, приклеенная к светлым главам сверху и снизу. */
.стекло-кромка::before{
  content:'';position:absolute;inset:var(--отступ-кромки);border-radius:var(--радиус);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--экран-ярко) 12%, transparent),
    inset 0 0 30px 8px rgba(0,0,0,calc(var(--кромка) * .55)),
    inset 0 0 110px 34px rgba(0,0,0,calc(var(--кромка) * .38));
}

/* А это сам срез трубки. Внешняя тень цвета фона вокруг скруглённого прямоугольника
   закрашивает ровно те четыре уголка, которые остались снаружи радиуса, — изображение
   выходит обрезанным овалом, а не линейкой. Наружу тень не вылезает: .экран режет
   себя overflow:clip, поэтому горизонтальной прокрутки она не создаёт. */
.стекло-кромка::after{
  content:'';position:absolute;inset:var(--отступ-кромки);border-radius:var(--радиус);
  box-shadow:0 0 10px 70px var(--экран-фон);
}

@keyframes дрожь{
  0%,100%{-webkit-backdrop-filter:brightness(.985);backdrop-filter:brightness(.985)}
  38%    {-webkit-backdrop-filter:brightness(1.015);backdrop-filter:brightness(1.015)}
  71%    {-webkit-backdrop-filter:brightness(.994);backdrop-filter:brightness(.994)}
}
@keyframes дрожь-сильная{
  0%,100%{-webkit-backdrop-filter:brightness(.972);backdrop-filter:brightness(.972)}
  34%    {-webkit-backdrop-filter:brightness(1.028);backdrop-filter:brightness(1.028)}
  67%    {-webkit-backdrop-filter:brightness(.99);backdrop-filter:brightness(.99)}
}

/* ── покой ───────────────────────────────────────────────────────────────
   Движение убирается целиком, статика остаётся: без проката и дрожи блок всё равно
   читается как монитор — за это отвечают решётка, развёртка, виньетка и кромка.
   🚨 !important не украшение: набор «полного» объявлен на .экран[data-сила="полный"] и по
   специфичности бьёт правило на голом .экран в любом медиа-блоке. Без флага на «полном»
   шли и дрожь, и прокат — человек получал ровно то, от чего защищался. */
@media (prefers-reduced-motion:reduce){
  /* флаг data-движение="да" ставит страница, когда системный запрет сознательно
     обходится ради просмотра макета — без него эффект нельзя увидеть вообще никак */
  html:not([data-движение="да"]) .экран{
    --дрожь-имя:none!important;
    --прокат-имя:none!important;
    --прокат-показ:none!important;
  }
}

/* На узком экране трубка меньше: кромка и радиус, посчитанные под 1440px, съедают
   поле с текстом, поэтому полосы поджимаются. */
@media (max-width:900px){
  .экран{--радиус:12px;--отступ-кромки:5px 5px}
  .стекло-кромка{
    background-image:
      linear-gradient(180deg, rgba(0,0,0,var(--кромка)) 0,
        rgba(0,0,0,calc(var(--кромка) * .38)) 10px, rgba(0,0,0,0) 38px),
      linear-gradient(0deg,   rgba(0,0,0,var(--кромка)) 0,
        rgba(0,0,0,calc(var(--кромка) * .38)) 10px, rgba(0,0,0,0) 38px),
      linear-gradient(90deg,  rgba(0,0,0,var(--кромка)) 0, rgba(0,0,0,0) 16px),
      linear-gradient(270deg, rgba(0,0,0,var(--кромка)) 0, rgba(0,0,0,0) 16px);
  }
  .стекло-кромка::after{box-shadow:0 0 8px 40px var(--экран-фон)}
}