[hidden] { display: none !important; }

@font-face { font-family: "Rubik"; font-weight: 800; font-display: swap; src: url("../fonts/rubik-cyrillic-800.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Rubik"; font-weight: 800; font-display: swap; src: url("../fonts/rubik-latin-800.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Цвета — фрейм Figma «ФРЕНКИ реал правки» (61:2511) */
  --black: #000;
  --white: #fff;
  --orange: #FF5602;
  /* Шрифты и типографика дизайнера: межстрочный 120 %, трекинг −2 % */
  --font-display: "Rubik", sans-serif;
  --font-text: "Golos Text", sans-serif;
  --lh: 1.2;
  --ls: -0.02em;
  --header-h: 80px;   /* шапка: было 72 (Leonardo), дизайнер 28.10 попросил чуть выше */
  /* Скругления: фото 8 (.5rem — код Leonardo), видео 16 — замер записи Leonardo; карточки блока 20 — скрин дизайнера */
  --r-photo: 8px;
  --r-video: 16px;
  --r-card: 20px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Слои: фото < центр < видео < шапка (решение дизайнера 28.10) */
  --z-center: 600;
  --z-video: 1000;
  --z-header: 2000;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--black); color: var(--white); -webkit-font-smoothing: antialiased; }
body { margin: 0; font: 500 16px/var(--lh) var(--font-text); letter-spacing: var(--ls); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; }
h1, h2, h3, p { margin: 0; }

/* ---------- Кнопки ---------- */
/* Ховер — код Leonardo (GooeyCanvas): снизу поднимается эллипс и заливает кнопку целиком; рисует script.js */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 140deg; }

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 26px; border-radius: 99px; border: 0;
  font: 500 14px/var(--lh) var(--font-text); letter-spacing: var(--ls); white-space: nowrap; cursor: pointer;
  transition: transform .3s var(--ease);
}
.btn:active { transform: scale(.95); }
.btn--sm { height: 40px; padding: 0 20px; }
.btn--xs { height: 34px; padding: 0 16px; font-size: 13px; }
.btn__goo { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: inherit; z-index: 0; pointer-events: none; }
.btn__label { position: relative; z-index: 1; transition: color .4s var(--ease) .15s; }

/* Белая: заливка акцентом (у Leonardo — зелёным); на оранжевом текст белеет — чёрный на оранжевом сливается (дизайнер 28.10) */
.btn--light { color: var(--black); background: var(--white); }
@media (hover: hover) { .btn--light:hover .btn__label { color: var(--white); } }
/* знак рубля — вектором (символы rub-b / rub-m в index.html): высота прописных, стоит на базовой линии */
.rub { display: inline-block; height: .7em; width: auto; aspect-ratio: .72; vertical-align: baseline; overflow: visible; }
.ticket__price .rub { aspect-ratio: .76; height: .7em; }

/* Контурная: обводка 2 px, блики крутятся всегда (0,5° за кадр), заливка белая, текст чернеет */
.btn--ghost { color: var(--white); background: transparent; }
.btn--ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spin) at 50% 50%, rgba(255, 255, 255, .35) 0deg, rgba(255, 255, 255, .05) 90deg, rgba(255, 255, 255, .35) 180deg, rgba(255, 255, 255, .05) 270deg, rgba(255, 255, 255, .35) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: btn-spin 12s linear infinite;
}
@keyframes btn-spin { to { --spin: 500deg; } }
@media (hover: hover) { .btn--ghost:hover .btn__label { color: var(--black); } }
.btn:focus-visible, .nav__link:focus-visible, .social:focus-visible, .logo:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* ---------- Шапка ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 30px; padding: 0 30px; /* разделы — посередине между логотипом и соцсетями */
}
/* Наверху — только градиент (тезисы на стенах читаются). После 50 px прокрутки проявляется стекло за 0,5 с,
   градиент уходит — как у Leonardo (их header: opacity стекла по scrollTop > 50, transition 500 мс) */
.header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.header.is-glass::before { opacity: 0; }
/* стекло: чёрный 10 %; размытие 8 px — запасной вариант Leonardo для Safari и Firefox, в Chrome script.js ставит фильтр с искажением */
.header__glass { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .5s cubic-bezier(.4, 0, .2, 1); }
.header.is-glass .header__glass { opacity: 1; }
.glossy-filter { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.logo { font: 800 22px/var(--lh) var(--font-display); letter-spacing: var(--ls); justify-self: start; }
.nav { display: flex; gap: 30px; justify-self: center; }
.nav__link { display: inline-flex; align-items: center; gap: 5px; font-size: 16px; transition: opacity .2s var(--ease); }
.nav__link:hover { opacity: .65; }
.chev { width: 8px; height: 4px; fill: none; stroke: currentColor; stroke-width: 1.4; overflow: visible; transition: transform .25s var(--ease); }
.nav__link:hover .chev { transform: translateY(1px); }
.header__right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.socials { display: flex; align-items: center; gap: 20px; margin-right: 10px; }
.social { display: inline-flex; height: 22px; transition: opacity .2s var(--ease); }
.social:hover { opacity: .65; }
.social svg { height: 100%; width: auto; }
.social:nth-child(1) svg { height: 20px; margin-top: 1px; }
.social:nth-child(3) svg { width: 30px; }

/* Бургер — Hamburger Leonardo: две линии 3 px, открыт — крестик ±45° за 0,5 с. Коробка у них 20 × 8 (с 640 px — 30 × 12);
   на скрине дизайнера с телефона линии ≈ 7 % ширины экрана — берём 26 × 10. Нажимается вся зона 44 × 44 */
.burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  border: 0; background: none; color: var(--white); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.burger__box { position: relative; display: block; width: 26px; height: 10px; }
.burger__line { position: absolute; left: 0; width: 100%; height: 3px; background: currentColor; transition: all .5s cubic-bezier(.4, 0, .2, 1); }
.burger__line:first-child { top: 0; }
.burger__line:last-child { bottom: 0; }
.burger[aria-expanded="true"] .burger__line:first-child { top: 50%; transform: translateY(-50%) rotate(45deg); }
.burger[aria-expanded="true"] .burger__line:last-child { bottom: 50%; transform: translateY(50%) rotate(-45deg); }
@media (min-width: 640px) { .burger__box { width: 30px; height: 12px; } }
.burger:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; border-radius: 8px; }

/* ---------- Меню телефона ---------- */
/* AppMenu Leonardo: во весь экран под шапкой (шапка с логотипом и крестиком остаётся сверху), разделы сверху, кнопки внизу.
   Своей прозрачности у панели нет: прозрачность родителя отрезала бы стеклу страницу позади */
.mnav { position: fixed; inset: 0; z-index: calc(var(--z-header) - 1); display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--header-h) + 16px) 16px max(32px, env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; transition: visibility 0s .45s; }
.mnav.is-open { visibility: visible; transition: none; }
/* матовое стекло: GlossySurface из script.js (сдвиг каналов) + размытие 20; чёрный 45 % — список читается поверх оранжевых строк */
.mnav__glass { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; background: rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); transition: opacity .45s cubic-bezier(.4, 0, .2, 1); }
.mnav.is-open .mnav__glass { opacity: 1; }
/* прокрутку под меню гасит script.js: overflow: hidden у html вместе с overflow-x у body ломает закреплённую сцену первого экрана */
html.is-menu .header .header__glass, html.is-menu .header::before { opacity: 0; }   /* одно стекло на весь экран, без второго под шапкой */
.mnav__list { display: flex; flex-direction: column; }
.mnav__list a { display: block; padding: 16px 0; font-size: 20px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.mnav__foot { display: grid; gap: 20px; margin-top: 40px; }
.mnav__contacts { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mnav .socials { display: flex; margin: 0; }
.mnav__phone { font-size: 16px; color: rgba(255, 255, 255, .8); }
.mnav__btns { display: flex; gap: 12px; }
.mnav__btns .btn { flex: 1 1 0; min-width: 0; height: 48px; font-size: 15px; }
/* пункты выходят снизу по очереди (шаг 45 мс) и сразу гаснут при закрытии */
.mnav__list a, .mnav__foot { opacity: 0; transform: translateY(16px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.mnav.is-open .mnav__list a, .mnav.is-open .mnav__foot { opacity: 1; transform: none;
  transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(80ms + var(--i) * 45ms); }

/* ---------- Появление при загрузке: стены приближаются из темноты, шапка и центр проявляются по очереди ---------- */
.header, .center > * { transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out), filter 1.2s var(--ease-out); }
/* стены проявляются по очереди и быстро: верх, верх, лево, право, низ (шаг 0,1 с), потом центр (дизайнер 28.10) */
.walls img { transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
html:not(.is-loaded) .walls img { opacity: 0; transform: scale(.94); }
.walls .walls__part--t1 { transition-delay: .05s; }
.walls .walls__part--t2 { transition-delay: .15s; }
.walls .walls__part--l { transition-delay: .25s; }
.walls .walls__part--r { transition-delay: .35s; }
.walls .walls__part--b { transition-delay: .45s; }
.walls__part--t1 { clip-path: polygon(0 0, 100% 0, 85.4% 19.5%, 14.7% 19.5%); }
.walls__part--t2 { clip-path: polygon(14.7% 19.5%, 85.4% 19.5%, 74.6% 34%, 25.7% 34%); }
.walls__part--l { clip-path: polygon(0 0, 25.7% 34%, 25.7% 66.7%, 0 100%); }
.walls__part--r { clip-path: polygon(100% 0, 100% 100%, 74.6% 66.7%, 74.6% 34%); }
.walls__part--b { clip-path: polygon(0 100%, 25.7% 66.7%, 74.6% 66.7%, 100% 100%); }
html:not(.is-loaded) .header { opacity: 0; transform: translateY(-16px); }
html:not(.is-loaded) .center > * { opacity: 0; transform: translateY(18px); filter: blur(8px); }
.header { transition-delay: .6s; }
.title { transition-delay: .6s; }
.lead { transition-delay: .7s; }
.center__btns { transition-delay: .8s; }

/* ---------- Сцена ---------- */
/* Длина сцены: 3 экрана прокрутки — 2 экрана Leonardo (Hero 300vh) + спокойный выход видео */
.scene { position: relative; height: 500vh; }  /* +0,6 экрана — видео во всю ширину задерживается, +0,4 — пауза перед разлётом фото (дизайнер 28.10) */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

.walls { position: absolute; inset: 0; transform-origin: 50% 50%; }
.walls img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

.center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: var(--z-center);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.title { font: 800 44px/var(--lh) var(--font-display); letter-spacing: var(--ls); }
.lead { margin-top: 5px; font-size: 19px; }
.center__btns { display: flex; gap: 10px; margin-top: 20px; }

/* Разлёт фото — ImageScatter Leonardo: perspective 1000, фото стоят в центре и уезжают transform'ом */
.photos { position: absolute; inset: 0; pointer-events: none; perspective: 1000px; perspective-origin: 50% 50%; will-change: opacity; }
.photo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  transform-style: preserve-3d; backface-visibility: hidden;
}
.photo__in { position: absolute; inset: 0; opacity: 0; will-change: transform, opacity; }
.photo__clip { position: absolute; inset: 0; border-radius: var(--r-photo); overflow: hidden; background: #111; }
.photo__clip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }

.video {
  position: absolute; left: 50%; top: 0; z-index: var(--z-video); border-radius: var(--r-video); overflow: hidden;
  background: #0b0b0b; transform-origin: 50% 0; will-change: transform; visibility: hidden;
}
.video video { width: 100%; height: 100%; object-fit: cover; }
/* граница видео — как у стекла: тонкая светлая обводка, иначе тёмный край ролика теряется на чёрном */
.video::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .1); }  /* 10 % — дизайнер 28.10: на 3 % граница терялась, 7 % мало */
/* затемнение видео, когда оно уходит со страницы (--dim ставит script.js) */
.video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; opacity: var(--dim, 0); pointer-events: none; }
.sound { z-index: 2; }
.sound { position: absolute; right: 20px; bottom: 20px; }

/* ---------- Два концерта. Один вечер ---------- */
/* без отрицательного отступа: на низких экранах заголовок наезжал на видео */
.format { position: relative; z-index: 1; padding: 40px 32px 160px; }
.format__head { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.format__title { font: 800 64px/1 var(--font-display);  /* заголовки 100–110 % — решение дизайнера 28.10 */
  letter-spacing: var(--ls); text-wrap: balance; }
.format__lead { max-width: 520px; margin: 20px auto 0; font-size: 19px; line-height: 1.2; color: rgba(255, 255, 255, .72); text-wrap: balance; }

/* Факты со слов дизайнера (28.10) и AGENTS.md; оранжевым, как заголовки карточек, без рамок и подсветок */
.format__badge { margin-top: 24px; font: 800 24px/1.05 var(--font-display); letter-spacing: var(--ls); color: var(--white); text-wrap: balance; }
/* выделение: оранжевый маркер под цифрами */
.format__badge mark { padding: .06em .22em .02em; border-radius: 6px; background: var(--orange); color: var(--white);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Раскладка — код Leonardo (TextHeadlineAndBoxes, 4 карточки, xl): ширины и высоты в vw чередуются,
   у каждой свой отступ сверху, снизу и слева; 3-я отодвинута вправо (+40 px) — разрыв между 2-й и 3-й */
.cards { display: flex; justify-content: center; align-items: flex-start; }
/* чуть выше и шире, чем у Leonardo (20,2 / 22,7vw) — правка дизайнера 28.10 */
.card { flex: none; display: flex; width: 22vw; min-height: 29.5vw; will-change: transform, opacity; }
.card:nth-child(even) { width: 24.5vw; min-height: 33vw; }
.card:nth-child(1) { margin: 0 0 152px; z-index: 2; }
.card:nth-child(2) { margin: 96px 0 56px -16px; }
.card:nth-child(3) { margin: 28px 0 124px 40px; z-index: 2; }
.card:nth-child(4) { margin: 96px 0 56px -32px; }
.card__in { position: relative; flex: 1; border-radius: var(--r-card); overflow: hidden; will-change: transform; }

.card--accent .card__in { background: var(--orange); color: var(--black); display: flex; flex-direction: column; justify-content: space-between; padding: 28px; }
.card__mark { font: 800 min(220px, 14vw)/.8 var(--font-display); letter-spacing: -0.04em; margin-top: 8px; color: var(--white); }
.card__mark--num { font-size: min(170px, 11.5vw); letter-spacing: -0.06em; }
.card h3 { font: 800 24px/1.05 var(--font-display); letter-spacing: var(--ls); }
.card p { margin-top: 10px; font-size: 16px; line-height: 1.2; }
.card--accent p { color: rgba(0, 0, 0, .78); }

.card--photo img { width: 100%; height: 100%; object-fit: cover; }
.card:nth-child(2) img { object-position: 45% 30%; }
.card:nth-child(4) img { object-position: 30% 25%; }
.card__glass {
  position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 18px 20px; border-radius: 14px;
  /* тёмная подложка читается и без размытия */
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .12);
}
.card__glass h3 { font-size: 22px; }
.card__glass p { font-size: 15px; color: rgba(255, 255, 255, .8); }

/* ---------- 1280 ---------- */
@media (max-width: 1340px) {
  .header { padding: 0 24px; }
  .nav { gap: 22px; }
  .socials { display: none; }
  .comic__tags li { padding: 0 10px; font-size: 12px; }
}
/* У Leonardo до 1160 карточки — карусель; у нас — две колонки, вторая ниже */
@media (max-width: 1160px) and (min-width: 901px) {
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: 20px; }
  .card, .card:nth-child(even) { width: auto; min-height: 440px; margin: 0 !important; }
  .card:nth-child(even) { margin-top: 80px !important; }
  .card__mark { font-size: 180px; }
  .card__mark--num { font-size: 150px; }
}

/* ---------- Планшет и телефон ---------- */
@media (max-width: 1100px) {
  :root { --header-h: 64px; }
  .nav, .socials, .phone { display: none; }
  .header { grid-template-columns: 1fr auto; padding: 0 16px; }
  .logo { font-size: 18px; }
  .burger { display: inline-flex; }
}
/* телефон: в шапке только логотип и бургер, «Купить билет» — на первом экране и в меню (как у Leonardo) */
@media (max-width: 760px) { .header__buy { display: none; } }
@media (max-width: 900px) {
  .format { padding: 32px 16px 96px; }
  .format__head { margin-bottom: 32px; }
  .format__title { font-size: 40px; }
  .format__lead { font-size: 16px; }
  .cards { flex-direction: column; align-items: stretch; gap: 16px; max-width: 460px; margin: 0 auto; }
  .card, .card:nth-child(even) { width: auto; min-height: 0; margin: 0 !important; }
  .card--accent .card__in { min-height: 340px; gap: 40px; }
  .card--photo .card__in { height: 440px; }
  .card__mark { font-size: 160px; }
}
@media (max-width: 600px) {
  .title { font-size: min(32px, 8.4vw); }
  .lead { font-size: 16px; }
  .format__badge { font-size: 20px; }
  .format__title { font-size: 34px; }
}
/* Телефон: «Два концерта» — две линии по две карточки, неровно (дизайнер 29.10): «&» слева, джаз справа ниже, под наклоном
   и чуть заходит за «&»; ниже слева стендап, справа «×3». Шапка блока — заголовок, описание, плашка с разведёнными отступами.
   Вылет и параллакс — script.js */
@media (max-width: 760px) {
  .format { padding: 32px 16px 120px; }
  .format__head { margin-bottom: 48px; }
  .format__title { font-size: 36px; line-height: 1; }
  .format__lead { max-width: 330px; margin-top: 16px; }
  .format__badge { margin-top: 24px; font-size: 18px; line-height: 1.3; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px 10px; max-width: none; }
  .card:nth-child(1) { order: 1; margin: 0 !important; }
  .card:nth-child(2) { order: 2; margin: 56px 0 0 -12px !important; }
  .card:nth-child(4) { order: 3; margin: -72px 0 0 !important; }
  .card:nth-child(3) { order: 4; margin: 16px 0 0 !important; }
  .card:nth-child(2) .card__in { transform: rotate(4deg); }
  .card:nth-child(4) .card__in { transform: rotate(-3deg); }
  .card:nth-child(3) .card__in { transform: rotate(2.5deg); }
  .card--accent .card__in { min-height: 236px; padding: 16px 14px; gap: 16px; }
  .card__mark { font-size: 84px; margin-top: 4px; }
  .card__mark--num { font-size: 68px; }
  .card h3 { font-size: 16px; }
  .card p { margin-top: 6px; font-size: 13px; }
  .card--photo .card__in { height: 280px; }
  .card__glass { left: 8px; right: 8px; bottom: 8px; padding: 10px 11px; border-radius: 10px; }
  .card__glass h3 { font-size: 15px; }
  .card__glass p { font-size: 12px; }
  .card p br { display: none; }   /* узкая карточка — текст переносится сам, иначе тире повисало отдельной строкой */
}

/* ---------- Телефон: первый экран ---------- */
/* Мобильный первый экран Leonardo: вместо тоннеля — три фразы с перекосом вплотную (каждая натянута на свой четырёхугольник,
   script.js), под ними заголовок, описание, белая кнопка и текстовая ссылка. Так же на любом «портретном» экране */
.wlines { display: none; }
.wl, .wl__in { position: absolute; inset: 0; transform-origin: 50% 50%; }
.wl svg { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: visible; }
.wl text { font: 800 300px var(--font-display); fill: var(--orange); }
/* кратка «Й» — своя дуга в зазоре между фразами (script.js), толщину задаёт script.js */
.wl path { fill: none; stroke: var(--orange); stroke-linecap: round; }
/* поток фото телефона — script.js (RISE): место и ширина в %, едут снизу вверх за текстом */
.rise { display: none; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rise__ph { position: absolute; top: 0; border-radius: var(--r-photo); overflow: hidden; background: #111; visibility: hidden; will-change: transform; }
.rise__ph img { width: 100%; height: 100%; object-fit: cover; }
/* затемнение между заголовком и видео (телефон, script.js): сверху мягкий вход 64 px, дальше чёрное до видео */
.rise__shade { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), #000 64px); will-change: transform, opacity; }
/* появление как у стен: по очереди сверху вниз, шаг 0,1 с */
.wl__in { transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
html:not(.is-loaded) .wl__in { opacity: 0; transform: scale(.94); }
.wl:nth-child(1) .wl__in { transition-delay: .05s; }
.wl:nth-child(2) .wl__in { transition-delay: .15s; }
.wl:nth-child(3) .wl__in { transition-delay: .25s; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .scene { height: 330vh; }   /* точную длину ставит script.js: видео входит на 1,35 экрана, встаёт под шапку и ждёт следующий блок */
  .walls, .photos { display: none; }
  .wlines { display: block; position: absolute; inset: 0; will-change: transform; }
  /* круг 31: фото между заголовком и видео на телефоне убраны (.rise и .rise__shade скрыты) */
  /* заголовок белый; с выходом видео «& ACTION» перекрашивается в оранжевый (is-hot ставит script.js) */
  .stage .title__hot { transition:color .6s var(--ease); }
  .stage .center.is-hot .title__hot { color: var(--orange); }
  .static-motion .rise__shade { display: none; }
  .center { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }   /* фото идут за текстом — тень держит его читаемым */
  /* место центра считает script.js (--cy) — между верхними и нижними строками */
  .center { top: var(--cy, 40%); transform: translate(-50%, 0); width: calc(100% - 32px); }
  .center__btns { flex-direction: column; align-items: center; gap: 16px; margin-top: 24px; }
  .center__btns .btn--light { height: 48px; padding: 0 34px; font-size: 15px; }
  /* контурная кнопка на телефоне — текстовая ссылка, как «Developer API» у Leonardo */
  .center__more { height: auto; padding: 2px 0; overflow: visible; color: rgba(255, 255, 255, .72);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  .center__more::before, .center__more .btn__goo { display: none; }
  .center__more:hover .btn__label { color: var(--white); }
  .sound { right: 12px; bottom: 12px; }
  .static-motion .wlines { position: relative; height: 100svh; }
  .static-motion .stage .center { top: var(--cy, 40%); }
}

/* Меньше движения: сцена без закрепления, всё видно сразу */
.static-motion .scene { height: auto; }
.static-motion .stage { position: relative; height: auto; overflow: visible; }
.static-motion .photos { display: none; }
.static-motion .walls { position: relative; height: 100svh; }
.static-motion .center { top: 50svh; }
.static-motion .video { position: relative; left: auto; margin: 40px auto; width: min(1300px, calc(100% - 32px)); aspect-ratio: 2 / 1; transform: none !important; visibility: visible; }
.static-motion .card { transform: none !important; opacity: 1 !important; }
.static-motion .btn--ghost::before { animation: none; }

/* Телефон: закреплённая панель «КУПИТЬ БИЛЕТЫ» внизу (дизайнер 31.10). Кнопка — размер и надпись как у «Смотреть всех комиков»
   на телефоне (60 px, Rubik 800 17 px капсом), оранжевая с белым текстом, при нажатии чуть растёт и светится оранжевым.
   Подложка — стекло шапки до самого низа экрана (viewport-fit=cover, под панелью Safari и с запасом вниз).
   Поверх блоков, под шапкой и меню; is-on ставит script.js, у контактов и подвала панель уходит вниз */
.buybar { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .buybar { display: flex; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-header) - 2);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(calc(100% + 40px)); opacity: 0; pointer-events: none;
    transition: transform .5s var(--ease-out), opacity .35s var(--ease-out); }
  .buybar.is-on { transform: none; opacity: 1; pointer-events: auto; }
  /* открыто меню — панель гаснет на месте, без сдвига вниз (дизайнер 31.10: низ «съезжал») */
  html.is-menu .buybar.is-on { opacity: 0; pointer-events: none; }
  .buybar__glass { position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
    background: rgba(0, 0, 0, .1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .btn.buybar__btn { width: 100%; height: 60px; color: var(--white);
    font: 800 17px/1 var(--font-display); letter-spacing: 0; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
  /* ховер и нажатие — как у «Смотреть всё расписание»: чуть растёт, оранжевое свечение, по кнопке проходит блик (без белой заливки) */
  .btn.buybar__btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(0); }
  .btn.buybar__btn:hover, .btn.buybar__btn:active { transform: scale(1.025); box-shadow: 0 12px 40px rgba(255, 86, 2, .35); }
  .btn.buybar__btn:hover::after, .btn.buybar__btn:active::after { transform: translateX(560%); transition: transform 1.8s cubic-bezier(.45, 0, .25, 1); }
}

/* ---------- Афиша ---------- */
/* Логика — «Афиша ближайших шоу» из Figma «Женский Stand-Up»; подача — наша: огромный белый заголовок,
   рядом оранжевый билет (разрыв шаблона), строки сеансов на тонких линиях */
.afisha { position: relative; z-index: 1; max-width: 1376px; margin: 0 auto; padding: 40px 32px 160px; }
.afisha__head { display: grid; grid-template-columns: 1fr 420px; align-items: end; gap: 40px; margin-bottom: 56px; }
.afisha__titlewrap { position: relative; }
.afisha__title { font: 800 clamp(96px, 15vw, 216px)/.86 var(--font-display); letter-spacing: -0.04em; }
/* билет: вырезы по бокам и перфорация — маской; наклон и покачивание от прокрутки ставит script.js */
.ticket {
  position: absolute; left: clamp(400px, 40vw, 580px); top: -36px; width: 240px; padding: 18px 24px 16px;
  display: flex; flex-direction: column; gap: 6px; background: var(--orange); color: var(--white);
  border-radius: 14px; transform: rotate(-8deg); transform-origin: 30% 60%; will-change: transform;
  -webkit-mask: radial-gradient(circle 13px at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 13px at 0 62%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 13px at 100% 62%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket__top { font: 800 15px/1 var(--font-display); letter-spacing: var(--ls); text-transform: uppercase; }
.ticket__price { font: 800 48px/1 var(--font-display); letter-spacing: -0.03em; padding-bottom: 12px;
  border-bottom: 2px dashed rgba(255, 255, 255, .55); }
.ticket__bottom { font-size: 13px; padding-top: 4px; }
.afisha__lead { font-size: 19px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
.months { display: flex; gap: 8px; margin-top: 24px; }
.month {
  height: 40px; padding: 0 20px; border-radius: 99px; border: 1.5px solid rgba(255, 255, 255, .22); background: none;
  color: var(--white); font: 500 15px/1 var(--font-text); letter-spacing: var(--ls); cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.month:hover { border-color: var(--white); }
.month.is-active { background: var(--white); border-color: var(--white); color: var(--black); }
.month:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.shows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.day__shows { list-style: none; margin: 0; padding: 0; }
/* День — одна дата слева сверху, сеансы этого дня строками справа (дизайнер 28.10: дату не повторяем); линия — только между днями */
.day { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 56px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.show {
  display: grid; grid-template-columns: 150px 72px 1fr auto; align-items: center; gap: 56px;
  padding: 12px 8px; border-radius: 12px; cursor: pointer; transition: background-color .4s var(--ease);
}
/* вся строка — выбор сеанса: наведение подсвечивает строку и запускает заливку кнопки, клик открывает покупку */
.show:hover { background-color: rgba(255, 255, 255, .04); }
.show:focus-within { background-color: rgba(255, 255, 255, .04); }
/* подсветка дня при наведении — оранжевая полоса снизу растёт слева направо */
.day::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out); }
.day:hover::after { transform: scaleX(1); }
/* дата по центру первой строки: высота строки = миниатюра 72 + отступы 2 × 12 */
.show__date { display: flex; align-items: center; gap: 14px; min-height: 96px; padding: 12px 8px; }
/* число — от левой силовой, цифры одной ширины, однозначные с нулём («03»): месяц во всех строках на одной линии с тем же отступом (дизайнер 28.10) */
.show__day { font: 800 56px/.9 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.show__md { display: flex; flex-direction: column; gap: 2px; font: 800 20px/1 var(--font-display); letter-spacing: 0; text-transform: uppercase; }
/* день недели — тем же акцентным начертанием, чуть меньше; выходные (пт, сб, вс) — оранжевым */
.show__wd { font-size: 16px; color: rgba(255, 255, 255, .55); }
.show__wd.is-weekend { color: var(--orange); }
.show__time { font: 800 30px/1 var(--font-display); letter-spacing: var(--ls); }
/* миниатюра ближе к названию: зазор 20 вместо общих 56 (дизайнер 28.10) */
.show__name { margin-left: -36px; }
.show__thumb { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; transition: transform .5s var(--ease-out); }
.show:hover .show__thumb { transform: scale(1.06) rotate(-2deg); }
.show__name h3 { font: 800 22px/1.05 var(--font-display); letter-spacing: var(--ls); }
.show__name p { margin-top: 6px; font-size: 15px; color: rgba(255, 255, 255, .6); }
.shows__empty { padding: 40px 8px; font-size: 19px; color: rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .3); }
/* «Смотреть всё расписание» / «Смотреть всех комиков» — оранжевая пилюля во всю ширину, текст белый. Акцентнее (дизайнер 28.10):
   68 px (было 72 — дизайнер: на 2–4 px ниже), Rubik 20 капсом; при наведении увеличивается, по кнопке медленно проходит
   мягкий блик, стрелка уезжает вправо */
.afisha__all { display: flex; width: 100%; height: 68px; margin-top: 48px; color: var(--white);
  font: 800 20px/1 var(--font-display); letter-spacing: 0; text-transform: uppercase;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.afisha__all::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: translateX(0); }
@media (hover: hover) {
  .afisha__all:hover { transform: scale(1.025); box-shadow: 0 12px 40px rgba(255, 86, 2, .35); }
  .afisha__all:hover::after { transform: translateX(560%); transition: transform 1.8s cubic-bezier(.45, 0, .25, 1); }
}
.afisha__arrow { position: relative; z-index: 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
.afisha__all:hover .afisha__arrow { transform: translateX(10px); }
.afisha__all .afisha__arrow { width: 22px; height: 22px; stroke-width: 2.4; transition-duration: .3s; }
.afisha__all .btn__label { display: inline-flex; align-items: center; gap: 10px; }

/* Оранжевая кнопка («Смотреть всё расписание», «Смотреть всех комиков»): при наведении снизу заливается белым, текст чёрный */
.btn--accent { color: var(--black); background: var(--orange); }
.btn--accent.afisha__all { color: var(--white); }
/* цена в строке — белая кнопка (дизайнер 28.10): заливку оранжевым ведёт вся строка, текст белеет вместе с ней */
@media (hover: hover) { .show:hover .show__buy .btn__label { color: var(--white); } }
.show__buy { min-width: 132px; }

/* появление строк снизу по очереди — классы ставит script.js */
.js-reveal .show, .js-reveal .show__date { opacity: 0; transform: translate3d(0, 40px, 0); }
.js-reveal .show.is-in, .js-reveal .show__date.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }

@media (max-width: 1100px) {
  .afisha__head { grid-template-columns: 1fr; align-items: start; }
  .ticket { left: auto; right: 0; top: -20px; }
  .day { grid-template-columns: 200px minmax(0, 1fr); column-gap: 28px; }
  .show { grid-template-columns: 110px 64px 1fr auto; gap: 28px; }
  .show__date { min-height: 88px; }
  .show__thumb { width: 64px; height: 64px; }
  .show__name { margin-left: -8px; }
}
.show__mon, .show__wds { display: none; }
.show__wds { text-transform: uppercase; }
.show__wds.is-weekend { color: var(--orange); }
@media (max-width: 760px) {
  /* «АФИША» во всю ширину, билет справа над ней и чуть заходит на буквы (дизайнер 29.10: под заголовком он оставлял пустоту) */
  .afisha { padding: 112px 16px 96px; }
  .afisha__title { font-size: 22.8vw; }   /* «АФИША» ровно во всю колонку: 358 px на 390 — замер в браузере */
  .ticket { left: auto; right: 2px; top: -84px; width: 178px; padding: 12px 16px; }
  .ticket__price { font-size: 30px; padding-bottom: 8px; }
  .ticket__top { font-size: 11px; } .ticket__bottom { font-size: 11px; }
  .afisha__lead { font-size: 16px; }
  .months { flex-wrap: wrap; }
  /* сеансы — по образцу мобильной афиши дизайнера: слева крупное число и месяц коротко; дальше день недели и время, название
     серым, кнопка цены; справа миниатюра. Сеансы одного дня — под одной датой, линия — между днями */
  .day { grid-template-columns: 64px minmax(0, 1fr); column-gap: 14px; padding: 20px 0; }
  .show__date { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 0; }
  .show__day { font-size: 44px; min-width: 0; }
  .show__md { display: none; }
  .show__mon { display: block; font: 800 18px/1 var(--font-display); text-transform: uppercase; }
  .show { grid-template-columns: minmax(0, 1fr) 64px; grid-template-areas: "time thumb" "name thumb" "buy thumb";
    align-items: start; gap: 4px 14px; padding: 0; border-radius: 0; }
  .show + .show { margin-top: 24px; }
  .show__time { grid-area: time; font-size: 20px; }
  .show__wds { display: inline; margin-right: .3em; }
  .show__thumb { display: block; grid-area: thumb; width: 64px; height: 64px; }
  .show__name { grid-area: name; margin: 0; }
  .show__name h3 { font-size: 15px; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
  .show__name p { display: none; }
  .show__buy { grid-area: buy; justify-self: start; margin-top: 10px; min-width: 0; height: 38px; padding: 0 18px; font-size: 14px; }
  .afisha__all { height: 60px; margin-top: 32px; font-size: 17px; }
}
.static-motion .show, .static-motion .show__date { opacity: 1 !important; transform: none !important; }
.static-motion .ticket { transform: rotate(-8deg) !important; }

/* ---------- Комики ---------- */
/* 6 крупных карточек по три в ряд: фото во всю карточку, внизу матовое стекло (тот же GlossySurface, что в шапке) —
   имя, фраза, регалии тегами, «Подробнее». Въезд — как у «Два концерта»: справа, x = 200·(n+1) → 0, шаг 0,14 с */
.comics { position: relative; z-index: 1; max-width: 1376px; margin: 0 auto; padding: 40px 32px 160px; overflow-x: clip; }  /* карточки въезжают справа — без горизонтальной прокрутки */
/* по левому краю: заголовок в 2 строки слева, описание в 3 строки справа по нижней линии — как шапка афиши (дизайнер 28.10) */
.comics__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin: 0 0 56px; }
.comics__title { font: 800 64px/1 var(--font-display); letter-spacing: var(--ls); }
.comics__lead { flex: none; font-size: 19px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
.comics__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
/* скругления карточки и стекла — как в «Два концерта» (дизайнер 28.10) */
.comic__in { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r-card); overflow: hidden; background: #111; }
.comic__in img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%;
  transition: transform 1.2s var(--ease-out), opacity 1s var(--ease-out); }
/* смена состава плавно, как появление строк афиши: старый комик спокойно гаснет, новый проявляется —
   фото из лёгкого увеличения, стекло снизу вверх (класс ставит script.js) */
.comic__glass { transition: opacity .9s var(--ease-out), transform 1s var(--ease-out); }
.comic.is-out .comic__in img { opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease), transform .01s .5s; }
.comic.is-out .comic__glass { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .45s var(--ease), transform .01s .45s; }
.comic:hover .comic__in img { transform: scale(1.04); }
.comic__glass {
  position: absolute; left: 24px; right: 24px; bottom: 24px; padding: 20px 22px 22px; border-radius: 14px;
  background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255, 255, 255, .12);
}
.comic__glass h3 { font: 800 30px/1 var(--font-display); letter-spacing: var(--ls); }
/* фраза — ровно 2 строки у всех карточек (одна высота стекла); длиннее — сокращаем текст, обрезка — только страховка */
.comic__glass p { margin-top: 10px; font-size: 15px; line-height: 1.2; color: rgba(255, 255, 255, .8); height: 2.4em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.comic__tags { list-style: none; display: flex; flex-wrap: nowrap; overflow: hidden; gap: 6px; margin: 14px 0 0; padding: 0; }
.comic__tags li { height: 28px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; white-space: nowrap; }
/* имя и фраза белые, регалии — оранжевые теги (дизайнер 28.10) */
.comic__tags li { background: var(--orange); border-color: var(--orange); }

/* сдвигаем содержимое, а не саму карточку: карточка за краем окна не попадала в наблюдатель и не въезжала */
.js-reveal .comic__in { opacity: 0; transform: translate3d(calc(200px * (var(--i) + 1)), 0, 0); }
.js-reveal .comic.is-in .comic__in { opacity: 1; transform: none;
  transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); transition-delay: calc(var(--i) * 140ms); }

@media (max-width: 1100px) {
  .comics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .js-reveal .comic__in { transform: translate3d(0, 40px, 0); }
}
@media (max-width: 760px) {
  .comics { padding: 24px 16px 96px; }
  .comics__head { margin-bottom: 32px; }
  .comics__title { font-size: 30px; }
  .comics__lead { font-size: 16px; }
  .comics__head { display: block; }
  .comics__lead { margin-top: 16px; }
  .comics__lead br { display: none; }
  .comics__grid { grid-template-columns: 1fr; gap: 16px; }
  .comic__in { aspect-ratio: 4 / 5; }
  .comic__glass h3 { font-size: 26px; }
  .comic__glass { left: 16px; right: 16px; bottom: 16px; padding: 18px 18px 20px; }
  .js-reveal .comic.is-in .comic__in { transition-delay: 0ms; }
}
.static-motion .comic__in { opacity: 1 !important; transform: none !important; }

/* ---------- Галерея: атмосфера шоу ---------- */
/* Шапка по центру; ниже фото вразброс — раскладка блока «Our Culture» Leonardo (секция 106,3vw, координаты в vw).
   Сдвиги от прокрутки, мыши и ракурс ставит script.js */
.gallery { position: relative; z-index: 1; padding: 40px 0 120px; overflow: hidden; }
.gallery__head { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; padding: 0 32px; text-align: center; }
.gallery__title { font: 800 64px/1 var(--font-display); letter-spacing: var(--ls); }
.gallery__title .accent { color: var(--orange); }
/* вторая строка массивнее — во всю ширину первой, чтобы конструкция не хромала (дизайнер 28.10) */
.gallery__big { display: block; font-size: 1.9em; line-height: .86; letter-spacing: -0.03em; }
.gallery__lead { margin: 20px auto 0; font-size: 19px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
.gallery__btns { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }
.gal { position: relative; height: 92vw; margin-top: 48px; }  /* у Leonardo 106,3vw — у нас без нижних подписей, фото кончаются на ≈ 90vw */
.gal__item { position: absolute; margin: 0; left: calc(var(--x) * 1vw); top: calc(var(--y) * 1vw); width: calc(var(--w) * 1vw);
  will-change: transform, opacity; }
.gal__in { aspect-ratio: 1 / var(--r); border-radius: var(--r-card); overflow: hidden; background: #111; will-change: transform; }
.gal__in img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.gal__item:hover .gal__in img { transform: scale(1.04); }
.js-gal .gal__item { opacity: 0; }

@media (max-width: 760px) {
  .gallery { padding: 24px 0 72px; }
  .gallery__head { padding: 0 16px; }
  .gallery__title { font-size: 34px; }
  .gallery__lead { font-size: 16px; }
  .gallery__lead br { display: none; }
  .gallery__btns { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .gal { height: 196vw; margin-top: 32px; }
  .gal__item { left: calc(var(--mx) * 1vw); top: calc(var(--my) * 1vw); width: calc(var(--mw) * 1vw); }
  .gal__in { aspect-ratio: 1 / var(--mr); border-radius: 14px; }
  .gal__item--desk { display: none; }
}
.static-motion .gal__item { opacity: 1 !important; transform: none !important; }

/* ---------- Фотоотчёты: крупный слайдер ---------- */
/* Активный слайд по центру (62vw, 3:2), соседи по бокам меньше (0,82) и затемнены; положение, наклон от прокрутки и
   автолистание ставит script.js. Стрелки — матовое стекло, как шапка, с обводкой контурной кнопки */
.reports { position: relative; z-index: 1; padding: 40px 0 160px; overflow: hidden; }
.reports__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  max-width: 1376px; margin: 0 auto 48px; padding: 0 32px; }
/* чуть меньше, чем заголовки галереи и комиков (дизайнер 28.10) */
.reports__title { font: 800 52px/1 var(--font-display); letter-spacing: var(--ls); }
/* отступ от заголовка — как у комиков (дизайнер 28.10: было тесно); «джаз, комики…» — всегда второй строкой */
.reports__lead > span { display: block; text-wrap: balance; }
.reports__lead { margin-top: 28px; font-size: 19px; line-height: 1.2; color: rgba(255, 255, 255, .72); }
/* оранжевая с белым текстом сразу, без заливки — при наведении увеличивается, как большие кнопки */
.reports__all { flex: none; height: 56px; padding: 0 28px; color: var(--white); font: 800 16px/1 var(--font-display);
  letter-spacing: 0; text-transform: uppercase; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.reports__all .btn__label { display: inline-flex; align-items: center; gap: 10px; }
.reports__all svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease-out); }
@media (hover: hover) {
  .reports__all:hover { transform: scale(1.04); box-shadow: 0 12px 40px rgba(255, 86, 2, .35); }
  .reports__all:hover svg { transform: translateX(6px); }
}

.rep { --rw: 62vw; }
.rep__stage { position: relative; height: calc(var(--rw) * 2 / 3); will-change: transform; }
.rep__track { position: absolute; inset: 0; touch-action: pan-y; }
.rep__slide { position: absolute; left: 50%; top: 0; width: var(--rw); aspect-ratio: 3 / 2; margin-left: calc(var(--rw) / -2);
  border-radius: var(--r-card); overflow: hidden; background: #111; outline: none;
  transition: transform 1s var(--ease-out), opacity .8s var(--ease-out), filter 1s var(--ease-out); will-change: transform; }
.rep__slide.no-anim { transition: none; }
.rep__in { position: absolute; inset: 0; display: block; transition: transform .7s var(--ease-out); }
.rep__in img { width: 100%; height: 100%; object-fit: cover; }
/* наведение на активный слайд — чуть увеличивается */
@media (hover: hover) { .rep__slide.is-active:hover .rep__in { transform: scale(1.03); } }
.rep__slide:focus-visible { box-shadow: 0 0 0 2px var(--white); }
.rep__count { position: absolute; left: 20px; top: 20px; height: 32px; padding: 0 14px; display: inline-flex; align-items: center;
  border-radius: 99px; font-size: 14px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

.rep__arrow { position: absolute; top: 50%; z-index: 5; width: 60px; height: 60px; padding: 0; margin-top: -30px;
  background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.rep__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rep__arrow .btn__label { display: inline-flex; }
.rep__arrow--prev { left: calc(50% - var(--rw) / 2 - 30px); }
.rep__arrow--prev svg { transform: scaleX(-1); }
.rep__arrow--next { right: calc(50% - var(--rw) / 2 - 30px); }

.rep__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; width: var(--rw); margin: 28px auto 0; }
.rep__caption { transition: opacity .35s var(--ease), transform .35s var(--ease); }
.rep__caption.is-out { opacity: 0; transform: translate3d(0, 8px, 0); }
.rep__name { font: 800 28px/1 var(--font-display); letter-spacing: var(--ls); }
.rep__meta { margin-top: 8px; font-size: 16px; color: rgba(255, 255, 255, .6); }
.rep__open { justify-self: end; }
/* точки: активная — вытянутая, внутри заполняется оранжевым, пока идёт отсчёт до следующего слайда */
.rep__dots { display: flex; align-items: center; gap: 8px; }
.rep__dot { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; overflow: hidden; cursor: pointer;
  background: rgba(255, 255, 255, .3); transition: width .5s var(--ease-out), background-color .3s var(--ease); }
.rep__dot::before { content: ""; position: absolute; inset: -10px -4px; }
.rep__dot:hover { background: rgba(255, 255, 255, .6); }
.rep__dot.is-active { width: 44px; background: rgba(255, 255, 255, .25); }
.rep__dot i { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: 0 50%; }
.rep__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

@media (max-width: 1100px) {
  .reports__head { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 760px) {
  .reports { padding: 24px 0 96px; }
  .reports__head { padding: 0 16px; margin-bottom: 32px; }
  .reports__title { font-size: 30px; }
  .reports__lead { font-size: 16px; }
  .reports__all { width: 100%; }
  .rep { --rw: 84vw; }
  .rep__arrow { display: none; }
  .rep__bar { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .rep__open { justify-self: stretch; }
  .rep__name { font-size: 22px; }
  .rep__count { left: 12px; top: 12px; height: 28px; font-size: 13px; }
}

/* ---------- Полоса прокрутки ---------- */
/* Своя полоса (дизайнер 28.10): системная скрыта; у правого края по наведению проявляется матовое стекло, как шапка,
   с белым ползунком — на ползунке он становится оранжевым. Только для мыши; на телефонах — системная */
html.js-sbar { scrollbar-width: none; }
html.js-sbar::-webkit-scrollbar { display: none; }
.sbar { position: fixed; top: 0; right: 0; bottom: 0; z-index: 2100; width: 16px; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease); }
.sbar.is-on { opacity: 1; pointer-events: auto; }
.sbar::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); border-left: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sbar__thumb { position: absolute; top: 0; right: 4px; width: 7px; border-radius: 99px; background: var(--white); cursor: grab;
  transition: background-color .25s var(--ease), width .25s var(--ease), right .25s var(--ease); }
.sbar__thumb::before { content: ""; position: absolute; inset: 0 -5px; }
.sbar:hover .sbar__thumb { width: 8px; right: 4px; }
.sbar__thumb:hover, .sbar.is-drag .sbar__thumb { background: var(--orange); }
.sbar.is-drag .sbar__thumb { cursor: grabbing; }
.static-motion .rep__slide { transition: none; }

/* ---------- О шоу ---------- */
/* Силовая слева — по сетке страницы; фото справа не по сетке, до края экрана; масштаб фото от прокрутки ставит script.js */
.about { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 72px;
  padding: 40px 0 40px calc(max(0px, (100vw - 1376px) / 2) + 32px); }
/* заголовок двумя размерами, как «Атмосфера шоу / изнутри» (дизайнер 28.10): сверху мелко и белым «Подробнее о шоу»,
   ниже крупно название — STANDUP белым, & ACTION оранжевым */
.about__title { font: 800 50px/.95 var(--font-display); letter-spacing: -0.03em; }
.about__title .accent { color: var(--orange); }
.about__kick { display: block; margin-bottom: 14px; font-size: 26px; letter-spacing: var(--ls); }
.about__big { display: block; white-space: nowrap; }
.about__title .accent { color: var(--orange); }
.about__sub { margin-top: 36px; font: 800 28px/1.1 var(--font-display); letter-spacing: var(--ls); }
.about__sub--sm { margin-top: 32px; font-size: 22px; }
.about__p { margin-top: 14px; max-width: 34em; font-size: 18px; line-height: 1.35; color: rgba(255, 255, 255, .72); }
.about__list { list-style: none; margin: 14px 0 0; padding: 0; }
.about__list li { position: relative; padding: 10px 0 10px 24px; font-size: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.about__list li::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 2px; background: var(--orange); transform: rotate(45deg); }
.about__more { margin-top: 32px; }
.about__media { position: relative; overflow: hidden; min-height: 640px; border-radius: var(--r-card) 0 0 var(--r-card); background: #111; }
.about__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  transform-origin: 50% 30%; will-change: transform; }
/* появление текста по очереди снизу */
.js-about .about__text > * { opacity: 0; transform: translate3d(0, 30px, 0); }
.js-about.is-in .about__text > * { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: calc(var(--d) * 90ms); }

/* ---------- Пять причин ---------- */
.benefits { position: relative; z-index: 1; max-width: 1376px; margin: 0 auto; padding: 24px 32px 104px; }
.benefits__head { margin: 0 auto 56px; text-align: center; }
/* заголовок одной строкой, описание в две (дизайнер 28.10); слова заголовка выходят из-под маски по очереди — script.js */
.benefits__title { font: 800 52px/1 var(--font-display); letter-spacing: var(--ls); white-space: nowrap; }
.benefits__title .accent { color: var(--orange); }
/* шапки причин, кухни и вопросов: слова заголовка выходят из-под маски по очереди, остальное — следом (script.js, один раз) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w__in { display: inline-block; transform-origin: 0 100%; }
.js-words .w__in { transform: translate3d(0, 110%, 0) rotate(8deg); }
.js-words > :not(h2) { opacity: 0; transform: translate3d(0, 20px, 0); }
.js-words.is-in .w__in { transform: none; transition: transform 1s var(--ease-out); transition-delay: calc(var(--w) * 80ms); }
.js-words.is-in > :not(h2) { opacity: 1; transform: none; transition: opacity .8s var(--ease-out) .45s, transform 1s var(--ease-out) .45s; }
.benefits__lead { margin-top: 20px; font-size: 19px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.benefits__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.benefit { transform-origin: 50% 100%; will-change: transform, opacity; }
.benefit__in { height: 100%; min-height: 340px; display: flex; flex-direction: column; padding: 24px;
  border-radius: var(--r-card); background: var(--orange); color: var(--black);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out); }
/* у знака постоянная высота — заголовки всех карточек на одной высоте, сколько бы строк ни было в описании (дизайнер 28.10) */
.benefit__mark { flex: none; height: 200px; margin-bottom: 16px; font: 800 96px/.8 var(--font-display); letter-spacing: -0.05em;
  color: var(--white); transform-origin: 0 0; transition: transform .6s var(--ease-out); }
.benefit__mark .rub { height: .7em; }
.benefit h3 { font: 800 22px/1.05 var(--font-display); letter-spacing: var(--ls); white-space: nowrap; }
.benefit h3 .rub { height: .7em; }
/* описание 2–3 строки, без строки из одного слова: balance делит текст на равные строки, предлоги привязаны &nbsp; */
.benefit p { margin-top: 8px; font-size: 15px; line-height: 1.25; color: rgba(0, 0, 0, .78); text-wrap: balance; }
@media (hover: hover) {
  /* свечение при наведении — чуть мягче прошлого круга, без светлой обводки (дизайнер 28.10) */
  .benefit:hover .benefit__in { transform: translate3d(0, -12px, 0);
    box-shadow: 0 26px 64px rgba(255, 86, 2, .42), 0 0 30px rgba(245, 121, 62, .32); }
  .benefit:hover .benefit__mark { transform: scale(1.08) rotate(-4deg); }
}
.js-ben .benefit { opacity: 0; }

@media (max-width: 1100px) {
  .about { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .about__title { font-size: 42px; } .about__kick { font-size: 22px; }
  .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefits__title { font-size: 44px; }
}
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; row-gap: 32px; padding: 24px 16px 48px; }
  .about__title { font-size: 32px; } .about__kick { font-size: 19px; margin-bottom: 10px; }
  .about__sub { margin-top: 24px; font-size: 22px; }
  .about__p, .about__list li { font-size: 16px; }
  .about__more { width: 100%; }
  .about__media { min-height: 0; aspect-ratio: 4 / 5; margin: 0 -16px; border-radius: 0; }
  .benefits { padding: 24px 16px 96px; }
  .benefits__head { margin-bottom: 32px; }
  .benefits__title { font-size: 34px; white-space: normal; }
  .benefits__lead { font-size: 16px; }
  .benefits__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .benefit__in { min-height: 220px; padding: 16px; }
  .benefit__mark { height: 96px; margin-bottom: 12px; font-size: 64px; }
  /* на телефоне заголовок может уйти во вторую строку — место под две строки у всех, чтобы описания начинались вровень */
  .benefit h3 { min-height: 2.1em; font-size: 18px; white-space: normal; text-wrap: balance; }
  .benefit p { font-size: 13.5px; }
}
.static-motion .about__text > *, .static-motion .benefit, .static-motion .benefits__lead,
.static-motion .cta__img, .static-motion .cta__frame, .static-motion .w__in, .static-motion .js-words > *, .static-motion .dish, .static-motion .qa { opacity: 1 !important; transform: none !important; }

.nowrap { white-space: nowrap; }

/* ---------- Кухня и бар ---------- */
/* Шапка слева, как у фотоотчётов: «КУХНЯ И БАР» крупно, ниже мелко «для вашего вечера» (игра размеров, как в галерее);
   описание и сноска справа. Карточки — по FLORA «Featured Techniques»: стекло с рамкой, визуал, кнопка во всю ширину,
   название и описание; тёплый свет под визуалом разгорается при наведении */
.menu { position: relative; z-index: 1; max-width: 1376px; margin: 0 auto; padding: 56px 32px 120px; }
/* шапка по силовым карточек (дизайнер 28.10): та же сетка в две колонки — заголовок над первой карточкой,
   описание и сноска начинаются ровно от левого края второй и стоят по нижней линии заголовка */
.menu__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: 48px; }
.menu__title { font: 800 76px/.92 var(--font-display); letter-spacing: -0.03em; }
.menu__title .accent, .faq__title .accent, .comics__title .accent, .cta__title .accent { color: var(--orange); }
.menu__small { display: block; margin-top: 12px; font-size: 30px; letter-spacing: var(--ls); color: rgba(255, 255, 255, .9); }
.menu__side { padding-bottom: 4px; }
.menu__lead { font-size: 21px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.menu__note { text-wrap: balance; margin-top: 14px; font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, .45); }
.menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.dish { position: relative; isolation: isolate; padding: 12px 12px 28px; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  transition: border-color .5s var(--ease-out); }
.dish::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background: radial-gradient(60% 34% at 50% 64%, rgba(255, 140, 70, .32), transparent 70%); transition: opacity .6s var(--ease-out); }
.dish__visual { position: relative; display: block; aspect-ratio: 16 / 8.5; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: radial-gradient(42% 60% at 50% 46%, rgba(255, 86, 2, .22), transparent 72%),
    radial-gradient(circle, rgba(255, 255, 255, .14) 1px, transparent 1.5px) 0 0 / 22px 22px, #0a0a0a; }
.dish__icon { position: absolute; left: 50%; top: 40%; width: 40%; transform: translate(-50%, -50%); overflow: visible;
  fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgba(255, 86, 2, .7)) drop-shadow(0 0 28px rgba(255, 86, 2, .35));
  transition: transform .7s var(--ease-out), filter .7s var(--ease-out); }
/* слово — по центру под иконкой, как вывеска (визуал центрирован целиком) */
.dish__word { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); white-space: nowrap; font: 800 72px/.8 var(--font-display); letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .42); transition: -webkit-text-stroke-color .6s var(--ease-out); }
/* конкретика из меню площадки — тегом слева сверху на визуале, как «153 фото» у фотоотчётов (дизайнер 28.10) */
.dish__btn { display: flex; width: 100%; height: 54px; margin-top: 12px; }
.dish__btn .btn__label { display: inline-flex; align-items: center; gap: 10px; }
.dish__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-out); }
.dish__title { margin: 24px 12px 0; font: 800 28px/1 var(--font-display); letter-spacing: var(--ls); }
/* цифры меню площадки (place-source.html: кухня 81, бар 139) — в строке названия через оранжевую точку, мельче, оранжевым (дизайнер 28.10) */
.dish__title { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; }
.dish__count { display: inline-flex; align-items: center; gap: 14px; font: 500 17px/1 var(--font-text); letter-spacing: 0; color: var(--orange); }
.dish__count::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
/* описание — ровно две строки */
.dish__text { max-width: 36em; margin: 12px 12px 0; font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, .66); text-wrap: balance; }
@media (hover: hover) {
  .dish:hover { border-color: rgba(255, 255, 255, .2); }
  .dish:hover::before { opacity: 1; }
  .dish:hover .dish__icon { transform: translate(-50%, -50%) scale(1.07) rotate(-2deg);
    filter: drop-shadow(0 0 14px rgba(255, 86, 2, .95)) drop-shadow(0 0 44px rgba(255, 86, 2, .55)); }
  .dish:hover .dish__word { -webkit-text-stroke-color: var(--orange); }
  .dish__btn:hover svg { transform: translateX(6px); }
}
.js-menu .dish { opacity: 0; transform: translate3d(0, 60px, 0); }
.js-menu .dish.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform 1.1s var(--ease-out), border-color .5s var(--ease-out);
  transition-delay: calc(var(--i) * 140ms), calc(var(--i) * 140ms), 0s; }

/* ---------- Вопрос-ответ ---------- */
/* По «Френки» (Leonardo): шапка по центру — заголовок с акцентом, описание, кнопка; вопросы во всю ширину, линии между ними,
   оранжевый плюс превращается в минус; ответ раскрывается плавно (grid 0fr → 1fr), открыт один вопрос */
.faq { position: relative; z-index: 1; max-width: 1376px; margin: 0 auto; padding: 40px 32px 160px; }
.faq__head { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.faq__title { font: 800 64px/1 var(--font-display); letter-spacing: var(--ls); }
.faq__lead { margin-top: 20px; font-size: 19px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.faq__ask { margin-top: 32px; }
.faq__list { max-width: 1180px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .2); }  /* линия над первым вопросом — держит горизонталь (дизайнер 28.10) */
.qa { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .2); }
.qa::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--orange);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease-out); }
.qa.is-open::after { transform: scaleX(1); }
.qa__h { margin: 0; font: inherit; }
.qa__q { display: flex; justify-content: space-between; align-items: center; gap: 24px; width: 100%; padding: 30px 0;
  border: 0; background: none; color: var(--white); font: 800 24px/1.1 var(--font-display); letter-spacing: var(--ls); text-align: left;
  cursor: pointer; transition: color .3s var(--ease); }
.qa__q:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.qa__icon { position: relative; flex: none; width: 30px; height: 30px; transition: transform .5s var(--ease-out); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px;
  border-radius: 2px; background: var(--orange); transition: transform .5s var(--ease-out); }
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon { transform: rotate(180deg); }
.qa.is-open .qa__icon::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
/* ответ — абзац в три строки на треть блока (дизайнер 28.10) */
.qa__a p { text-wrap: pretty; max-width: 480px; padding: 0 0 32px; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .72);
  opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity .4s var(--ease), transform .5s var(--ease-out); }
.qa.is-open .qa__a p { opacity: 1; transform: none; transition-delay: .1s; }
@media (hover: hover) {
  .qa__q:hover { color: var(--orange); }
  .qa__q:hover .qa__icon { transform: rotate(90deg); }
  .qa.is-open .qa__q:hover .qa__icon { transform: rotate(180deg); }
}
.js-faq .qa { opacity: 0; transform: translate3d(0, 30px, 0); }
.js-faq .qa.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }

@media (max-width: 1100px) {
  .menu__head { grid-template-columns: 1fr; row-gap: 20px; }
  .menu__title { font-size: 60px; }
  .faq__title { font-size: 52px; }
}
@media (max-width: 760px) {
  .menu { padding: 32px 16px 72px; }
  .menu__head { margin-bottom: 28px; }
  .menu__title { font-size: 46px; } .menu__small { font-size: 20px; margin-top: 10px; }
  .menu__lead { font-size: 16px; }
  .menu__grid { grid-template-columns: 1fr; gap: 16px; }
  .dish { padding: 10px 10px 22px; border-radius: 20px; }
  .dish__visual { border-radius: 12px; }
  .dish__word { font-size: 48px; bottom: 12px; }
  .dish__btn { height: 50px; }
  .dish__title { margin: 18px 8px 0; font-size: 24px; }
  .dish__text { margin: 8px 8px 0; font-size: 15px; }
  .faq { padding: 24px 16px 96px; }
  .faq__head { margin-bottom: 32px; }
  .faq__title { font-size: 34px; }
  .faq__lead { font-size: 16px; text-wrap: balance; }
  .faq__ask { width: 100%; }
  .qa__q { padding: 22px 0; font-size: 19px; gap: 16px; }
  .qa__icon { width: 22px; height: 22px; }
  .qa__a p { padding: 0 0 22px; font-size: 15px; }
}

/* ---------- Финальный призыв ---------- */
/* По Leonardo «AI Marketing Tools»: фото во всю ширину в рамке (поля 16, скругление как у видео), общее затемнение и сильнее
   к центру — светлое на фото не спорит с заголовком; заголовок в форме «Френки» (размер «Вопросов и ответов», 2 строки),
   описание в 2 строки, белая кнопка; внизу строка «StandUp & Action · Москва · 18+». Рамка подаётся вперёд (0,94 → 1),
   фото внутри увеличивается (1 → 1,14) — script.js */
.cta { position: relative; z-index: 1; padding: 0 16px 120px; }
.cta__frame { position: relative; display: grid; place-items: center; min-height: max(560px, 80vh); overflow: hidden;
  border-radius: var(--r-video); background: #0a0a0a; transform-origin: 50% 100%; will-change: transform; }
.cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  transform-origin: 50% 40%; will-change: transform; }
.cta__shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, .3) 80%),
    linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .75)); }
.cta__in { position: relative; display: flex; flex-direction: column; align-items: center; padding: 96px 32px; text-align: center; }
.cta__title { font: 800 64px/1 var(--font-display); letter-spacing: var(--ls); }
.cta__lead { margin-top: 20px; font-size: 19px; line-height: 1.3; color: rgba(255, 255, 255, .85); }
.cta__btn { margin-top: 32px; }
.cta__foot { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: center; gap: 28px;
  font: 800 14px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cta__foot span + span::before { content: "·"; margin-right: 28px; color: var(--orange); }
.js-cta .cta__in > *, .js-cta .cta__foot { opacity: 0; transform: translate3d(0, 30px, 0); }
.js-cta.is-in .cta__in > *, .js-cta.is-in .cta__foot { opacity: 1; transform: none;
  transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d) * 120ms); }
@media (max-width: 1100px) { .cta__title { font-size: 52px; } }
@media (max-width: 760px) {
  .cta { padding: 0 0 72px; }
  .cta__frame { min-height: 560px; border-radius: 0; }
  .cta__in { padding: 72px 16px 96px; }
  .cta__title { font-size: 32px; }
  .cta__lead { font-size: 16px; text-wrap: balance; }
  .cta__btn { width: 100%; }
  .cta__foot { bottom: 22px; gap: 8px; font-size: 10px; letter-spacing: .04em; } .cta__foot span + span::before { margin-right: 8px; }
}
.static-motion .cta__in > *, .static-motion .cta__foot { opacity: 1 !important; transform: none !important; }

/* ---------- Блог ---------- */
/* Шапка по центру: заголовок в одну строку, описание, теги-переключатели (активный — оранжевый). Карточки вразброс:
   у каждой своя ширина, пропорция фото и сдвиг вниз (--w, --ar, --mt ставит script.js); лента едет по кругу */
.blog { position: relative; z-index: 1; padding: 40px 0 140px; overflow: hidden; }
/* шапка слева (дизайнер 28.10): заголовок белым в одну строку, описание шире, рубрики и стрелки — одна линия */
.blog__head { max-width: 1376px; margin: 0 auto 48px; padding: 0 32px; }
.blog__title { font: 800 64px/1 var(--font-display); letter-spacing: var(--ls); white-space: nowrap; }
.blog__lead { max-width: 920px; margin-top: 20px; font-size: 19px; line-height: 1.3; color: rgba(255, 255, 255, .72); }
.blog__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* рубрика — наша контурная кнопка: блик по обводке, заливка белым снизу; выбранная — белая.
   «Популярное» — всегда акцент, без ховера и нажатия (дизайнер 28.10) */
.chip { font-size: 15px; }
.chip.is-active:not(.chip--accent) { background: var(--white); color: var(--black); }
.chip--accent { color: var(--white); background: var(--orange); cursor: default; }
.chip--accent:active { transform: none; }
.posts { position: relative; padding: 0 0 48px; touch-action: pan-y; cursor: grab; }
.posts.is-drag { cursor: grabbing; }
.posts__track { display: flex; align-items: flex-start; gap: 28px; will-change: transform; }
.posts__track.is-anim { transition: transform .9s var(--ease-out); }
/* карточки — по одной верхней линии: большая 4:3 и маленькая квадратная по очереди */
.post { flex: none; display: flex; flex-direction: column; align-items: flex-start; width: var(--w); color: var(--white); text-decoration: none;
  transition: opacity .5s var(--ease-out); -webkit-user-drag: none; }
.post__media { position: relative; display: block; width: 100%; aspect-ratio: var(--ar); overflow: hidden; border-radius: var(--r-card); background: #111; }
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
  transition: transform .9s var(--ease-out), filter .6s var(--ease-out); filter: brightness(.9); }
.post__meta { display: flex; gap: 8px; margin-top: 18px; font-size: 14px; color: rgba(255, 255, 255, .5); }
/* название и описание — 1–2 строки, перенос только там, где задан в BLOG */
.post__title { display: block; margin-top: 10px; font: 800 22px/1.1 var(--font-display); letter-spacing: var(--ls); white-space: nowrap;
  transition: color .3s var(--ease); }
.post__text { display: block; margin-top: 8px; font-size: 15px; line-height: 1.35; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.post__btn { margin-top: 20px; }
@media (hover: hover) {
  .post:hover .post__media img { transform: scale(1.06); filter: brightness(1); }
  .post:hover .post__title { color: var(--orange); }
  .post:hover .post__btn::before { background: var(--white); animation: none; }   /* карточка под курсором — у кнопки белая обводка, заливка — только на самой кнопке */
}
.post:focus-visible { outline: 2px solid var(--white); outline-offset: 6px; border-radius: var(--r-card); }
.blog__bar { max-width: 1376px; margin: 8px auto 0; padding: 0 32px; }
.blog__arrows { display: flex; gap: 12px; flex: none; }
.blog__arrow { width: 56px; height: 56px; padding: 0; background: rgba(0, 0, 0, .25); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.blog__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blog__arrow .btn__label { display: inline-flex; }
.blog__arrow--prev svg { transform: scaleX(-1); }
.js-blog .post { opacity: 0; }
.js-blog.is-in .post { opacity: 1; transition: opacity .8s var(--ease-out) calc(var(--k, 0) * 90ms); }
@media (max-width: 1100px) { .blog__title { font-size: 48px; } }
@media (max-width: 760px) {
  .blog { padding: 24px 0 96px; }
  .blog__head { padding: 0 16px; margin-bottom: 28px; }
  .blog__title { font-size: 30px; white-space: normal; }
  .blog__lead { font-size: 16px; }
  .blog__row { margin-top: 24px; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; height: 38px; padding: 0 16px; font-size: 14px; }
  .blog__arrows { display: none; }
  .posts__track { gap: 16px; }
  .post__title { font-size: 19px; } .post__text { font-size: 14px; }
  .blog__bar { padding: 0 16px; }
}
.static-motion .post { opacity: 1 !important; }

/* ---------- Текст для поиска ---------- */
/* Слева текст по силовой страницы, справа фото во всю высоту текста и прилипает при прокрутке (дизайнер 28.10) */
.seo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 700px) minmax(0, 1fr); column-gap: 72px;
  max-width: 1376px; margin: 0 auto; padding: 40px 32px 140px; }
.seo__title { font: 800 52px/1 var(--font-display); letter-spacing: var(--ls); white-space: nowrap; }
.seo__title .accent { color: var(--orange); }
.seo__text { max-width: 700px; }
.seo__text > p { margin-top: 16px; font-size: 17px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.seo__title + p { margin-top: 32px; }
.seo__sub { margin-top: 40px; font: 800 28px/1.1 var(--font-display); letter-spacing: var(--ls); }
.seo__list { list-style: none; margin: 16px 0 0; padding: 0; }
.seo__list li { position: relative; padding: 10px 0 10px 24px; font-size: 17px; line-height: 1.4; color: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(255, 255, 255, .12); }
.seo__list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
/* ссылки в тексте — белые с оранжевым подчёркиванием, при наведении оранжевые */
.seo a { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px;
  text-underline-offset: 4px; transition: color .25s var(--ease); }
.seo a:hover { color: var(--orange); }
.seo__media { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; margin: 0; height: min(720px, calc(100vh - var(--header-h) - 48px));
  border-radius: var(--r-card); overflow: hidden; background: #111; }
.seo__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }

/* ---------- Контакты и карта ---------- */
/* Карта во всю ширину в рамке (как у призыва), плашка контактов — стеклом поверх слева; на телефоне плашка под картой */
.contacts { position: relative; z-index: 1; padding: 0 16px 40px; }   /* подвал ближе к карте (дизайнер 28.10): было 120 */
.contacts__frame { position: relative; height: max(620px, 86vh); border-radius: var(--r-card); overflow: hidden; background: #111; }
/* карта — из Конструктора Яндекса дизайнера (28.10), показываем как есть, без фильтра; до загрузки — тёмное поле */
.contacts__map { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
.contacts__card { position: absolute; left: 32px; top: 32px; width: 460px; display: flex; flex-direction: column;
  padding: 36px 32px 32px; border-radius: var(--r-card); background: rgba(10, 10, 10, .78); border: 1px solid rgba(255, 255, 255, .1);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.contacts__title { font: 800 44px/1 var(--font-display); letter-spacing: var(--ls); white-space: nowrap; }
.contacts__title .accent { color: var(--orange); }
.contacts__list { margin: 28px 0 0; }
.contacts__list > div { padding: 10px 0; }
.contacts__list > div + div { margin-top: 4px; }
.contacts__list dt { font-size: 13px; color: rgba(255, 255, 255, .45); }
.contacts__list dd { margin: 6px 0 0; font-size: 18px; line-height: 1.3; }
.contacts__list a { color: var(--white); text-decoration: none; transition: color .25s var(--ease); }
.contacts__list a:hover { color: var(--orange); }
.contacts__btn { flex: 1; height: 48px; margin-right: 4px; }
.contacts__soc { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.contacts__soc .social, .footer__soc .social { width: 48px; height: 48px; justify-content: center; align-items: center; border-radius: 50%;
  color: var(--white); border: 1.5px solid rgba(255, 255, 255, .2); transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.contacts__soc .social svg, .footer__soc .social svg { height: 18px; margin: 0; width: auto; }
.contacts__soc .social:nth-child(3) svg, .footer__soc .social:nth-child(3) svg { width: 24px; height: auto; }
@media (hover: hover) {
  .contacts__soc .social:hover, .footer__soc .social:hover { opacity: 1; background: var(--white); border-color: var(--white); color: var(--black); }
}

/* ---------- Подвал ---------- */
/* По Leonardo: соцсети и текст слева, колонки ссылок справа, полоса с кнопкой, ниже огромное название акцентом, срезанное краем.
   Свет по Resend: по буквам раз в ≈6 с проходит блик, за курсором — светлое пятно (--mx, --my — script.js) */
.footer { position: relative; z-index: 1; overflow: hidden; padding: 64px 32px 0; letter-spacing: var(--ls); }
/* Появление подвала (дизайнер 28.10): линия сверху растёт от центра, колонки поднимаются по очереди (шаг 90 мс),
   «STANDUP & ACTION» привязано к прокрутке — по мере доезда до низа поднимается из-под края и сжимается до места (--fp — script.js) */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .14);
  transform-origin: 50% 0; transition: transform 1.4s var(--ease-out); }
.js-foot.footer::before { transform: scaleX(0); }
.js-foot.footer.is-in::before { transform: none; }
.js-foot .footer__grid > :not(.footer__line) { opacity: 0; transform: translate3d(0, 36px, 0); }
.js-foot.is-in .footer__grid > :not(.footer__line) { opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) calc(var(--fi, 0) * 90ms), transform 1.1s var(--ease-out) calc(var(--fi, 0) * 90ms), color .25s var(--ease); }
.js-foot .footer__line { transform: scaleX(0); transform-origin: 0 50%; }
.js-foot.is-in .footer__line { transform: none; transition: transform 1.6s var(--ease-out) .5s; }
/* одна сетка на весь подвал: описание · Шоу · Клуб · Гостям · Контакты · соцсети; нижняя строка — по тем же колонкам */
.footer__grid { display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(4, minmax(0, 1fr)) auto; column-gap: 32px;
  max-width: 1376px; margin: 0 auto; align-items: start; }
.footer__logo { display: inline-block; font-size: 22px; line-height: 1; color: var(--white); text-decoration: none; }
.footer__note { margin-top: 18px; white-space: nowrap; font-size: 12.5px; line-height: 1.45;   /* мельче — не шире логотипа на глаз (дизайнер 28.10) */
  color: rgba(255, 255, 255, .5); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.3; }
.footer__col h3 { margin-bottom: 8px; font: 800 15px/1 var(--font-display); letter-spacing: var(--ls); text-transform: uppercase; }
.footer__col a, .footer__col span { color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .25s var(--ease); }
.footer__col a:hover { color: var(--orange); }
.footer__soc { display: flex; gap: 10px; }
.footer__line { grid-column: 1 / -1; width: 100%; height: 1px; margin: 64px 0 24px; border: 0; background: rgba(255, 255, 255, .12); }
.footer__copy, .footer__legal { white-space: nowrap; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .4); text-decoration: none; }
.footer__legal { justify-self: start; transition: color .25s var(--ease); }
/* политика — от линии «Шоу» (длинная, занимает две колонки), оферта — от линии «Гостям» */
.footer__legal--policy { grid-column: 2 / span 2; }
.footer__legal--offer { grid-column: 4; }
.footer__legal:hover { color: var(--white); }
.footer__top-btn { grid-column: 5 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-size: 14px;
  color: var(--white); text-decoration: none; transition: color .25s var(--ease); }
.footer__top-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-out); }
.footer__top-btn:hover { color: var(--orange); }
.footer__top-btn:hover svg { transform: translateY(-4px); }
.footer__word b, .footer__word i { font: inherit; }
.footer__word { --mx: -999px; --my: 50%; position: relative; margin: 20px -32px 0; height: calc(var(--fs, 200px) * .74); overflow: hidden;
  display: flex; justify-content: center; }
.footer__word span { display: block; font: 800 var(--fs, 200px)/.86 var(--font-display); letter-spacing: var(--ls); white-space: nowrap;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image:
    radial-gradient(circle 260px at var(--mx) var(--my), rgba(255, 214, 180, .95), rgba(255, 214, 180, 0) 70%),
    linear-gradient(100deg, transparent 40%, rgba(255, 236, 220, .9) 50%, transparent 60%),
    linear-gradient(90deg, var(--white) var(--split, 50%), var(--orange) var(--split, 50%));
  background-size: 100% 100%, 250% 100%, 100% 100%; background-repeat: no-repeat;
  background-position: 0 0, var(--sweep, 160%) 0, 0 0;
  transform-origin: 50% 100%; transform: translate3d(0, calc((1 - var(--fp, 1)) * 70%), 0) scale(calc(1 + (1 - var(--fp, 1)) * .18)); }
.footer__word.is-in span { animation: word-sweep 6s var(--ease) 1.2s infinite; }
@keyframes word-sweep { 0% { --sweep: 160%; } 45%, 100% { --sweep: -60%; } }
@property --sweep { syntax: "<percentage>"; inherits: false; initial-value: 160%; }
.static-motion .footer__word span { transform: none; animation: none; }
.static-motion .footer__grid > * { opacity: 1 !important; transform: none !important; }
.static-motion .footer::before, .static-motion .footer__line { transform: none !important; }

@media (max-width: 1100px) {
  .seo { column-gap: 48px; }
  .footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 40px; }
  .footer__about { grid-column: 1 / -1; }
  .footer__soc { grid-column: 1 / -1; }
  .footer__line { margin-top: 24px; }
  .footer__copy { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer__legal--policy { grid-column: 1 / span 2; } .footer__legal--offer { grid-column: 3; }
  .footer__top-btn { grid-column: 3 / -1; }
}
@media (max-width: 760px) {
  .seo { grid-template-columns: 1fr; padding: 24px 16px 96px; }
  .seo__title { font-size: 26px; }
  .seo__text p br { display: none; }   /* на телефоне переносы по смыслу не влезают — текст выравнивается сам */
  .seo__text > p { text-wrap: pretty; }
  .seo__text > p, .seo__list li { font-size: 16px; }
  .seo__sub { margin-top: 32px; font-size: 22px; }
  .seo__media { position: relative; top: 0; height: auto; aspect-ratio: 4 / 5; margin-top: 32px; }
  .contacts { padding: 0 10px 32px; }
  .contacts__frame { height: auto; display: flex; flex-direction: column; }
  .contacts__map { position: relative; height: 380px; order: 2; }
  .contacts__card { position: relative; inset: auto; width: auto; padding: 28px 20px 24px; border: 0; border-radius: 0; background: #0b0b0b; }
  .contacts__title { font-size: 28px; }
  .footer { padding: 56px 16px 0; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .footer__line { margin: 8px 0 0; }
  .footer__legal { margin-top: -16px; }
  .footer__legal--policy, .footer__legal--offer { grid-column: 1 / -1; }
  .footer__top-btn { grid-column: 1 / -1; justify-self: start; }
  .footer__word { margin: 20px -16px 0; }
}

/* Мобильный круг 3 — 29.10: плотнее первый экран, свайп вместо стены портретов. */
.comic--phone { display: none; }
.contacts__btn.btn--accent { color: var(--white); }
@media (max-width: 760px) {
  .day { column-gap: 26px; }
  .comics__lead { font-size: clamp(12px, 3.55vw, 16px); line-height: 1.5; text-wrap: initial; }
  .comics__lead br { display: initial; }
  .comics__grid { display: flex; gap: 16px; overflow-x: auto; overflow-y: hidden; margin: 0 -16px; padding: 12px 16px 20px;
    scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; }
  .comics__grid::-webkit-scrollbar { display: none; }
  .comics__grid .comic { display: block; flex: 0 0 86%; min-width: 0; scroll-snap-align: start; }
  .comics__grid .comic__in { opacity: 1; transform: none; transition: none; }
  .comic--more { text-decoration: none; color: var(--white); }
  .comic--more .comic__in > img { filter: blur(8px) brightness(.55); }
  .comic--more .comic__glass { inset: 0; border-radius: inherit; display: flex; flex-direction: column; justify-content: center;
    align-items: flex-start; background: rgba(255,255,255,.08); backdrop-filter: blur(20px); }
  .comic__more-link { display: inline-block; margin-top: 24px; padding: 14px 18px; background: var(--orange); border-radius: 99px; }
  .benefits__grid { gap: 24px 16px; padding: 12px 6px 24px; }
  .benefit:nth-child(2) { margin-top: 0; }
  .benefit:nth-child(3) { margin-top: 0; }
  .benefit:nth-child(4) { margin-top: 0; }
  .faq__head { text-align: left; }
  .faq__lead { text-wrap: initial; }
  .contacts__frame { background: transparent; overflow: visible; }
  .contacts__map { height: auto; aspect-ratio: 4 / 5; border-radius: var(--r-card); margin-top: 24px; }
  .footer__soc { grid-column: 1; align-self: end; }
  .footer__top-btn { grid-column: 2; grid-row: 4; justify-self: end; align-self: end; min-height: 48px; }
  .footer__legal { margin-top: 0; white-space: normal; }
  .footer__legal--policy { grid-column: 1; }
  .footer__legal--offer { grid-column: 2; justify-self: end; }
  .footer__word { height: auto; padding: 0 16px 10px; }
  .footer__word span { width: 100%; white-space: normal; font-size: 0; background: none; }
  .footer__word b, .footer__word i { display: block; width: max-content; max-width: 100%; line-height: .95; letter-spacing: -.02em; }
  .footer__word b { color: var(--white); }
  .footer__word i { color: var(--orange); }
}

/* Телефон, круг 4: единая сетка, естественные переносы и одинаковые состояния кнопок. */
.footer__logo span { color: var(--orange); }
.contacts__btn.btn--accent { background: var(--orange); color: var(--white); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.contacts__btn.btn--accent:hover, .contacts__btn.btn--accent:active, .contacts__btn.btn--accent:focus-visible { background: var(--orange); color: var(--white); box-shadow: 0 0 28px rgba(255,86,2,.4); }
.contacts__btn .btn__goo { display: none; }
.contacts__btn .btn__label { color: inherit; }
@media (max-width: 760px) {
  .sbar { display: none !important; }
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .comic--more .comic__glass { align-items: center; text-align: center; }
  .comic__more-link { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 22px;
    font: 500 14px/var(--lh) var(--font-text); letter-spacing: var(--ls); color: var(--black); background: var(--white);
    transition: background .25s var(--ease), color .25s var(--ease); }
  .comic--more:hover .comic__more-link, .comic--more:active .comic__more-link, .comic--more:focus-visible .comic__more-link { background: var(--orange); color: var(--white); }
  .about__title, .about__p, .about__sub { text-wrap: pretty; }
  .about__big { white-space: nowrap; font-size: clamp(24px, 7.1vw, 42px); }
  .about__p { text-wrap: pretty; }
  .about__p br, .faq__lead br, .benefits__lead br, .menu__desc br, .gallery__lead br, .blog__lead br { display: none; }
  .benefits__grid { grid-auto-rows: 1fr; gap: 16px; padding: 0; }
  .benefit__in { min-height: 244px; height: 100%; padding: 16px; }
  .benefit__mark { height: 80px; flex: 0 0 80px; margin-bottom: 16px; }
  .benefit__in > div:last-child { flex: 1; display: flex; flex-direction: column; }
  .benefit h3 { min-height: 2.1em; height: 2.1em; line-height: 1.05; text-wrap: balance; }
  .benefit p { margin-top: 12px; min-height: 3.75em; line-height: 1.25; text-wrap: balance; }
  .contacts { padding-left: 16px; padding-right: 16px; }
  .contacts__card { padding: 24px 0 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .contacts__soc { gap: 10px; }
  .footer__word { padding-bottom: 0; }
  .footer__word b, .footer__word i { line-height: .86; }
  .footer__word i { margin-top: -2px; }
}

/* The map never captures page scrolling until activated with an explicit click. */
.contacts__map-shell { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.contacts__map-shell .contacts__map { position:absolute; inset:0; width:100%; height:100%; margin:0; pointer-events:none; }
.contacts__map-shell.is-active .contacts__map { pointer-events:auto; }
.contacts__card { z-index:2; }
.map-activate { position:absolute; inset:0; z-index:1; border:0; background:transparent; color:var(--white); cursor:pointer; }
.map-activate span, .map-lock { padding:12px 18px; border:1px solid rgba(255,255,255,.2); border-radius:99px; background:rgba(0,0,0,.76); color:var(--white); font:500 13px/1.2 var(--font-text); }
.map-activate span { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); white-space:nowrap; }
.map-lock { position:absolute; z-index:3; right:16px; top:16px; cursor:pointer; }
.map-activate:focus-visible { outline:2px solid var(--orange); outline-offset:-4px; }
.map-activate[hidden], .map-lock[hidden] { display:none; }
@media (max-width:760px) { .contacts__map-shell { position:relative; inset:auto; order:2; aspect-ratio:4/5; margin-top:24px; border-radius:var(--r-card); } }
/* Reserve card columns even while lazy images have no source yet. */
.card, .card__in { min-width: 0; }

.rep__track { cursor:grab; user-select:none; -webkit-user-select:none; }
.comics__grid.is-drag, .chips.is-drag { cursor:grabbing; user-select:none; -webkit-user-select:none; }
.posts, .comics__grid { outline-offset:4px; }
@media (max-width:760px) { .comics__grid { cursor:grab; } }

/* Mobile hero, 29.10: tall poster from frame one; alternating entrances, then the brand.
   Круг 20: строки въезжают из-за края (слева / справа / слева) — сторону видно; бренд — после третьей */
@media (max-width:760px), (max-aspect-ratio:4/5) {
  .wl__in { transition:opacity .3s var(--ease),transform .75s cubic-bezier(.2,.8,.2,1); transform:none; }
  html:not(.phone-intro) .wl__in { opacity:0; }
  html:not(.phone-intro) .wl:nth-child(odd) .wl__in { transform:translate3d(-70vw,0,0); }
  html:not(.phone-intro) .wl:nth-child(even) .wl__in { transform:translate3d(70vw,0,0); }
  .wl:nth-child(1) .wl__in { transition-delay:0s; }
  .wl:nth-child(2) .wl__in { transition-delay:.5s; }
  .wl:nth-child(3) .wl__in { transition-delay:1s; }
  .stage .center > * { transition:opacity .45s var(--ease),transform .45s var(--ease-out); filter:none !important; }
  /* круг 22: третья строка встала (1 + .75 с) — тогда шапка и заголовок с описанием и кнопками разом */
  .stage .title, .stage .lead, .stage .center__btns { transition-delay:1.8s; }
  /* шапка наверху выше (88), после 50 px прокрутки сжимается до обычных 64 */
  .header { transition:opacity .45s var(--ease),transform .45s var(--ease-out),height .4s var(--ease-out); transition-delay:1.8s,1.8s,0s; }
  html:not(.phone-intro) .header { opacity:0; transform:translateY(-16px); }
  .header:not(.is-glass) { height:88px; }
  .logo { transition:font-size .4s var(--ease-out); }
  .header:not(.is-glass) .logo { font-size:20px; }
  html:not(.phone-intro) .stage .center > * { opacity:0; transform:translateY(16px); filter:blur(6px); }
  .static-motion .wl__in, .static-motion .stage .center > * { opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}
@media (max-width:760px) { .seo__text { min-width:0; } .seo__text .nowrap { white-space:normal; } }
@media (max-width:760px) { .seo__title { font-size:clamp(23px,6.5vw,26px); white-space:normal; } }

/* Mobile scene: no dark backing or fading rectangle behind portraits. */
.rise__ph { background:transparent; }

/* Real organization card: keep contact details clear of Yandex's own balloon. */
.contacts__frame { display:grid; grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr); gap:24px; height:auto; padding:24px; }
.contacts__frame .contacts__card { position:relative; left:auto; top:auto; width:auto; order:1; align-self:start; }
.contacts__frame .contacts__map-shell { position:relative; inset:auto; order:2; min-height:580px; margin:0; aspect-ratio:auto; }
.place-reviews { display:grid; grid-template-columns:minmax(0,.8fr) minmax(300px,1.2fr); align-items:start; gap:48px; padding:48px 40px 80px; }
.place-reviews__intro h2 { margin:0 0 24px; font:800 clamp(36px,4vw,64px)/1 var(--font-display); letter-spacing:var(--ls); }
.place-reviews__intro p { max-width:440px; margin:0 0 20px; font-size:18px; line-height:1.5; }
.place-reviews__intro .btn { margin-top:12px; white-space:normal; text-align:center; }
.place-reviews__embed { display:block; width:100%; max-width:760px; height:600px; border:0; border-radius:var(--r-card); background:#fff; }
@media (max-width:1000px) { .contacts__frame { grid-template-columns:minmax(0,1fr); } .contacts__frame .contacts__map-shell { min-height:520px; } }
@media (max-width:760px) { .contacts__frame { padding:0; gap:16px; } .place-reviews { grid-template-columns:minmax(0,1fr); gap:24px; padding:24px max(10px,env(safe-area-inset-left)) 48px; } .place-reviews__intro { padding:0 6px; } .place-reviews__embed { height:560px; } }

.contacts__map-shell .contacts__map[hidden] { display:none; }