/* Видео зала в шапке: общие стили для главной и страницы «Открыть клуб». Подробности сценария — ниже и в hero-video.js. */
/* ── Видео зала в шапке (23.10.2026) ──
   Сценарий: открыли сайт — пустой зал, обычное видео. Листаем — идёт таймлапс вечера, а текст и мокапы проявляются по мере прокрутки:
   «Софт для покерного клуба» → заголовок → описание → (пауза, люди сидят) → ноутбук и телефон → (пауза) → две кнопки → дальше обычная страница.
   Последним проявляется верхнее меню сайта. Остановились — таймлапс сменяется обычным видео с того же момента. Файлы img/hero/:
   hall-timelapse-*.mp4 (весь час за ~53 с) и hall-live-*.mp4 (10 клипов по 12 с, клип k = момент k/10 часа); -hd — 1080p для больших экранов. Логика — скрипт «hv» внизу страницы; без него (и при «меньше движения»,
   экономии трафика, медленной сети) шапка обычная: постер и весь текст сразу. */
.hero-pin{position:relative}
.hero-vid{--t1:#E6EAE7;--t2:#B4BDB8;--t3:#78837D;overflow:hidden}
.hv{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#06090A;pointer-events:none}
.hv-poster,.hv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* Телефон в портрете (25.10.2026): кадр шире экрана — сдвигаем показ влево, чтобы была видна левая часть зала. */
@media (max-width:700px) and (orientation:portrait){.hv-poster,.hv video{object-position:24% 50%}}
/* Ролики всегда непрозрачны: активный лежит сверху (.on) и проявляется поверх прежнего, под ним фон не просвечивает — никакого «моргания». */
.hv video{z-index:0}
.hv video.on{z-index:1;animation:hvIn .25s ease both}
@keyframes hvIn{from{opacity:0}to{opacity:1}}
.hv::after{content:"";position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(6,9,10,.84) 0%,rgba(6,9,10,.6) 38%,rgba(6,9,10,.18) 70%,rgba(6,9,10,.28) 100%),
  linear-gradient(180deg,rgba(6,9,10,.42) 0%,transparent 22%,transparent 70%,rgba(6,9,10,.7) 100%);
  opacity:var(--hdim,1)}   /* затемнение под текст нарастает вместе с ним; в начале сценария зал почти не затемнён */
.hv-grain{position:absolute;inset:-6%;z-index:3;opacity:.08;mix-blend-mode:overlay;animation:hvGrain .6s steps(1) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .85 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes hvGrain{0%{transform:translate(0,0)}20%{transform:translate(-2%,1.5%)}40%{transform:translate(1.5%,-2%)}60%{transform:translate(-1%,-1%)}80%{transform:translate(2%,1%)}}
/* Сценарий включает скрипт (класс hv-story на .hero-pin). Шапка с видео уходит под меню сайта (отрицательный отступ --po = всё, что над ней)
   и занимает экран; страница не прокручивается, пока не пройдены все шаги (html.hv-lock). Элементы .hs[data-s=N] появляются СРАЗУ и целиком (класс hs-on)
   на шаге N — один жест прокрутки = один шаг; верхнее меню — на последнем шаге. Если содержимое выше экрана, оно сдвигается вверх на --ov px по шагам. */
.hero-pin.hv-story{margin-top:calc(-1 * var(--po,67px))}
.hero-pin.hv-story>.hero{min-height:100vh;min-height:100svh;padding-top:calc(var(--po,67px) + var(--hpt,32px));display:flex;align-items:center}
.hero-pin.hv-story>.hero>.wrap{width:100%;transform:translate3d(0,calc(-1px * var(--ov,0) * var(--sh,0) - var(--lift,0px) * var(--sh,0)),0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
html.hv-lock{overscroll-behavior:none}
/* верхнее меню сайта: прозрачное до последнего шага, потом проявляется целиком; с клавиатуры (focus) доступно всегда */
html.hv-hdr .site-header{opacity:0;transform:translate3d(0,-18px,0);pointer-events:none;transition:opacity .8s ease,transform .8s ease}
html.hv-hdr.hv-hdr-on .site-header,html.hv-hdr .site-header:focus-within{opacity:1;transform:none;pointer-events:auto}
.hv-story .hero h1,.hv-story .hero .lead,.hv-story .hero .eyebrow{text-shadow:0 2px 22px rgba(0,0,0,.65)}
/* Элемент скрыт, пока не наступил его шаг. Сдвиг через независимые свойства translate/scale, чтобы не затирать собственные transform элементов. */
.hv-story .hs{opacity:0!important;translate:0 30px;transform:none!important;animation:none!important;
  transition:opacity .9s ease var(--td,0s),translate .9s cubic-bezier(.2,.7,.2,1) var(--td,0s),scale .9s cubic-bezier(.2,.7,.2,1) var(--td,0s)!important}
.hv-story .hs.hs-on{opacity:1!important;translate:0 0}
.hv-story .mk-laptop.hs{translate:0 44px;scale:.94}
.hv-story .mk-laptop.hs.hs-on{translate:0 0;scale:1}
.hv-story .rv{opacity:1!important;transform:none!important}
.hv-story .stagger>*{opacity:1}
.hv-story .stagger>.hs:not(.hs-on){opacity:0!important}
.hv-story .hero-cta{pointer-events:none}
.hv-story .hero-cta.hs-on{pointer-events:auto}
/* подсказка «листайте»: только значок мыши, без слов; пропадает с первым движением */
.hv-hint{position:absolute;left:50%;bottom:clamp(14px,3vh,28px);z-index:3;transform:translateX(-50%);pointer-events:none;opacity:0;transition:opacity .5s ease}
.hv-story .hv-hint{opacity:var(--hhint,1)}
.hv-hint i{width:18px;height:29px;border:1.5px solid var(--t2);border-radius:10px;position:relative;display:block}
.hv-hint i::after{content:"";position:absolute;left:50%;top:6px;width:2.5px;height:6px;margin-left:-1.25px;border-radius:2px;background:var(--lime);animation:hvWheel 1.6s ease-in-out infinite}
@keyframes hvWheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
.hero-vid.hv-static .hv video{display:none}
/* «меньше движения»: без зерна и подсказки, видео идёт обычное */
.hero-vid.hv-calm .hv-grain{animation:none}
@media(prefers-reduced-motion:reduce){.hv-grain{animation:none}.hv-hint i::after{animation:none}}

/* Телефон, одна колонка (26.10.2026, правка владельца: ноутбук и телефон опущены слишком низко).
   Кнопки скрыты до последнего шага, но занимали место между описанием и ноутбуком (~140px), и ноутбук с телефоном
   уезжали за нижний край экрана. Здесь кнопки встают ПОД ноутбуком (порядок order), а ноутбук — сразу под описанием.
   .stagger «растворяется» (display:contents), чтобы кнопки и ноутбук были соседями одной сетки.
   Расстояние от описания до ноутбука и от ноутбука (с выступающим телефоном) до кнопок одинаковое: 22px полей описания + поле .rv. */
@media(max-width:900px){
  .hero-pin .hero-grid{row-gap:0}
  .hero-pin .hero-grid>.stagger{display:contents}
  .hero-pin .hero-grid>.rv{order:2;margin-top:clamp(14px,3.4vw,22px)}
  .hero-pin .hero-grid>.stagger>.hero-cta{order:3;margin-top:calc(22px + clamp(14px,3.4vw,22px) + 1%)}
  /* без рамки .stagger не «входит» в экран (IntersectionObserver) и не получает класс .in: проявляем детей сами */
  .hero-pin .hero-grid>.stagger>*{opacity:1;transform:none}
  .hero-pin .hero-grid>.stagger .bars i{transform:none}
}