:root {
  --ink: #050604;
  --bone: #e8dfcb;
  --acid: #b5bd82;
  --blood: #d53c27;
}

* { box-sizing: border-box; }
/* `[hidden]` в таблице браузера — это `display: none` с нулевой специфичностью, и
   любое авторское правило с `display` его перебивает молча. Так и вышло: у
   `.events__empty` стоит `display: flex`, и скрытый абзац держал **593px** пустоты
   в самом низу главной — дойдя шагом до последней афиши, следующий жест сваливал
   страницу в эту пустоту. Правило общее и с `!important`, потому что это смысл
   самого атрибута, а не оформление; пять точечных заплаток ниже оно заменяет. */
[hidden] { display: none !important; }

html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
/* Пока афишу листает шаг колеса, `scroll-behavior` обязан быть `auto`: пружина
   пишет `scrollTop` каждый кадр, а при `smooth` каждая такая запись заводит свою
   плавную прокрутку — шаг едет рывками. Класс ставит script.js, и только когда шаг
   действительно включён; якоря внутри страницы он же везёт той же пружиной. */
html.is-stepped { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--bone);
  background: var(--ink);
  font-family: 'Oswald', sans-serif;
}
.is-leaving-event, .is-leaving-event body { overflow: hidden; }
.page-transition { position: fixed; z-index: 200; inset: 0; pointer-events: none; perspective: 1300px; perspective-origin: 50% 48%; }
.page-transition__backdrop { position: absolute; inset: 0; background: #000; opacity: 0; will-change: opacity; }
.page-transition__poster { position: fixed; z-index: 1; display: block; height: auto; backface-visibility: hidden; transform-style: preserve-3d; will-change: left, top, width, transform; box-shadow: 0 35px 90px rgba(0, 0, 0, .72); }
.event-card__poster.is-transition-source { visibility: hidden; }
button, a { color: inherit; }
a { text-decoration: none; }

.intro {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
  /* Прозрачность заставки ведёт Motion из script.js, здесь остаётся только
     снятие слоя из потока — за ним `is-finished`. */
  transition: visibility .65s;
}
.intro::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(125, 134, 78, .13), transparent 55%);
}
.intro.is-finished { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__logo {
  position: relative;
  width: min(76vmin, 760px);
  aspect-ratio: 1;
  filter: drop-shadow(0 0 45px rgba(181, 189, 130, .16));
}
.intro__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.intro.is-running .intro__layer--main { animation: logo-reveal 1.75s steps(9, end) .18s forwards; }
.intro.is-running .intro__layer--ghost { filter: sepia(1) saturate(7) hue-rotate(325deg); animation: logo-ghost 1.35s steps(7, end) .1s forwards; }
.intro.is-running .intro__layer--slash { clip-path: polygon(0 43%, 100% 34%, 100% 49%, 0 58%); filter: saturate(2); animation: logo-slash 1.5s steps(8, end) .25s forwards; }
.intro__grain, .hero__noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
.intro__signal {
  position: absolute;
  left: clamp(22px, 4vw, 64px);
  bottom: clamp(22px, 4vw, 52px);
  margin: 0;
  color: rgba(232, 223, 203, .62);
  font: 500 10px/1 'Unbounded', sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* Точка живого сигнала. Текст #signal перерисовывает script.js, поэтому иконка
   остаётся псевдоэлементом и приходит маской из icons.css. */
.intro__signal::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; vertical-align: middle; background: var(--blood); --wh-mask: var(--wh-mask-dot); -webkit-mask: var(--wh-mask) center/contain no-repeat; mask: var(--wh-mask) center/contain no-repeat; animation: wh-dot-pulse .9s ease-in-out infinite; }
.intro__meter { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #171915; }
.intro__meter span { display: block; width: 0; height: 100%; background: var(--blood); box-shadow: 0 0 15px var(--blood); transition: width 80ms steps(1); }
.intro__skip {
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(18px, 4vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 0;
  padding: 8px 0;
  color: rgba(232, 223, 203, .45);
  background: transparent;
  font: 400 12px/1 'Oswald', sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.intro__skip:hover { color: var(--bone); }
.intro__skip .site-icon { --icon-size: 12px; color: var(--blood); }

/* Конечные состояния передачи «заставка → сайт». Само движение ведёт Motion
   (script.js): у CSS-перехода нет обещания на конец, а его здесь нужно
   дождаться, чтобы убрать заставку из потока. */
.site { opacity: 0; }
.site.is-visible { opacity: 1; }
/* Шапка та же, что на остальных страницах (.platform-nav в platform.css):
   логотипа в ней нет, инструменты справа. Высоту раньше задавал логотип на 48px
   внутри — теперь держим её сами, иначе первый экран поехал бы вверх. */
.nav {
  position: absolute;
  z-index: 10;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 92px;
  padding: 0 clamp(22px, 4vw, 62px);
  border-bottom: 1px solid rgba(232, 223, 203, .17);
  text-transform: uppercase;
}
.nav__tools { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav__search { position: relative; width: 42px; height: 42px; }
.nav__search > summary { position: relative; z-index: 2; width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; list-style: none; }
.nav__search > summary::-webkit-details-marker { display: none; }
.nav__search[open] > summary { color: var(--red); }
.nav__search-field { position: absolute; z-index: 1; top: 50%; right: 0; width: min(440px,calc(100vw - 150px)); transform: translateY(-50%); }
.nav__search input { width: 100%; height: 42px; border: 1px solid rgba(232,223,203,.2); border-radius: 4px; padding: 0 48px 0 13px; background: #090b08; color: var(--bone); outline: none; box-shadow: 0 10px 30px rgba(0,0,0,.22); transform-origin: right center; }
.nav__search input:focus { border-color: var(--red); }
.nav__search .site-menu__results { position: absolute; top: calc(100% + 7px); right: 0; left: 0; max-height: min(280px,calc(100vh - 100px)); padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; background: #090b08; box-shadow: 0 18px 50px rgba(0,0,0,.48); }
.nav__menu { justify-self: end; display: flex; align-items: center; gap: 12px; min-height: 44px; border: 0; padding: 0; background: transparent; color: var(--bone); font: 500 11px 'Unbounded', sans-serif; text-transform: uppercase; cursor: pointer; }
.nav__menu i { position: relative; width: 25px; height: 1px; background: currentColor; transition: transform .2s; }
.nav__menu i::after { content: ''; position: absolute; right: 0; top: 6px; width: 16px; height: 1px; background: currentColor; transition: width .2s,transform .2s; }
.nav__menu[aria-expanded='true'] i { transform: translateY(3px) rotate(45deg); }
.nav__menu[aria-expanded='true'] i::after { width: 25px; transform: translateY(-6px) rotate(-90deg); }
.nav__menu:focus-visible,.site-menu a:focus-visible,.site-menu button:focus-visible { outline: 2px solid var(--red); outline-offset: 5px; }
.site-menu-open { overflow: hidden; }
.site-menu-layer { position: fixed; z-index: 100; inset: 0; display: grid; align-items: start; justify-items: end; padding: 12px; }
.site-menu-layer[hidden] { display: none; }
.site-menu-layer__backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,3,2,.72); backdrop-filter: blur(7px); cursor: default; }
.site-menu { position: relative; width: min(400px,100%); max-height: calc(100vh - 24px); overflow-y: auto; display: flex; flex-direction: column; padding: clamp(22px,3vw,34px); padding-bottom: max(clamp(22px,3vw,34px),env(safe-area-inset-bottom)); border: 1px solid var(--line); border-radius: 5px; background: #090b08; box-shadow: -30px 0 90px rgba(0,0,0,.45); }
.site-menu__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); color: rgba(232,223,203,.45); font: 600 8px 'Unbounded',sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.site-menu__head strong { color: var(--acid); font-weight: 600; }
.site-menu__user { display: grid; grid-template-columns: 46px minmax(0,1fr); align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.site-menu__user:hover strong { color: var(--red); }
.site-menu__user[hidden] { display: none; }
.site-menu__avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(232,223,203,.18); border-radius: 50%; background: rgba(232,223,203,.06); color: var(--acid); font: 700 10px 'Unbounded',sans-serif; }
.site-menu__avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.site-menu__user > span:last-child { min-width: 0; display: grid; gap: 4px; }
.site-menu__user strong,.site-menu__user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-menu__user strong { color: var(--bone); font: 600 12px 'Unbounded',sans-serif; }
.site-menu__user small { color: rgba(232,223,203,.48); font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.site-menu__search { padding: 9px 0; border-bottom: 1px solid var(--line); }
.site-menu__search summary { display: flex; align-items: center; justify-content: space-between; min-height: 30px; color: rgba(232,223,203,.58); font: 500 9px 'Unbounded',sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; list-style: none; }
.site-menu__search summary::-webkit-details-marker,.site-menu__events summary::-webkit-details-marker { display: none; }
.site-menu__search summary .site-icon { color: var(--acid); }
.site-menu__search label { display: block; padding-top: 7px; }
.site-menu__search input { width: 100%; height: 36px; border: 1px solid rgba(232,223,203,.17); border-radius: 3px; padding: 0 10px; background: rgba(232,223,203,.04); color: var(--bone); outline: none; }
.site-menu__search input:focus { border-color: var(--red); }
.site-menu__results { display: grid; max-height: 180px; overflow-y: auto; padding-top: 5px; }
.site-menu__results[hidden] { display: none; }
.site-menu__results > a { display: grid; gap: 2px; padding: 7px 2px; border-bottom: 1px solid rgba(232,223,203,.07); }
.site-menu__results strong { color: var(--bone); font-size: 12px; }
.site-menu__results small,.site-menu__results > span { color: rgba(232,223,203,.4); font-size: 10px; }
.site-menu__links { display: grid; padding: 10px 0; }
.site-menu__links a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; padding: 10px 0; border-bottom: 1px solid rgba(232,223,203,.1); color: var(--bone); font: 700 clamp(16px,2vw,20px)/1.2 'Unbounded',sans-serif; letter-spacing: -.025em; }
.site-menu__links a[hidden] { display: none; }
.site-menu__events { border-bottom: 1px solid rgba(232,223,203,.1); }
.site-menu__events summary { display: grid; grid-template-columns: 30px 1fr auto; align-items: baseline; padding: 10px 0; color: var(--bone); font: 700 clamp(16px,2vw,20px)/1.2 'Unbounded',sans-serif; letter-spacing: -.025em; cursor: pointer; list-style: none; }
.site-menu__events summary .site-icon { --icon-size: 14px; align-self: center; color: var(--acid); }
.site-menu__events summary span { color: rgba(232,223,203,.32); font: 600 8px 'Unbounded',sans-serif; letter-spacing: .08em; }
.site-menu__events > div { display: grid; padding: 2px 0 8px 30px; }
.site-menu__events > div a { display: block; padding: 6px 0; border: 0; color: rgba(232,223,203,.58); font: 500 10px 'Unbounded',sans-serif; letter-spacing: 0; }
.site-menu__links a:hover { color: var(--red); }
.site-menu__links a span { color: rgba(232,223,203,.32); font: 600 8px 'Unbounded',sans-serif; letter-spacing: .08em; }
.site-menu__account { display: grid; gap: 0; margin-top: 10px; padding-top: 13px; border-top: 1px solid var(--line); }
.site-menu__account[hidden] { display: none; }
.site-menu__account::before { content: 'Рабочие панели'; margin-bottom: 7px; color: rgba(232,223,203,.36); font: 600 8px 'Unbounded',sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.site-menu__account a,.site-menu__account button { display: flex; align-items: center; justify-content: space-between; min-height: 32px; border: 0; padding: 0; background: transparent; color: rgba(232,223,203,.62); font: 500 9px 'Unbounded',sans-serif; letter-spacing: .05em; text-align: left; text-transform: uppercase; cursor: pointer; }
.site-menu__account a:hover { color: var(--acid); }
.site-menu__account button { min-height: 30px; margin-top: 7px; border-top: 1px solid rgba(232,223,203,.08); color: var(--red); }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  padding: 115px clamp(22px, 6vw, 92px) 50px;
  background: radial-gradient(circle at 68% 45%, #1c2118 0, #090b08 36%, #050604 68%);
}
.hero::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 170px #000; pointer-events: none; }
.hero__copy { position: relative; z-index: 3; width: min(820px, 72vw); }
.hero h1 { margin: 0; font: 900 clamp(70px, 13.2vw, 205px)/.75 'Unbounded', sans-serif; letter-spacing: -.09em; text-transform: uppercase; text-shadow: 0 8px 30px #000; }
.hero h1 em {
  position: relative;
  left: clamp(24px, 8vw, 120px);
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.35px var(--bone);
  font-family: 'Archivo Black', sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -.065em;
  text-shadow: none;
  transform: scaleX(1.12);
  transform-origin: left center;
}
.hero__footer { display: flex; align-items: end; gap: clamp(32px, 4vw, 70px); margin: 54px 0 0 clamp(28px, 5vw, 86px); }
.hero__footer p { width: min(460px, 43vw); margin: 0; color: rgba(232, 223, 203, .65); font-size: clamp(15px, 1.25vw, 19px); font-weight: 300; line-height: 1.45; text-wrap: balance; }
.hero__footer a { padding-bottom: 7px; border-bottom: 1px solid var(--blood); font: 500 11px 'Unbounded', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.hero__footer a .site-icon { margin-left: 20px; --icon-size: 15px; color: var(--blood); }
.hero__mark { position: absolute; z-index: 1; top: 50%; right: -2vw; width: min(56vw, 820px); margin: 0; transform: translateY(-47%) rotate(3deg); filter: saturate(.76) contrast(1.08); opacity: .72; }
.hero__mark img { display: block; width: 100%; }
.hero__side { position: absolute; z-index: 3; right: 24px; top: 50%; margin: 0; color: rgba(232,223,203,.4); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; writing-mode: vertical-rl; transform: translateY(-50%); }
.manifesto { min-height: 95vh; padding: 14vh 8vw; background: var(--bone); color: var(--ink); }
.manifesto h2 { margin: 0; font: 700 clamp(46px, 8.8vw, 140px)/.92 'Unbounded'; letter-spacing: -.07em; text-transform: uppercase; }
.manifesto h2 span { color: transparent; -webkit-text-stroke: 2px #8f2a1e; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: -.02em; }

/* Снапа у блока нет вовсе — ни обязательного, ни `proximity`. Любой снап
   срабатывает по остановке прокрутки: жест ещё доезжает на инерции, человек его
   останавливает, а блок в этот момент сам едет к ближайшей точке — со стороны
   страница вырывается из рук. Обязательный вдобавок отщёлкивал слабую прокрутку
   назад, и пролистнуть чуть-чуть было нельзя вообще. Перелистывание целиком за
   script.js: жест колеса = ровно одна афиша, и ничего не подтягивается само. */
.events { padding: 0 clamp(22px, 6vw, 96px); background: #070807; }
.events__header { min-height: 100svh; display: grid; grid-template-columns: 1fr; align-content: center; }
.events__header h2 { margin: 0; font: 700 clamp(48px, 6.8vw, 112px)/.92 'Unbounded'; letter-spacing: -.07em; text-transform: uppercase; }
.events__header h2 em { color: transparent; -webkit-text-stroke: 1px var(--bone); font-family: 'Oswald', sans-serif; font-style: normal; font-weight: 700; letter-spacing: -.02em; }

.event-card { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(300px, .88fr) 1.12fr; gap: clamp(32px, 7vw, 120px); align-items: center; max-width: 1350px; margin: 0 auto; padding: 7vh 0; border-top: 1px solid rgba(232,223,203,.16); }
.event-card + .event-card { margin-top: 0; }
.event-card--pool { grid-template-columns: 1.12fr minmax(300px, .88fr); }
.event-card--pool .event-card__poster { order: 2; --poster-angle: 1.2deg; }
.event-card--pool .event-card__info { order: 1; }
.event-card__poster {
  --poster-angle: -1.2deg;
  --magnet-x: 0px;
  --magnet-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  margin: 0;
  transform: perspective(900px) translate3d(var(--magnet-x), var(--magnet-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(var(--poster-angle));
  transform-style: preserve-3d;
  background: #151612;
  box-shadow: 22px 24px 0 #11130f, 0 35px 80px #000;
  /* Ни transition, ни animation: и появление шторкой, и магнит под курсором
     ведёт Motion — оно пишет значения покадрово, и переход по тем же
     свойствам тянул бы плакат в свою сторону. Магниту Motion меняет
     переменные сдвига и наклона, а собирает из них transform этот блок. */
  will-change: transform;
}
.event-card__poster img { display: block; width: 100%; height: auto; }
.event-card__poster-link { display: block; color: inherit; text-decoration: none; }
.event-card__poster-link:focus-visible { outline: 2px solid var(--acid); outline-offset: 8px; }
/* Возрастной ярлык на плакате — «стекло», в тон подсказке на плитках галереи
   (см. event.css). Выбрано человеком из трёх отрисованных вариантов. Раньше ярлык
   свисал за правый край (`right: -10px`) с жёсткой красной тенью в 7px: тень уходила
   под плакат, и наружу торчали только две случайные полоски — со стороны это
   читалось как брак вёрстки. Теперь он целиком внутри плаката, полупрозрачный, с
   тонкой рамкой; на пёстром плакате это единственный вид, который не спорит с
   рисунком. */
.event-card__poster span { position: absolute; top: 14px; right: 14px; padding: 8px 12px; border: 1px solid rgba(232, 223, 203, .34); color: var(--bone); background: rgba(5, 6, 4, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font: 600 10px/1 'Unbounded'; letter-spacing: .14em; text-transform: uppercase; }
.event-card__details { display: inline-flex; width: fit-content; align-items: center; gap: 14px; color: var(--paper); font: 700 10px 'Unbounded'; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(233,224,204,.28); padding-bottom: 7px; transition: color .2s ease, border-color .2s ease; }
.event-card__details:hover { color: var(--acid); border-color: var(--acid); }
.event-card__details .site-icon { --icon-size: 14px; color: var(--blood); }
.event-card__info { min-width: 0; }
.event-card h3 { margin: 0; font: 900 clamp(52px, 8vw, 128px)/.8 'Unbounded'; letter-spacing: -.09em; text-transform: uppercase; }
.event-card__lead { max-width: 610px; margin: 36px 0 44px; color: rgba(232,223,203,.67); font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; line-height: 1.45; }
.event-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 38px; border-block: 1px solid rgba(232,223,203,.15); }
.event-card dl div { padding: 20px 18px 22px 0; }
.event-card dl div + div { padding-left: 18px; border-left: 1px solid rgba(232,223,203,.15); }
.event-card dt, .event-card__artists span { margin-bottom: 8px; color: rgba(232,223,203,.36); font: 500 9px 'Unbounded'; letter-spacing: .15em; text-transform: uppercase; }
.event-card dd { margin: 0; font-size: 15px; line-height: 1.45; }
.event-card__artists { display: grid; grid-template-columns: 90px 1fr; gap: 18px; margin-bottom: 40px; }
.event-card__artists p { margin: 0; color: rgba(232,223,203,.62); font-size: 15px; line-height: 1.65; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; max-width: 520px; padding: 22px 0 17px; border-top: 1px solid var(--blood); border-bottom: 1px solid rgba(232,223,203,.15); font: 600 13px 'Unbounded'; letter-spacing: .05em; text-transform: uppercase; transition: padding .25s, color .25s; }
.ticket:hover { padding-left: 14px; color: var(--acid); }
.ticket > span { color: var(--blood); font-size: 20px; }
.ticket small { grid-column: 1 / -1; margin-top: 8px; color: rgba(232,223,203,.36); font: 300 11px 'Oswald'; letter-spacing: .12em; text-transform: uppercase; }

.events__empty { min-height: 60svh; display: flex; align-items: center; justify-content: center; margin: 0 auto; max-width: 1350px; padding: 8vh 0; color: rgba(232,223,203,.5); font: 300 clamp(18px, 2vw, 26px) 'Oswald'; letter-spacing: .04em; text-align: center; }
.event-card__poster-fallback { display: grid; place-items: center; aspect-ratio: 3 / 4; width: 100%; background: linear-gradient(160deg, #14160f, #070807); color: rgba(232,223,203,.32); font: 700 13px 'Unbounded'; letter-spacing: .18em; text-transform: uppercase; }

/* Скрытое (начальное) положение блоков, которые проявляются при прокрутке.
   Оно остаётся за CSS, а не ставится скриптом: иначе блок успевает мигнуть
   содержимым до того, как до него дойдёт очередь. Класс `motion-ready` ставит
   page-motion.js — и только когда Motion есть и движение не приведено, так
   что без него страница просто показывает всё сразу.
   ВАЖНО: значения должны совпадать с объектами `hidden` в script.js — Motion
   анимирует явную пару [откуда, куда], и расхождение видно скачком в первом
   кадре. Само движение — там же, здесь только точка отсчёта. */
.motion-ready .events__header > *,
.motion-ready .manifesto > *,
.motion-ready .event-card__info > * { opacity: 0; transform: translateY(30px); }
.motion-ready .event-card__poster { opacity: 0; clip-path: inset(0 0 100% 0); }
.motion-ready .event-card__poster img { transform: scale(1.12); filter: saturate(0); }

/* Единственная анимация страницы, оставленная за CSS. Логотип заставки мигает
   ступенями — steps(9, end) вместо плавной кривой, это склейка VHS, а не
   движение. Её никто не начинает и не прерывает: она играет один раз, до того
   как любой скрипт мог бы до неё дотянуться, и половины пути у неё нет. Motion
   здесь дал бы только лишний кадр ожидания. По той же причине в CSS остались
   `wh-dot-pulse` (бесконечная), `wh-icon-spin` и ступенчатый `#meter`. */
@keyframes logo-reveal {
  0% { opacity: 0; clip-path: inset(100% 0 0); transform: scale(.9); }
  28% { opacity: .35; clip-path: inset(72% 0 12%); transform: scale(.96) translateX(-5px); }
  52% { opacity: .72; clip-path: inset(42% 0 5%); transform: scale(.98) translateX(3px); }
  78% { opacity: .9; clip-path: inset(15% 0 0); }
  100% { opacity: 1; clip-path: inset(0); transform: scale(1); }
}
@keyframes logo-ghost { 0%, 12% { opacity: 0; transform: translateX(-9px); } 18%, 29%, 44%, 58% { opacity: .6; } 23%, 36%, 52%, 70%, 100% { opacity: 0; transform: translateX(8px); } }
@keyframes logo-slash { 0%, 16% { opacity: 0; transform: translateX(30px); } 20%, 38%, 62% { opacity: .9; } 28%, 48%, 72%, 100% { opacity: 0; transform: translateX(-24px); } }

@media (max-width: 720px) {
  .nav { grid-template-columns: 1fr 1fr; }
  .nav p { display: none; }
  .hero { align-items: end; padding-bottom: 12vh; }
  .hero__copy { width: 100%; }
  .hero h1 { font-size: clamp(48px, 15.5vw, 74px); letter-spacing: -.105em; }
  .hero h1 em { left: 6vw; }
  .hero__mark { top: 42%; right: -24vw; width: 105vw; opacity: .52; }
  .hero__footer { align-items: flex-start; flex-direction: column; gap: 26px; margin: 38px 0 0; }
  .hero__footer p { width: min(88vw, 350px); text-wrap: pretty; }
  .hero__side { display: none; }
  .events { padding-top: 0; }
  .events__header { min-height: 100svh; grid-template-columns: 1fr; gap: 26px; }
  .events__header h2 { font-size: clamp(42px, 12vw, 68px); }
  .event-card, .event-card--pool { grid-template-columns: 1fr; gap: 54px; padding: 7vh 0; }
  .event-card + .event-card { margin-top: 0; }
  .event-card--pool .event-card__poster, .event-card--pool .event-card__info { order: initial; }
  .event-card__poster { width: min(88vw, 100%, 470px); justify-self: center; }
  .event-card h3 { font-size: clamp(48px, 15vw, 76px); overflow-wrap: anywhere; }
  .event-card__lead { margin: 28px 0 32px; }
  .event-card dl { grid-template-columns: 1fr; }
  .event-card dl div { padding: 16px 0; }
  .event-card dl div + div { padding-left: 0; border-top: 1px solid rgba(232,223,203,.15); border-left: 0; }
  .event-card__artists { grid-template-columns: 1fr; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .intro.is-running .intro__layer--main { animation: none; opacity: 1; }
  .intro.is-running .intro__layer--ghost, .intro.is-running .intro__layer--slash { animation: none; }
}

@media (max-width: 720px) {
  .intro { padding: 22px; }
  .intro__stage { width: min(92vw, 520px); }
  .intro__skip { right: 22px; bottom: 24px; min-height: 44px; }
  .nav { min-height: 76px; padding: 0 18px; }
  .nav__menu { min-width: 44px; min-height: 44px; justify-content: end; font-size: 0; }
  .hero { min-height: 100svh; align-items: end; padding: 110px 20px max(50px, env(safe-area-inset-bottom)); }
  .hero h1 { font-size: clamp(45px, 15.2vw, 70px); line-height: .78; }
  .hero h1 em { left: 3vw; max-width: 94vw; }
  .hero__mark { top: 39%; right: -34vw; width: 126vw; opacity: .44; }
  .hero__footer { gap: 24px; margin: 34px 0 0; }
  .hero__footer p { width: 100%; max-width: 330px; font-size: 17px; }
  .hero__footer a { min-height: 44px; display: flex; align-items: center; }
  .manifesto { min-height: 74svh; display: grid; align-items: center; padding: 92px 22px; }
  .manifesto h2 { font-size: clamp(39px, 12.4vw, 62px); line-height: .94; }
  .manifesto h2 span { -webkit-text-stroke-width: 1px; }
  .events { padding: 0 22px; }
  .events__header { min-height: 70svh; padding: 78px 0; }
  .events__header h2 { max-width: 100%; font-size: clamp(42px, 12vw, 64px); overflow-wrap: normal; }
  .event-card, .event-card--pool { min-height: auto; gap: 42px; padding: 76px 0 90px; }
  .event-card__poster { width: min(84vw, 420px); box-shadow: 12px 14px 0 #11130f, 0 25px 55px #000; }
  .event-card__poster span { top: 10px; right: 10px; padding: 7px 10px; }
  .event-card h3 { font-size: clamp(42px, 13.5vw, 68px); line-height: .86; overflow-wrap: normal; word-break: normal; }
  .event-card__lead { font-size: 18px; }
  .ticket { width: 100%; min-height: 58px; font-size: 11px; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: clamp(43px, 15vw, 58px); }
  .event-card h3 { font-size: clamp(39px, 13vw, 52px); }
}

/* Final mobile composition: keep every large desktop gesture inside the viewport. */
@media (max-width: 600px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  img, video, iframe { max-width: 100%; }
  .site, .hero, .manifesto, .events { width: 100%; max-width: 100%; }
  .nav { position: absolute; width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
  .nav__tools { gap: 6px; }
  .nav__search-field { position: fixed; top: 17px; right: 16px; left: 16px; width: auto; transform: none; }
  .nav__search input { padding-right: 116px; }
  .nav__search .site-menu__results { max-height: min(260px,calc(100vh - 92px)); }
  .hero { min-height: 100svh; padding: 92px 18px 46px; }
  .hero__copy { width: 100%; min-width: 0; }
  .hero h1 { width: 100%; font-size: clamp(42px, 13.4vw, 50px); line-height: .82; letter-spacing: -.085em; }
  .hero h1 em { left: 0; display: block; width: 100%; transform: none; }
  .hero__mark { top: 35%; right: -12px; width: min(94vw, 380px); }
  .hero__footer { width: 100%; margin-top: 30px; }
  .manifesto { min-height: auto; padding: 78px 18px; }
  .manifesto h2 { font-size: clamp(36px, 11.4vw, 46px); overflow-wrap: anywhere; }
  .events { padding-inline: 18px; }
  .events__header { min-height: 58svh; padding: 64px 0; }
  .events__header h2 { font-size: clamp(38px, 11.5vw, 48px); }
  .event-card, .event-card--pool { gap: 34px; padding: 60px 0 72px; }
  .event-card__poster { width: calc(100% - 16px); max-width: 360px; }
  .event-card h3 { max-width: 100%; font-size: clamp(38px, 12vw, 50px); letter-spacing: -.075em; overflow-wrap: anywhere; }
  .event-card__lead { margin: 22px 0 28px; font-size: 17px; }
  .event-card dl, .event-card__artists, .ticket { max-width: 100%; }
}

/* Подвал главной. Держит ссылки на документы: их обязан видеть человек до оплаты,
   и их же первым делом ищет платёжный сервис при проверке сайта. Секция афиши
   заканчивается последней карточкой, поэтому подвал сам отбивает себя рамкой
   сверху, а шаг колеса о него знает — см. `measure()` в script.js. */
.site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: clamp(28px, 4vw, 64px); padding: clamp(46px, 6vw, 78px) clamp(22px, 6vw, 96px) clamp(34px, 4vw, 54px); border-top: 1px solid rgba(232, 223, 203, .14); background: #070807; }
.site-footer__mark { margin: 0; color: var(--bone); font: 900 clamp(30px, 4.4vw, 54px)/.9 'Unbounded', sans-serif; letter-spacing: -.055em; text-transform: uppercase; }
.site-footer__mark em { color: var(--blood); font-style: normal; }
.site-footer__tag { margin: 14px 0 0; color: rgba(232, 223, 203, .38); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.site-footer__docs { display: grid; gap: 10px; justify-items: start; }
.site-footer__docs span { color: var(--acid); font: 700 9px 'Unbounded', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.site-footer__docs a { color: rgba(232, 223, 203, .68); font: 400 15px 'Oswald', sans-serif; border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.site-footer__docs a:hover { color: var(--bone); border-color: rgba(232, 223, 203, .42); }
.site-footer__note { grid-column: 1 / -1; max-width: 720px; margin: 0; color: rgba(232, 223, 203, .34); font-size: 13px; font-weight: 300; line-height: 1.5; }
.site-footer__note a { color: rgba(232, 223, 203, .62); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__note a:hover { color: var(--acid); }

/* Уведомление о cookie: тот же вид, что на React-страницах (platform.css), только
   собранное скриптом главной. Слой ниже меню (100) и ниже заставки, чтобы полоса
   не всплывала поверх них. */
.cookie-notice { position: fixed; z-index: 80; left: 50%; bottom: 16px; transform: translateX(-50%); width: min(760px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px 18px; border: 1px solid rgba(232, 223, 203, .16); background: rgba(5, 6, 4, .84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); }
.cookie-notice p { margin: 0; color: rgba(232, 223, 203, .66); font: 300 13px/1.45 'Oswald', sans-serif; }
.cookie-notice button { padding: 11px 20px; border: 0; background: var(--acid); color: var(--ink); font: 700 10px 'Unbounded', sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .2s ease; }
.cookie-notice button:hover { background: var(--bone); }
.cookie-notice button:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.consent__link { color: rgba(232, 223, 203, .92); text-decoration: underline; text-decoration-color: rgba(232, 223, 203, .38); text-underline-offset: 3px; }
.consent__link:hover { color: var(--acid); text-decoration-color: currentColor; }

@media (max-width: 720px) {
  .site-footer { grid-template-columns: minmax(0, 1fr); padding-inline: 18px; }
}
@media (max-width: 560px) {
  .cookie-notice { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}