/* ═══════════════════════════════════════════════════════════════════════
«КИНО» — седьмая версия витрины.
ФИШКА ВЕРСИИ — ВИДЕО, КОТОРЫМ УПРАВЛЯЕТ ПАЛЕЦ. Первый экран — фильм во
весь кадр, и идёт он не сам: его двигает прокрутка, вперёд и назад.
Потом фильм уходит внутрь букв названия салона и садится заголовком.
Приём снят с живой страницы MacBook Pro (26.09.2026): чёрный слой с
белыми буквами в режиме multiply поверх видео — чёрное гасит кадр,
белое пропускает. Одно смешивание слоёв, без покадровых расчётов,
поэтому работает и на телефоне.
МЕРКИ ВЗЯТЫ С APPLE, А НЕ НА ГЛАЗ (замер 26.09.2026, 15 страниц):
• текст входит сдвигом 30px: задержка 0,19 с, сдвиг 0,67 с по
cubic-bezier(.4,0,.6,1), прозрачность 0,86 с — она отстаёт от
сдвига, отсюда «проявление», а не прыжок;
• стекло шапки — blur(20px) saturate(1.8) поверх 72–80 % фона,
мелкие капсулы — blur(7px);
• карточки 28px, пилюли 980px, интерфейс 0,32 с по той же кривой;
• на телефоне Apple держит ОДНУ закреплённую сцену, дальше лёгкий
ритм появлений — так и здесь.
РАЗМЫТИЕ ТОЛЬКО НА НЕПОДВИЖНОМ. backdrop-filter на движущемся слое
пересчитывается каждый кадр и роняет частоту (см. nexo_glass.css).
Поэтому стекло — у шапки, нижней полосы и листа записи; сцена с видео
его не несёт вовсе. Размытое видео — отдельный маленький файл, а не
фильтр: фильтр на полноэкранном видео греет телефон.
═══════════════════════════════════════════════════════════════════════ */
:root{
--paper:#000;
--paper-2:#0a0a0b;
--card:#161617;
--card-2:#1d1d1f;
--ink:#f5f5f7;
--ink-2:#a1a1a6;
--ink-3:#6e6e73;
--line:rgb(255 255 255 / .14);
--line-2:rgb(255 255 255 / .08);
--glass:rgb(22 22 23 / .72);
--glass-chip:rgb(42 42 45 / .72);
/* Цвет салона — ровно на одной вещи экрана: на главной кнопке. */
--accent:#f5f5f7;
--accent-ink:#000;
/* Цвет кадра: подписи, линии и свечение страницы — того же тона, что
фильм под ней. Свой у каждого фильма — ниже, по data-film. */
--film:150 150 160;
--film-light:220 220 228;
--ease:cubic-bezier(.4,0,.6,1);
--ease-out:cubic-bezier(0,0,.5,1);
--r-card:28px;
--r-pill:980px;
--pad:22px;
--safe-b:env(safe-area-inset-bottom,0px);
--safe-t:env(safe-area-inset-top,0px);
color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{overflow-x:clip}
body{
margin:0;background:var(--paper);color:var(--ink);
font:400 17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
letter-spacing:-.022em;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit}
img,video{display:block;max-width:100%}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ── Пилюли ─────────────────────────────────────────────────────────── */
.pill{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
min-height:48px;padding:0 24px;border-radius:var(--r-pill);border:0;cursor:pointer;
font-size:17px;font-weight:500;letter-spacing:-.02em;white-space:nowrap;text-decoration:none;
transition:transform .32s var(--ease),background-color .32s var(--ease),opacity .32s var(--ease);
}
.pill:active{transform:scale(.97)}
.pill--main{background:var(--accent);color:var(--accent-ink)}
.pill--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .38)}
.pill--glass{background:var(--glass-chip);color:var(--ink);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.pill--sm{min-height:36px;padding:0 16px;font-size:15px}
.pill:focus-visible,.chip:focus-visible,.dot:focus-visible,.round:focus-visible{
outline:2px solid var(--ink);outline-offset:3px}
.pill[disabled]{opacity:.4;pointer-events:none}
/* ЦВЕТ ФИЛЬМА — ПОСЧИТАН ЗАРАНЕЕ, А НЕ СНИМАЕТСЯ С ВИДЕО.
Раньше страница раз в полсекунды рисовала кадр в холст, читала пиксели
и переписывала цвет на корне документа. Чтение пикселей видео ждёт
видеокарту, а смена переменной на корне пересчитывает стили всей
страницы и перерисовывает тень огромного названия — дважды в секунду
был рывок, который владелец заметил на глаз: «что-то лагает». Средний
тон каждого фильма тот же, что считал скрипт (светлое без чёрного,
насыщенность ×1,6), только один раз и на этой машине. */
body[data-film="peony"]{--film:111 117 119;--film-light:190 193 194}
body[data-film="bloom"]{--film:96 132 176;--film-light:186 202 222}
body[data-film="marble"]{--film:229 230 180;--film-light:243 244 221}
body[data-film="smoke"]{--film:56 56 56;--film-light:165 165 165}
/* ═══ ГЛАВНАЯ СЦЕНА ══════════════════════════════════════════════════ */
/* Один экран: обложка уходит обычной прокруткой, сразу за ней — услуги.
Было 220svh с буквами-окном: два экрана чёрного перехода до
содержимого (владелец, 26.09: «хочет поскорее посмотреть, что внутри»). */
.kino{position:relative;z-index:1;height:100svh}
.kino-stage{
position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate;
}
/* Первый кадр вшит сервером — он и фон контейнера фильма. */
/* Низ кадра тает в тот же фильм под страницей: при уходе обложки нет
резкой черты между чётким и размытым, а под именем — мягкий фон. */
.kino-film{position:absolute;inset:0;z-index:0;background:#000 center/cover no-repeat;will-change:opacity;
-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%)}
.kino-v{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .6s var(--ease);
}
.kino-v.is-on{opacity:1}
/* Фильм картинкой (запуск видео запрещён) — на месте видео, тем же кадром. */
img.kino-v,img.reel-v{max-width:none}
.aura img.is-img{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover}
/* Размытое — маленький файл, растянутый на весь кадр. Чуть крупнее
кадра, иначе по краям видна размытая граница. */
.kino-v--blur{transform:scale(1.08)}
/* Тень под текстом: снизу и немного сверху, середина кадра чистая. */
.kino-shade{
position:absolute;inset:0;z-index:1;pointer-events:none;
background:
linear-gradient(180deg,rgb(0 0 0 / .42) 0%,rgb(0 0 0 / 0) 22%,rgb(0 0 0 / 0) 48%,rgb(0 0 0 / .72) 100%);
}
/* «Мрамор» почти белый: белая шапка на нём терялась (проверка 26.09,
контраст ниже 2,5:1). Тень сверху плотнее — только у светлого фильма,
остальным кадр остаётся чистым. */
body[data-film="marble"] .kino-shade{
background:
linear-gradient(180deg,rgb(0 0 0 / .6) 0%,rgb(0 0 0 / .2) 14%,rgb(0 0 0 / 0) 28%,rgb(0 0 0 / 0) 44%,rgb(0 0 0 / .76) 100%);
}
.kino-top{
text-shadow:0 1px 10px rgb(0 0 0 / .3);
position:absolute;z-index:3;left:0;right:0;top:0;
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:calc(var(--safe-t) + 16px) var(--pad) 0;
font-size:12px;letter-spacing:.02em;color:rgb(255 255 255 / .82);
}
.kino-mark{font-weight:600;font-size:15px;letter-spacing:-.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kino-meta{text-align:right;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
.kino-copy{
position:absolute;z-index:3;left:0;right:0;bottom:0;
padding:0 var(--pad) calc(var(--safe-b) + 28px);
will-change:transform,opacity;
}
.kino-kicker{margin:0 0 10px;font-size:15px;font-weight:600;color:rgb(255 255 255 / .74)}
.kino-name{
margin:0;color:#fff;font-weight:700;line-height:.94;letter-spacing:-.04em;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Roboto,Arial,sans-serif;
font-size:clamp(44px,15vw,112px);text-wrap:balance;overflow-wrap:anywhere;
}
.kino-lede{margin:14px 0 0;max-width:34ch;font-size:17px;line-height:1.4;color:rgb(255 255 255 / .82)}
.kino-lede:empty{display:none}
.kino-cta{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.kino-free{font-size:14px;color:rgb(255 255 255 / .78)}
/* ЗАПУСК ЗАПРЕЩЁН — КАДР ДЫШИТ. Айфон в энергосбережении не даёт видео
начаться без касания; анимация CSS там работает. Медленный наплыв —
как первые секунды фильма, а не стоп-кадр. Видео пошло — класс снят. */
@keyframes наплыв{from{transform:scale(1)}to{transform:scale(1.1)}}
body.is-still .kino-film{animation:наплыв 16s var(--ease) infinite alternate}
body.is-still .aura{animation:наплыв 22s var(--ease) infinite alternate}
/* ═══ ФИЛЬМ ПОД СТРАНИЦЕЙ ════════════════════════════════════════════ */
/* Высота — «большой» экран (lvh), а не inset:0. На iPhone адресная строка
прячется при прокрутке, окно растёт, и слой с inset:0 пересчитывал
масштаб видео на ходу — фон вздрагивал. lvh от строки не зависит. */
.aura{position:fixed;left:0;top:0;width:100%;height:100vh;height:100lvh;z-index:0;overflow:hidden;background:#000 center/cover no-repeat;pointer-events:none}
/* Шире кадра на 12 %, чтобы размытые края ушли за рамку. max-width
снят: общее правило для видео ужимало слой до ширины экрана, а сдвиг
влево оставался — справа открывалась голая чёрная полоса. */
.aura video{position:absolute;left:-6%;top:-6%;width:112%;height:112%;max-width:none;object-fit:cover;opacity:0;transition:opacity .8s var(--ease)}
.aura video.is-on{opacity:1}
/* Приглушение: текст обязан читаться поверх любого кадра, но фильм
должен оставаться видно живым. Глубина задаётся из JS по разделу. */
.aura::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgb(0 0 0 / var(--dim-top,.46)),rgb(0 0 0 / var(--dim-bottom,.62)))}
/* «Мрамор» почти белый: под обычным приглушением белый текст разделов
читался серым по серому. Ему — глубже. */
body[data-film="marble"] .aura{--dim-top:.62;--dim-bottom:.72}
/* Зерно — обычным наложением и ровно по экрану. Было inset:-50% (в
четыре раза больше экрана) и mix-blend-mode: смешивание поверх всего
заставляло браузер пересобирать весь экран с видео под ним на каждом
кадре прокрутки. */
.grain{
position:fixed;inset:0;z-index:30;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml;utf8,");
}
/* ═══ ШАПКИ НЕТ ═════════════════════════════════════════════════════
Верхняя полоса с именем и «Записаться» повторяла нижнюю: две кнопки
записи на одном экране. Владелец: «эту штуку сверху убери». Запись —
в нижней полосе, имя салона — в самом фильме. */
/* ═══ РАЗДЕЛЫ ════════════════════════════════════════════════════════ */
main{position:relative;z-index:1;background:transparent}
/* Разделы — один поток без крупных заголовков: подпись мелким капсом и
сразу содержимое. Прайс стоит вплотную к обложке. */
.act{padding:64px var(--pad) 8px;max-width:980px;margin:0 auto}
.act--price{padding-top:36px}
.cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 18px;
font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.3;
color:rgb(var(--film-light))}
.cap span{letter-spacing:.12em;color:var(--ink-2)}
/* Появление — мерки Apple. Одноразовое: вернулся — уже на месте. */
/* Плюс дымка: строка выходит из размытия в резкость — тот же язык, что у
фильма под страницей. Размытие короче прозрачности, чтобы текст успел
стать резким раньше, чем полностью проявится. */
/* Без дымки. Размытие на каждой появляющейся строке — это фильтр на
слое поверх играющего видео, по десятку строк сразу: на телефоне он
съедал кадры ровно в момент прокрутки. Подъём и прозрачность — мерки
Apple — работают на видеокарте и ничего не стоят. */
.rise{opacity:0;transform:translate3d(0,30px,0)}
/* С разных сторон: подписи — слева, строки — справа, кнопки, карточки и
лица — из глубины. Кривая с долгим хвостом: быстро выходит и мягко
встаёт. Только сдвиг и прозрачность — видеокарта, без перерасчёта. */
.from-l{opacity:0;transform:translate3d(-44px,0,0)}
.from-r{opacity:0;transform:translate3d(52px,0,0)}
.pop{opacity:0;transform:scale(.84)}
.rise.in,.from-l.in,.from-r.in,.pop.in{
opacity:1;transform:none;
transition:transform .9s cubic-bezier(.16,1,.3,1) var(--d,.12s),opacity .7s var(--ease) var(--d,.12s);
}
/* ── Услуги ─────────────────────────────────────────────────────────── */
/* Разделы прайса — кнопки, которые переносятся на новую строку: ни одно
название не уходит за край. Выбранный — светлый, остальные — стекло. */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
/* Невыбранный раздел — тёмное стекло: на светлом «Мраморе» белая
подпись на белёсом стекле пропадала целиком (проверка 27.09). */
.cat{min-height:38px;padding:0 16px;border-radius:var(--r-pill);border:0;cursor:pointer;
background:rgb(0 0 0 / .3);color:rgb(255 255 255 / .9);font-size:15px;font-weight:500;letter-spacing:-.01em;
box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .16);
transition:background-color .32s var(--ease),color .32s var(--ease)}
.cat.is-on{background:var(--ink);color:#000;box-shadow:none}
.cat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chip{
flex:none;min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;cursor:pointer;
background:rgb(0 0 0 / .3);color:var(--ink);font-size:15px;font-weight:500;
box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .14);
transition:background-color .32s var(--ease),color .32s var(--ease);
}
.chip.is-on{background:var(--ink);color:#000}
.menu{list-style:none;margin:8px 0 0;padding:0;transition:opacity .24s var(--ease)}
.menu.is-swap{opacity:0}
.row{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
width:100%;padding:18px 0;border:0;border-bottom:1px solid rgb(255 255 255 / .12);background:none;
text-align:left;cursor:pointer;
}
.row-shot{width:64px;height:64px;border-radius:16px;overflow:hidden;background:var(--card-2) center/cover}
.row-shot img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s var(--ease)}
.row-shot img.here{opacity:1}
.row-none{width:0}
.row-t b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.row-t small{display:block;margin-top:3px;font-size:14px;line-height:1.35;color:rgb(255 255 255 / .66);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.row-t em{display:block;margin-top:6px;font-style:normal;font-size:14px;color:rgb(var(--film-light) / .9)}
.row-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.row-r s{text-decoration:none;font-size:17px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.round{
width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
background:rgb(255 255 255 / .12);color:var(--ink);box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .16);
transition:background-color .32s var(--ease),transform .32s var(--ease);
}
.round svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.row.is-on .round{background:var(--accent);color:var(--accent-ink);transform:rotate(45deg)}
/* ── Фильм раскрывается по прокрутке ─────────────────────────────── */
.reel{position:relative;z-index:1;height:210svh;margin-top:48px}
/* Низ сцены тает: раскрытый фильм уходит вверх не чертой по экрану, а
в тот же фильм под страницей. Маленькая рамка до маски не достаёт. */
.reel-stage{position:sticky;top:0;height:100svh;overflow:hidden;
-webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
.reel-frame{position:absolute;inset:0;overflow:hidden;border-radius:50px;transform:scale(.64);
transform-origin:50% 50%;background:#000 center/cover no-repeat;will-change:transform;
box-shadow:0 30px 80px -30px rgb(0 0 0 / .8)}
.reel-v{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.reel-shade{position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgb(0 0 0 / 0) 45%,rgb(0 0 0 / .55))}
.reel-say{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--safe-b) + 116px);margin:0;opacity:0;
font-size:clamp(28px,8vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.035em;text-wrap:balance;color:#fff;
font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Roboto,Arial,sans-serif}
body.is-still .reel-v{animation:наплыв 16s var(--ease) infinite alternate}
/* ── Работы: лента карточек, текст поверх снимка или видео ─────────── */
.rail{
display:flex;gap:14px;margin:32px calc(var(--pad) * -1) 0;padding:0 var(--pad);
overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
}
.rail::-webkit-scrollbar{display:none}
.tile{
position:relative;flex:none;width:min(78vw,420px);aspect-ratio:3/4;border-radius:var(--r-card);
overflow:hidden;background:var(--card) center/cover;scroll-snap-align:center;
}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(180deg,rgb(0 0 0 / .52),rgb(0 0 0 / 0) 42%)}
.tile-t{position:absolute;z-index:1;left:24px;right:24px;top:24px}
.tile-t b{display:block;font-size:21px;line-height:1.19;font-weight:600;letter-spacing:-.02em}
.tile-t span{display:block;margin-top:6px;font-size:15px;line-height:1.35;color:rgb(255 255 255 / .82)}
.player{display:flex;justify-content:center;gap:12px;margin-top:22px}
.dots{display:flex;align-items:center;gap:10px;min-height:56px;padding:0 22px;border-radius:var(--r-pill);background:var(--glass-chip);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.dot{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:rgb(255 255 255 / .42);cursor:pointer;
transition:width .32s var(--ease),background-color .32s var(--ease)}
.dot.is-on{width:32px;background:rgb(255 255 255 / .92)}
.player .round{width:56px;height:56px;background:var(--glass-chip);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.player .round svg{width:16px;height:16px;fill:currentColor;stroke:none}
/* ── Отзывы ─────────────────────────────────────────────────────────── */
.quote{margin:28px 0 0;font-size:24px;line-height:1.3;font-weight:600;letter-spacing:-.025em}
.quote cite{display:block;margin-top:14px;font-size:15px;font-style:normal;font-weight:400;color:var(--ink-2)}
/* ── Титры ─────────────────────────────────────────────────────────── */
.credits{max-width:560px;margin:0 auto;padding:88px var(--pad) 0;text-align:center}
.credits > .cap{justify-content:center}
.credits-word{margin:0 auto;max-width:34ch;font-size:17px;line-height:1.5;color:rgb(255 255 255 / .78);
white-space:pre-line;text-wrap:pretty;overflow-wrap:anywhere}
.credits-crew{margin-top:48px}
.credit{display:flex;flex-direction:column;align-items:center;padding:28px 0;border-top:1px solid rgb(255 255 255 / .12)}
.credit:first-child{border-top:0;padding-top:0}
.face-shot{width:84px;height:84px;border-radius:50%;overflow:hidden;margin-bottom:16px;display:grid;place-items:center;
background:rgb(var(--film) / .35) center/cover;font-size:34px;font-weight:700;color:rgb(var(--film-light))}
.face-shot img{width:100%;height:100%;object-fit:cover}
.credit small{max-width:32ch;font-size:11px;font-weight:600;letter-spacing:.22em;line-height:1.5;text-transform:uppercase;
color:rgb(var(--film-light))}
.credit b{display:block;margin-top:6px;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.credit p{margin:10px auto 0;max-width:34ch;font-size:15px;line-height:1.45;color:var(--ink-2)}
.credit .pill{margin-top:16px}
.credits-list{margin:44px 0 0;padding:0}
.credits-list div{padding:18px 0;border-top:1px solid rgb(255 255 255 / .12)}
.credits-list dt{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--film-light))}
.credits-list dd{margin:6px 0 0;font-size:17px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.credits-list a{text-decoration:none}
.credits-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.credits .go{margin-top:28px}
.credits .linkish{margin:24px auto 0;text-align:center}
.foot{padding:48px var(--pad) calc(var(--safe-b) + 128px);text-align:center;font-size:12px;color:rgb(255 255 255 / .45)}
.foot a{text-decoration:none;color:var(--ink-2)}
/* ── Ваши записи ───────────────────────────────────────────────────── */
.visit{margin-top:14px;padding:18px;border-radius:24px;
background:linear-gradient(180deg,rgb(255 255 255 / .11),rgb(255 255 255 / .05));
box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .18),inset 0 1px 0 rgb(255 255 255 / .14)}
.visit-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.visit-top b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.badge{font-size:13px;color:rgb(var(--film-light))}
.visit-pay{margin:8px 0 0;font-size:14px;line-height:1.4;color:rgb(255 255 255 / .72)}
.visit-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
/* ── Карточки абонементов и партнёров ──────────────────────────────── */
.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:28px}
.card{display:flex;flex-direction:column;gap:6px;padding:20px;border-radius:24px;text-decoration:none;
background:linear-gradient(180deg,rgb(255 255 255 / .1),rgb(255 255 255 / .05));
box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .16),inset 0 1px 0 rgb(255 255 255 / .12)}
.card b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.card span{font-size:14px;color:rgb(255 255 255 / .66)}
.card strong{font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card .pill{align-self:flex-start;margin-top:6px}
/* ── Мелочи ─────────────────────────────────────────────────────────── */
.linkish{display:block;margin:18px 0 0;padding:6px 0;border:0;background:none;cursor:pointer;
color:rgb(var(--film-light));font-size:15px;text-align:left;text-decoration:underline;text-underline-offset:4px;
text-decoration-color:rgb(var(--film-light) / .4)}
.kino-early{margin:14px 0 0;font-size:14px;line-height:1.4;color:rgb(255 255 255 / .8)}
.kino-early a{display:inline-block;margin-left:6px;color:#fff;text-underline-offset:3px}
.kino-logo{display:block;height:28px;width:auto;max-width:44vw;object-fit:contain}
.walk{margin-top:24px;border-radius:var(--r-card);overflow:hidden;background:rgb(255 255 255 / .06)}
.walk video{width:100%}
#demo audio{width:100%;margin-top:24px}
.ticket{padding:16px 18px;border-radius:20px;background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .12)}
.ticket b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.ticket span{display:block;margin-top:4px;font-size:14px;color:var(--ink-2)}
.pay{margin-top:18px;padding:18px;border-radius:20px;background:rgb(255 255 255 / .07);box-shadow:inset 0 0 0 .5px rgb(255 255 255 / .12)}
.pay > b{font-size:21px;font-weight:600}
/* Скрин перевода — главным действием, тонкой чертой от реквизитов. */
.proof{margin-top:18px;padding-top:6px;border-top:1px solid rgb(255 255 255 / .12)}
.proof .go{margin-top:14px}
.proof .linkish{margin:14px auto 0;text-align:center}
.pay-ok{margin:16px 0 0;font-size:17px;font-weight:600;line-height:1.35}
.proof-next{margin-top:10px;text-align:center}
.stars{display:flex;gap:10px;justify-content:center;margin:10px 0 6px}
.stars button{width:48px;height:48px;border:0;background:none;cursor:pointer;color:rgb(255 255 255 / .28);transition:color .24s var(--ease),transform .24s var(--ease)}
.stars button svg{width:40px;height:40px;fill:currentColor}
.stars button.is-on{color:rgb(var(--film-light))}
.stars button:active{transform:scale(.9)}
/* ═══ НИЖНЯЯ ПОЛОСА ══════════════════════════════════════════════════ */
.dock{
position:fixed;z-index:45;left:10px;right:10px;bottom:calc(var(--safe-b) + 10px);
max-width:520px;margin:0 auto;
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 10px 10px 20px;border-radius:24px;
background:var(--glass);
-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);
box-shadow:0 0 0 .5px rgb(255 255 255 / .14),0 18px 44px -14px rgb(var(--film) / .55);
transform:translateY(calc(100% + 24px));transition:transform .44s var(--ease);
}
.dock.is-on{transform:none}
.dock-t{min-width:0}
.dock-t b{display:block;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dock-t small{display:block;font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ═══ ЛИСТ ЗАПИСИ ════════════════════════════════════════════════════ */
.sheet{position:fixed;inset:0;z-index:60}
.sheet-veil{position:absolute;inset:0;background:rgb(0 0 0 / .5);opacity:0;transition:opacity .32s var(--ease)}
.sheet-card{
/* Высота постоянная: лист не подрастает, когда приходит время, — прыжок
под пальцем читается как сбой. */
position:absolute;left:0;right:0;bottom:0;height:86svh;display:flex;flex-direction:column;
border-radius:28px 28px 0 0;background:rgb(28 28 30 / .86);
-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
box-shadow:0 -.5px 0 rgb(255 255 255 / .14);
transform:translateY(100%);transition:transform .44s var(--ease);
max-width:620px;margin:0 auto;
}
.sheet.is-on .sheet-veil{opacity:1}
.sheet.is-on .sheet-card{transform:none}
.sheet-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 8px 22px}
.sheet-top b{font-size:21px;font-weight:600;letter-spacing:-.02em}
.sheet-top .round{width:36px;height:36px;border:0;cursor:pointer}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:6px 22px calc(var(--safe-b) + 24px)}
.label{margin:22px 0 10px;font-size:14px;font-weight:600;color:var(--ink-2)}
.hscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -22px;padding:0 22px}
.hscroll::-webkit-scrollbar{display:none}
/* Лента дат листается вбок — край тает, а не режет последний день
пополам: срезанная кнопка читалась как обрезанное название. */
.hscroll{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);
mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.times{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.time{min-height:44px;border-radius:14px;border:0;background:var(--card-2);cursor:pointer;font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;
transition:background-color .32s var(--ease),color .32s var(--ease)}
.time.is-on{background:var(--ink);color:#000}
.time i{display:block;font-style:normal;font-size:11px;color:var(--ink-2)}
.hint{margin:12px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.fld{display:block;margin-top:14px}
.fld span{display:block;margin-bottom:6px;font-size:14px;color:var(--ink-2)}
.fld input{width:100%;min-height:50px;padding:0 16px;border-radius:14px;border:0;background:var(--card-2);color:var(--ink);
font:inherit;font-size:17px;outline:none;box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .24s var(--ease)}
.fld input:focus{box-shadow:inset 0 0 0 1px rgb(255 255 255 / .5)}
.tick{display:flex;gap:12px;align-items:flex-start;margin-top:14px;font-size:14px;line-height:1.4;color:var(--ink-2)}
/* Галочка своя, а не системная: белый квадрат браузера на тёмном стекле
выглядел чужим («галочки дерьмо», 26.09). Круглые углы, тонкая рамка;
отмечена — цвет кнопки салона и светлая отметка. */
.tick input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:22px;height:22px;margin:0;border-radius:7px;cursor:pointer;
background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .34);
transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}
.tick input:checked{background:var(--accent);box-shadow:none}
/* Отметка — цветом текста кнопки: у салона без своего цвета кнопка белая,
и белая отметка на ней пропала бы. */
.tick input::after{content:"";position:absolute;inset:4px;opacity:0;background:var(--accent-ink);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
transition:opacity .2s var(--ease)}
.tick input:checked::after{opacity:1}
.tick input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tick span{padding-top:1px}
.go{width:100%;margin-top:22px}
/* Главное действие шага прилипает к низу листа: длинный прайс не прячет
его под прокруткой. Над ним — плавное затухание списка. */
.sheet-act{position:sticky;bottom:0;z-index:2;margin:0 -22px;padding:18px 22px 4px;
background:linear-gradient(180deg,rgb(28 28 30 / 0),rgb(28 28 30 / .94) 34%)}
.sheet-act .go{margin-top:0}
/* Рамка фокуса у строки — мягкая и по форме строки, а не белый прямоугольник. */
.row:focus-visible{outline:none;box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .38);border-radius:14px}
.why{min-height:20px;margin:10px 0 0;font-size:14px;color:#ff6961}
.done{text-align:center;padding:24px 0 8px}
.done b{display:block;font-size:28px;font-weight:700;letter-spacing:-.03em}
.done p{margin:8px 0 0;color:var(--ink-2)}
/* Всплывающая строка. */
.said-now{position:fixed;z-index:80;left:16px;right:16px;bottom:calc(var(--safe-b) + 92px);max-width:520px;margin:0 auto;
padding:14px 18px;border-radius:18px;background:var(--glass);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
font-size:15px;text-align:center;box-shadow:0 0 0 .5px rgb(255 255 255 / .12);
animation:said .32s var(--ease-out)}
@keyframes said{from{opacity:0;transform:translateY(8px)}}
@media (min-width:734px){
:root{--pad:40px}
.cards{grid-template-columns:1fr 1fr}
}
/* Меньше движения — фильм стоит первым кадром, текст на месте сразу. */
@media (prefers-reduced-motion:reduce){
.kino{height:auto}
.kino-stage{position:relative}
.rise,.from-l,.from-r,.pop{opacity:1;transform:none;filter:none}
.rise.in,.from-l.in,.from-r.in,.pop.in{transition:none}
.reel{height:auto}
.reel-stage{position:relative;height:70svh}
.reel-frame{transform:none!important;border-radius:0!important}
.reel-say{opacity:1!important;transform:none!important}
body.is-still .kino-film,body.is-still .aura{animation:none}
.dock,.sheet-card,.sheet-veil{transition-duration:.01s}
}
/* НИЧЕГО НЕ ВЫХОДИТ ЗА РАМКУ. Длинная ссылка, ник или название без
пробелов переносится внутри своей карточки, а не уезжает за край. */
.card b,.card span,.visit-top b,.visit-pay,.row-t b,.row-t small,.tile-t b,.tile-t span,
.quote,.kino-name,.ticket b,.ticket span,.hint{overflow-wrap:anywhere}
/* ═══ ЖУРНАЛ ═════════════════════════════════════════════════════════
Слой обложки поверх «Кино» — решение владельца 26.09: «берём всё».
Приёмы журнальной вёрстки без её хаоса: одна смелая вещь — название
за краем кадра, остальное тихое и строгое. Цвета не добавляем: цвет
несёт фильм. Кнопки, цены и время — крупно и чисто всегда. */
/* Обложка: самый широкий ряд — ровно по полям (обложкаИмени). */
.kino-name.is-cover{
white-space:pre;overflow-wrap:normal;line-height:.86;letter-spacing:-.045em;
text-wrap:nowrap;
}
/* Подписи обложки — разреженный капс, мелко. */
.kino-kicker{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgb(255 255 255 / .78)}
.kino-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:normal;
font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.kino-meta span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kino-meta span:first-child{color:#fff}
/* Прайс — оглавление: номер · название ······ цена. Только на странице:
лист записи оставлен как был. */
#menu .row--toc{display:flex;align-items:flex-start;gap:12px;padding:18px 0}
#menu .row-n{flex:none;width:20px;padding-top:3px;font-size:12px;font-weight:600;letter-spacing:.06em;
color:rgb(var(--film-light) / .9);font-variant-numeric:tabular-nums}
#menu .row-none{display:none}
#menu .row-shot{flex:none;width:44px;height:44px;border-radius:11px}
#menu .row-t{flex:1;min-width:0}
#menu .row-t b{line-height:1.25;text-wrap:pretty}
#menu .row-line{display:flex;align-items:flex-end;gap:8px;margin-top:8px}
#menu .row-line em{flex:none;margin:0}
#menu .row-lead{flex:1 1 16px;min-width:16px;margin-bottom:5px;border-bottom:1px dotted rgb(255 255 255 / .34)}
#menu .row-line s{flex:none;margin-left:auto;text-decoration:none;font-size:17px;font-weight:600;white-space:nowrap;
font-variant-numeric:tabular-nums}
#menu .row--toc .round{flex:none;margin-top:-4px}
/* Отзывы: первый — вынесенной цитатой, курсивом с засечками. */
#words .quote{font-family:"New York",ui-serif,"Iowan Old Style",Georgia,serif;font-style:italic;
font-weight:400;letter-spacing:-.01em;font-size:20px;line-height:1.38;color:rgb(255 255 255 / .84)}
#words .quote--lead{margin-top:36px;font-size:clamp(30px,8.6vw,48px);line-height:1.12;letter-spacing:-.025em;
color:var(--ink);text-wrap:balance}
#words .quote cite{margin-top:16px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Roboto,Arial,sans-serif;
font-style:normal;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgb(var(--film-light))}