/* =========================================================================
   White Night - автомобильная выставка
   Тёмная тема. Светлой нет намеренно: мероприятие вечернее, и одна тема
   означает один набор проверенных контрастов вместо двух.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Токены
   ------------------------------------------------------------------------- */
:root {
  /* Поверхности. На тёмной теме высота передаётся светлотой, а не тенью. */
  --bg:            #0A0A0B;
  --bg-alt:        #0F0F11;
  --surface:       #141416;
  --surface-2:     #1B1B1F;
  --line:          #26262B;   /* декоративные разделители */
  --line-strong:   #6A6A74;   /* границы элементов управления, 3.7:1 */

  /* Текст. Значения проверены на --bg и на --surface-2. */
  --text:          #F2F2F4;   /* 17.7:1 */
  --text-2:        #A8A8B2;   /* 8.4:1  */
  --text-3:        #8B8B95;   /* 5.9:1  */

  /* Акцент. Две роли, потому что одно значение не тянет обе:
     --accent как текст на почти чёрном даёт 1.9:1 и не читается. */
  --accent:        #870100;   /* только заливки; белый текст сверху = 10.3:1 */
  --accent-deep:   #5E0100;   /* нажатое состояние */
  --accent-bright: #F0554E;   /* текст, иконки, тонкие линии: 5.8:1 */
  --accent-veil:   rgba(135, 1, 0, 0.18);
  --accent-glow:   rgba(135, 1, 0, 0.55);

  /* Шаг 4px. Пропуски в шкале не случайны: они не дают отступам расползтись. */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px;  --s-8: 32px;  --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px;

  /* Типографика */
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem;
  --t-lg: 1.125rem; --t-xl: 1.25rem; --t-2xl: 1.5rem;

  /* Форма. Ноль везде: знак White Night построен на прямых срезах,
     скругления спорили бы с ним. */
  --radius: 0px;

  /* Движение */
  --dur-fast: 150ms; --dur: 220ms; --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  --container: 1240px;
  --header-h: 72px;
}

/* -------------------------------------------------------------------------
   2. База
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-base);
  line-height: 1.6;
  overflow-x: hidden;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }

/* Атрибут hidden обязан выигрывать у display компонента: без этого
   скрытые слои (меню, просмотр фото) остаются в раскладке. */
[hidden] { display: none !important; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

/* Фокус виден всегда. Кольцо снаружи элемента, чтобы не спорило с рамкой. */
:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -100px;
  z-index: 200;
  padding: var(--s-3) var(--s-4);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------
   3. Каркас
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-6);
}

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  scroll-margin-top: var(--header-h);
  overflow-x: clip;
}
.section--alt { background: var(--bg-alt); }

/* Фотография как фон секции.
   Кадр уже размыт в самом файле — фильтром в CSS это стоило бы кадра
   анимации на каждой прокрутке, а размытый снимок вдобавок весит втрое
   меньше резкого. Сверху лежит затемнение, которое к краям секции уходит
   в сплошной цвет страницы: так секции перетекают друг в друга, а не
   выглядят набором наклеенных прямоугольников. */
.section--photo::before,
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.section--photo::before {
  background-image: var(--photo);
  background-size: cover;
  background-position: center;
  opacity: 0.34;
}
.section--photo::after {
  background: linear-gradient(
    to bottom,
    var(--bg) 0%,
    rgba(10, 10, 11, 0.72) 16%,
    rgba(10, 10, 11, 0.72) 84%,
    var(--bg) 100%
  );
}

/* На узком экране секция вытягивается в высоту, широкий кадр при cover
   растягивается и вырождается в ровное пятно. Поэтому здесь фотография
   прижата к верху секции и уходит в цвет страницы к середине: получается
   узнаваемая полоса кадра под заголовком, а не серый градиент во всю высоту. */
@media (max-width: 699px) {
  .section--photo::before {
    background-position: center top;
    opacity: 0.42;
  }
  .section--photo::after {
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 11, 0.78) 0%,
      rgba(10, 10, 11, 0.7) 26%,
      var(--bg) 62%
    );
  }
}

.section-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--accent-bright);
}

.section-title { font-size: clamp(2rem, 5.2vw, 3.5rem); }

.section-lead {
  color: var(--text-2);
  font-size: var(--t-lg);
  max-width: 60ch;
}


/* Какая фотография у какой секции. Пути записаны относительно этого файла:
   url() внутри CSS-переменной разрешается относительно таблицы стилей,
   а не документа — из разметки такой путь вёл бы не туда.
   Чтобы поменять фон, достаточно подменить файл в assets/media/. */
#about       { --photo: url('../media/bg-about.webp'); }
#gallery     { --photo: url('../media/bg-gallery.webp'); }
#program     { --photo: url('../media/bg-program.webp'); }
#participate { --photo: url('../media/bg-participate.webp'); }
#venue       { --photo: url('../media/bg-venue.webp'); }
#faq         { --photo: url('../media/bg-faq.webp'); }
#partners    { --photo: url('../media/bg-partners.webp'); }

/* Диагональный срез — тот же угол, что у знака WN */
.shard {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 35%, var(--accent-bright) 50%, var(--accent) 65%, transparent);
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   4. Кнопки
   ------------------------------------------------------------------------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 48px;
  padding: var(--s-3) var(--s-6);
  border: 1px solid transparent;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-text);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }

.btn__arrow {
  transition: transform var(--dur) var(--ease);
  flex: none;
}
.btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  box-shadow: 0 0 0 0 var(--accent-glow);
  transition: box-shadow var(--dur-slow) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn--primary::before { background: var(--accent-deep); }
.btn--primary:hover, .btn--primary:focus-visible { box-shadow: 0 8px 40px -8px var(--accent-glow); }

.btn--outline {
  border-color: var(--line-strong);
  --btn-fg: var(--text);
}
.btn--outline:hover, .btn--outline:focus-visible { --btn-fg: #fff; border-color: var(--accent); }

.btn--ghost { padding-inline: 0; --btn-fg: var(--text-2); }
.btn--ghost::before { display: none; }
.btn--ghost:hover, .btn--ghost:focus-visible { --btn-fg: var(--accent-bright); }

.btn--lg { min-height: 56px; padding-inline: var(--s-8); font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* -------------------------------------------------------------------------
   5. Шапка
   ------------------------------------------------------------------------- */
.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  transition: background-color var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(10, 10, 11, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  height: var(--header-h);
}

/* Прогресс прокрутки: машинка едет по дороге от старта к финишу.
   Дорога — та же линия, что отбивает шапку, поэтому лишней графики
   на экране не появляется: работает то, что и так было. */
.progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
}
.progress__done {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--accent-bright);
  /* Не scaleX(--progress): полоса во всю ширину и машинка по укороченной
     дорожке расходятся, и ближе к финишу машинка уезжает вперёд полосы.
     Скрипт считает --done так, чтобы полоса кончалась ровно под машинкой. */
  transform: scaleX(var(--done, 0));
  transform-origin: left;
}
.progress__car {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 44px;
  line-height: 0;
  /* Ширину пробега считает JS: в процентах translate отсчитывался бы
     от самой машинки, а не от дороги. */
  transform: translate3d(calc(var(--progress, 0) * var(--track, 0px)), 0, 0);
  will-change: transform;
}
.progress__car img {
  width: 100%;
  height: auto;
  /* Низ снимка — это пятна контакта шин, поэтому колёса сами встают
     на дорогу. Тень отрывает машину от фона, иначе она висит в воздухе. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.75));
}
@media (min-width: 700px) { .progress__car { width: 56px; } }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  flex: none;
}
.brand__mark {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--accent-bright);
  transition: color var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-2px); }
.brand__name {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav { display: none; }
.nav__list { display: flex; gap: var(--s-4); }
.nav__link {
  position: relative;
  display: block;
  padding-block: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-bright);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--text); }
.nav__link:hover::after, .nav__link:focus-visible::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="true"] { color: var(--text); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }
.header__cta { display: none; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 12px;
  background: none;
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Мобильное меню — лист поверх страницы */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: grid;
  grid-template-rows: var(--header-h) 1fr;
  background: var(--bg);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.mobile-menu.is-open { opacity: 1; }

.mobile-menu__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  padding: var(--s-8) var(--s-6) var(--s-12);
  overflow-y: auto;
}
.mobile-menu__list { display: grid; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2rem);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(12px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), color var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.mobile-menu.is-open .mobile-menu__link { transform: none; opacity: 1; }
.mobile-menu__link:hover, .mobile-menu__link:focus-visible { color: var(--accent-bright); }
.mobile-menu__num {
  font-family: var(--font-text);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent-bright);
}
.mobile-menu__actions { display: grid; gap: var(--s-3); }

/* Подсветка за курсором. Живёт поверх всей страницы, а не только первого
   экрана, поэтому фиксирована к окну.
   Режим наложения screen выбран не ради красоты: он осветляет тёмный фон,
   но почти не трогает светлый текст, поэтому контраст под пятном не падает,
   а растёт. Обычная полупрозрачная заливка сделала бы наоборот.
   Слой ниже шапки (z-index 100) и просмотра фото (150) — там подсветка
   только мешала бы. */
.cursor-glow {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(
    460px circle at var(--mx, 50%) var(--my, 50%),
    rgba(135, 1, 0, 0.7),
    rgba(135, 1, 0, 0.2) 38%,
    transparent 68%
  );
  transition: opacity 400ms var(--ease);
}
.cursor-glow.is-on { opacity: 1; }
/* На тач-экране курсора нет, а полноэкранное наложение стоит кадров */
@media (pointer: coarse) { .cursor-glow { display: none; } }

/* -------------------------------------------------------------------------
   6. Первый экран
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: calc(var(--header-h) + var(--s-16)) var(--s-16);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  transform: scale(1.08) translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}
/* Затемнение: слева плотное — под текст, справа прозрачнее — виден кадр */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--bg) 4%, rgba(10,10,11,0.82) 45%, rgba(10,10,11,0.55) 100%),
    linear-gradient(100deg, rgba(10,10,11,0.9) 0%, rgba(10,10,11,0.55) 55%, rgba(10,10,11,0.2) 100%);
}
@media (min-width: 1000px) {
  /* На широком экране кадр можно показать: текст уходит влево,
     и затемнение делается направленным, а не сплошным. */
  .hero__scrim {
    background:
      linear-gradient(100deg, rgba(10,10,11,0.97) 0%, rgba(10,10,11,0.9) 34%, rgba(10,10,11,0.4) 70%, rgba(10,10,11,0.6) 100%),
      linear-gradient(to top, var(--bg) 2%, transparent 42%);
  }
}


.hero__inner {
  position: relative;
  display: grid;
  gap: var(--s-8);
  width: 100%;
  max-width: 780px;
}

.hero__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.hero__kicker b { color: var(--accent-bright); font-weight: 600; }
.hero__kicker span { color: var(--text-3); }
@media (max-width: 699px) { .hero__kicker span { display: none; } }

.hero__title { margin: 0; }
.hero__wordmark {
  width: min(100%, 620px);
  height: auto;
  color: var(--text);
}
.hero__wordmark { display: block; }
.wordmark-svg { width: 100%; height: auto; }
.wordmark-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Толщина контура задаётся в пикселях и не зависит от размера SVG:
     иначе на мобильном линия становится волоском. */
  vector-effect: non-scaling-stroke;
}
/* Длину каждого контура считает JS — только он знает реальный путь.
   Он же кладёт в --d задержку в миллисекундах: знак первым, буквы следом.
   Без JS контур просто виден сразу, и это нормальный исход. */
.wordmark-svg path.is-drawing {
  animation: draw 1100ms var(--ease) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
/* Знак короче любой буквы по длине контура, но читается как цельная фигура,
   поэтому рисуется заметно быстрее — иначе буквы догоняют его на середине. */
.wordmark-svg path.wordmark-svg__mark.is-drawing { animation-duration: 760ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__lead {
  font-size: clamp(1.0625rem, 2.2vw, var(--t-xl));
  color: var(--text-2);
  max-width: 54ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-2);
}
.hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--text);
}
.hero__meta-item svg { color: var(--accent-bright); flex: none; }

.hero__scroll {
  position: absolute;
  inset-block-end: var(--s-6);
  inset-inline-end: var(--s-6);
  display: none;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
}
.hero__scroll-line {
  display: block;
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--accent-bright), transparent);
}

/* Обратный отсчёт */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 460px;
  background: var(--line);
  border: 1px solid var(--line);
}
.countdown__cell {
  display: grid;
  gap: 2px;
  padding: var(--s-3) var(--s-2);
  background: rgba(10, 10, 11, 0.72);
  text-align: center;
}
.countdown__value {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 4.5vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown__label {
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.countdown--past {
  grid-template-columns: 1fr;
  text-align: left;
}
.countdown--past .countdown__cell { text-align: left; padding: var(--s-4); }

/* -------------------------------------------------------------------------
   7. Бегущая строка
   ------------------------------------------------------------------------- */
.ticker {
  position: relative;
  padding-block: var(--s-4);
  background: var(--accent);
  border-block: 1px solid var(--accent-deep);
  overflow: hidden;
  --ticker-duration: 38s;
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker var(--ticker-duration) linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__group {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-inline: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.ticker__dot { width: 6px; height: 6px; background: #fff; opacity: 0.6; flex: none; }
@keyframes ticker { to { transform: translate3d(-50%, 0, 0); } }

/* -------------------------------------------------------------------------
   8. Факты
   ------------------------------------------------------------------------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.fact {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-8) var(--s-6);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease);
}
.fact:hover { background: var(--surface); }
.fact__label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.fact__value {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.2;
}
.fact__note { font-size: var(--t-sm); color: var(--text-3); }

/* -------------------------------------------------------------------------
   Знак, вращающийся на прокрутке
   Секция выше экрана, а её содержимое закреплено: пока секция идёт мимо,
   знак делает оборот. Высота секции и есть длина «плёнки» вращения.
   ------------------------------------------------------------------------- */
.turntable {
  position: relative;
  height: 300vh;
  background: var(--bg-alt);
}
.turntable__stage {
  position: sticky;
  inset-block-start: 0;
  display: grid;
  align-items: center;
  height: 100svh;
  overflow: hidden;
}
.turntable__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.turntable__object {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  aspect-ratio: 1;
}
/* Ореол за знаком. Живёт вместе с вращением: --facing выставляет скрипт,
   он равен единице, когда знак развёрнут к зрителю, и нулю в профиль. */
.turntable__object::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(135, 1, 0, 0.55), rgba(135, 1, 0, 0.12) 46%, transparent 70%);
  opacity: calc(0.35 + 0.65 * var(--facing, 1));
  transform: scale(calc(0.86 + 0.14 * var(--facing, 1)));
}
@media (prefers-reduced-motion: reduce) {
  .turntable__object::before { opacity: 0.7; transform: none; }
}
.turntable__canvas { display: none; width: 100%; height: 100%; }
.turntable.is-live .turntable__canvas { display: block; }
.turntable.is-live .turntable__fallback { display: none; }
/* Пока скрипт не отработал (или его нет) — плоский знак вместо пустоты */
.turntable__fallback { width: 55%; height: auto; color: var(--accent); }

.turntable__copy { display: grid; gap: var(--s-4); }
/* Заголовок секции здесь тише обычного: главное в блоке — знак и подпись
   под ним, а не название раздела. */
.turntable .section-title { font-size: clamp(1.625rem, 3.2vw, 2.25rem); }
/* Шаги лежат друг на друге: видно тот, до которого доехала прокрутка */
.turntable__steps { display: grid; margin-top: var(--s-4); }
.turntable__step {
  grid-area: 1 / 1;
  display: grid;
  gap: var(--s-2);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  pointer-events: none;
}
.turntable__step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.turntable__num {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-bright);
}
.turntable__title { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.turntable__text {
  color: var(--text-2);
  font-size: var(--t-lg);
  max-width: 42ch;
}

/* Без прокрутки-анимации закреплять нечего: секция становится обычной,
   а шаги показываются все сразу — содержание важнее эффекта. */
.turntable.is-static,
.no-js .turntable { height: auto; }
.turntable.is-static .turntable__stage,
.no-js .turntable__stage {
  position: static;
  height: auto;
  padding-block: clamp(64px, 9vw, 128px);
}
.turntable.is-static .turntable__steps,
.no-js .turntable__steps { gap: var(--s-8); }
.turntable.is-static .turntable__step,
.no-js .turntable__step {
  grid-area: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (min-width: 900px) {
  .turntable__grid { grid-template-columns: 0.9fr 1.1fr; }
  .turntable__object { max-width: 520px; }
}
@media (max-width: 899px) {
  .turntable { height: 260vh; }
  .turntable__object { max-width: min(320px, 62vw); }
}

/* -------------------------------------------------------------------------
   9. О выставке
   ------------------------------------------------------------------------- */
.about__grid {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.about__copy { display: grid; gap: var(--s-6); }
.about__copy p { color: var(--text-2); max-width: 62ch; }
.about__copy p strong { color: var(--text); font-weight: 600; }

.about__media { position: relative; }
.about__media img { width: 100%; object-fit: cover; aspect-ratio: 7 / 5; }
.about__media::after {
  content: "";
  position: absolute;
  inset-block-end: -12px;
  inset-inline-end: -12px;
  width: 96px;
  height: 96px;
  border-inline-end: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  pointer-events: none;
}

.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  font-size: var(--t-sm);
  color: var(--text-2);
}

/* -------------------------------------------------------------------------
   10. Галерея
   ------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: clamp(110px, 26vw, 200px);
  grid-auto-flow: dense;
  gap: var(--s-2);
}
.tile {
  position: relative;
  display: block;
  grid-row: span 2;
  padding: 0;
  border: 0;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}
.tile--wide { grid-column: span 2; grid-row: span 1; }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow) var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,0.5), transparent 45%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile__zoom {
  position: absolute;
  inset-block-end: var(--s-3);
  inset-inline-end: var(--s-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover .tile__zoom, .tile:focus-visible .tile__zoom { opacity: 1; transform: none; }

/* Просмотр фотографии */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-4);
  padding: var(--s-4);
  background: rgba(6, 6, 7, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.lightbox__counter {
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.lightbox__stage {
  position: relative;
  /* Именно flex, а не grid: у грид-строки высота подстраивается под
     содержимое, и max-height: 100% у картинки начинает считаться от неё же —
     ограничение выходит круговым и вертикальный кадр вылезает за экран.
     У flex-контейнера высота задана строкой 1fr родителя, и процент
     считается от неё. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
}
.lightbox__img.is-loaded { opacity: 1; }
/* Пока грузится полноразмерный кадр, на месте картинки живёт индикатор */
.lightbox__spinner {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent-bright);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
.lightbox__spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.lightbox__caption {
  font-size: var(--t-sm);
  color: var(--text-2);
  text-align: center;
  min-height: 1.5em;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 1px solid var(--line-strong);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.icon-btn:hover, .icon-btn:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }
.lightbox__nav { display: flex; gap: var(--s-2); }

/* -------------------------------------------------------------------------
   11. Программа
   ------------------------------------------------------------------------- */
.note {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 2px solid var(--accent-bright);
  background: var(--surface);
  font-size: var(--t-sm);
  color: var(--text-2);
}
.note svg { color: var(--accent-bright); flex: none; }

.timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: var(--s-8);
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 7px;
  width: 1px;
  background: var(--line);
}
/* Линия заполняется по мере прокрутки — показывает, где вы в списке */
.timeline::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 7px;
  width: 1px;
  height: 100%;
  background: var(--accent-bright);
  transform: scaleY(var(--fill, 0));
  transform-origin: top;
  transition: transform 120ms linear;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-6);
  padding: var(--s-6) 0 var(--s-6) var(--s-8);
  border-bottom: 1px solid var(--line);
}
.timeline__item::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--s-6) + 10px);
  inset-inline-start: 0;
  width: 15px;
  height: 15px;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.timeline__item:hover::before { background: var(--accent); border-color: var(--accent); }
.timeline__time {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  min-width: 4ch;
}
/* Порядковый номер в списке «Что вас ждёт». Тот же приём, что у времени,
   но уже 3ch: «01» в колонке под «12:00» оставляло дыру. */
.timeline__num {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent-bright);
  min-width: 3ch;
}
/* Без описаний строки короче, поэтому и воздуха им нужно меньше. */
.timeline--plain .timeline__item { padding-block: var(--s-4); align-items: baseline; }
.timeline--plain .timeline__item::before { inset-block-start: calc(var(--s-4) + 8px); }
.timeline--plain .timeline__title { font-size: var(--t-base); font-weight: 600; line-height: 1.45; }
@media (min-width: 700px) {
  .timeline--plain .timeline__title { font-size: var(--t-lg); }
}
.timeline__body { display: grid; gap: var(--s-2); }
.timeline__title { font-size: var(--t-lg); }
.timeline__text { color: var(--text-2); font-size: var(--t-sm); max-width: 60ch; }

/* -------------------------------------------------------------------------
   12. Участие
   ------------------------------------------------------------------------- */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.track {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--s-4);
  padding: clamp(24px, 3.5vw, 40px);
  background: var(--bg);
  overflow: hidden;
  transition: background-color var(--dur-slow) var(--ease);
}
.track::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease);
}
.track:hover, .track:focus-within { background: var(--surface); }
.track:hover::before, .track:focus-within::before { transform: scaleX(1); }

.track__num {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--text-3);
}
.track__title { font-size: var(--t-2xl); }
.track__text { color: var(--text-2); font-size: var(--t-sm); }
.track__list { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--text-2); }
.track__list li { display: flex; gap: var(--s-3); }
.track__list li::before { content: ""; width: 6px; height: 6px; margin-top: 8px; background: var(--accent-bright); flex: none; }
.track--primary { background: var(--surface); }
.track--primary::before { transform: scaleX(1); }

/* Способ, который уже закрыт. Карточка остаётся — вопрос «а можно ещё подать
   заявку?» лучше встретить ответом, чем пустым местом, — но не притворяется
   действием: вместо кнопки строка состояния, и подсветка по наведению снята. */
.track--closed { color: var(--text-2); }
.track--closed:hover, .track--closed:focus-within { background: var(--bg); }
.track--closed:hover::before, .track--closed:focus-within::before { transform: scaleX(0); }
.track__closed-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;          /* та же высота, что у кнопки: карточки в ряд */
  padding-inline: var(--s-4);
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
  font-size: var(--t-sm);
}
.track__closed-note svg { color: var(--accent-bright); flex: none; }


/* -------------------------------------------------------------------------
   12b. Главный приз
   ------------------------------------------------------------------------- */
.prize {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  padding: clamp(28px, 4vw, 56px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
}
.prize__copy { display: grid; gap: var(--s-4); align-content: start; }
.prize__title { font-size: clamp(1.75rem, 4.4vw, 2.75rem); }
.prize__text { color: var(--text-2); max-width: 52ch; }
.prize__text strong { color: var(--text); }

.prize__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.prize__item {
  display: grid;
  gap: var(--s-2);
  justify-items: center;
  align-content: center;
  padding: clamp(20px, 3vw, 32px) var(--s-4);
  background: var(--bg);
  text-align: center;
}
.prize__icon { color: var(--accent-bright); }
.prize__item-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); }
.prize__item-note {
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* -------------------------------------------------------------------------
   13b. Правила
   ------------------------------------------------------------------------- */
.rules {
  display: grid;
  gap: 1px;
  margin-top: var(--s-8);
  background: var(--line);
  border: 1px solid var(--line);
}
.rule {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-6);
  padding: clamp(20px, 3vw, 32px);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease);
}
.rule:hover { background: var(--surface); }
.rule__mark { color: var(--accent-bright); margin-top: 3px; flex: none; }
.rule__body { display: grid; gap: var(--s-2); }
.rule__title {
  font-size: var(--t-xs);
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rule__text { color: var(--text); max-width: 72ch; }

/* -------------------------------------------------------------------------
   13. Площадка
   ------------------------------------------------------------------------- */
.venue__media {
  position: relative;
  margin-bottom: clamp(32px, 4vw, 56px);
  overflow: hidden;
}
.venue__media img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  transform: translate3d(0, var(--parallax, 0px), 0) scale(1.1);
  will-change: transform;
}
.venue__grid {
  display: grid;
  gap: clamp(24px, 4vw, 56px);
}
.venue__info { display: grid; gap: var(--s-6); }
.address { display: grid; gap: var(--s-1); }
.address__place { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; }
.address__street { color: var(--text-2); }

.route-list { display: grid; gap: var(--s-4); }
.route-list > div { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); }
.route-list dt {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-bright);
  padding-top: 3px;
}
.route-list dd { margin: 0; color: var(--text-2); font-size: var(--t-sm); }

/* -------------------------------------------------------------------------
   14. Вопросы
   ------------------------------------------------------------------------- */
.faq { display: grid; border-block-start: 1px solid var(--line); max-width: 900px; }
.faq__item { border-block-end: 1px solid var(--line); }
.faq__trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-6);
  width: 100%;
  padding: var(--s-6) 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--t-lg);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.faq__trigger:hover { color: var(--accent-bright); }
.faq__icon {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent-bright);
  transition: transform var(--dur) var(--ease);
}
.faq__icon::after { transform: rotate(90deg); }
.faq__trigger[aria-expanded="true"] .faq__icon::after { transform: rotate(0deg); }

.faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__answer {
  padding-block-end: var(--s-6);
  color: var(--text-2);
  max-width: 68ch;
}

/* -------------------------------------------------------------------------
   15. Партнёры
   ------------------------------------------------------------------------- */
/* Логотипы разной пропорции нельзя показывать одной высотой: квадратный знак
   рядом с длинным словом выглядит вдвое крупнее. Поэтому высота у каждого своя
   и лежит в --lh прямо в разметке — посчитана как 71 / пропорция^0.45,
   то есть по равному оптическому весу, а не по равной высоте. */
.partners {
  display: grid;
  /* Две колонки, с 560px три, с 1000px пять. Колонки заданы явно, а не через
     auto-fill: от их числа зависит, встают ли плитки на три ячейки без дыр.
     Считать так: 12 обычных логотипов плюс две плитки по три ячейки — 18.
     18 делится на 2 и на 3 нацело, при пяти колонках пустуют только две
     ячейки по краям от Marshall, и это его центровка, а не дыра. */
  grid-template-columns: repeat(2, 1fr);
  /* Разделители нарисованы на самих ячейках, а не подложкой с зазором в 1px:
     логотипов 12, и на большинстве ширин последний ряд неполный — подложка
     светила бы в пустых ячейках серым прямоугольником. */
  border-block-start: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}
.partner {
  display: grid;
  place-items: center;
  min-height: 128px;
  padding: var(--s-6) var(--s-4);
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  background: var(--bg);
  transition: background-color var(--dur) var(--ease);
}
/* Высота из --lh — это потолок, а не фиксированное значение: в узкой колонке
   длинный логотип упирается в ширину и уменьшается пропорционально сам. */
.partner img {
  max-height: var(--lh, 40px);
  max-width: 100%;
  width: auto;
  height: auto;
  opacity: 0.72;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.partner:hover { background: var(--surface); }
.partner:hover img { opacity: 1; transform: scale(1.04); }

/* Marshall и «Независимый эксперт» занимают по три ячейки. Marshall — чтобы
   выделяться, «Независимый эксперт» — потому что при 10.6:1 в одной ячейке он
   ужимается до нечитаемых 13px.

   Здесь 1 / -1, а не span 3: span шире, чем колонок в сетке, не упирается в
   ширину ряда, а дорисовывает недостающие колонки. На телефоне с двумя
   колонками появлялась третья, и все мелкие логотипы вставали по три в ряд
   вместо двух. 1 / -1 растягивает плитку по существующим колонкам и новых
   не создаёт — на двух и трёх колонках это ровно строка. */
.partner--span3 { grid-column: 1 / -1; }

.partners__cta {
  display: grid;
  gap: var(--s-6);
  justify-items: start;
  margin-top: clamp(24px, 3vw, 40px);
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--line);
  background: var(--surface);
}

/* -------------------------------------------------------------------------
   16. Финальный призыв и подвал
   ------------------------------------------------------------------------- */
.final {
  position: relative;
  padding-block: clamp(72px, 10vw, 144px);
  background: var(--accent);
  overflow: hidden;
}
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,0.14), transparent 55%);
  pointer-events: none;
}
.final__inner { position: relative; display: grid; gap: var(--s-8); justify-items: start; }
.final__title { font-size: clamp(2rem, 6vw, 4rem); color: #fff; }
.final__text { color: rgba(255,255,255,0.86); max-width: 52ch; }
.final .btn--primary { --btn-bg: #fff; --btn-fg: #0A0A0B; box-shadow: none; }
.final .btn--primary::before { background: #0A0A0B; }
.final .btn--primary:hover, .final .btn--primary:focus-visible { --btn-fg: #fff; box-shadow: none; }
.final .btn--outline { border-color: rgba(255,255,255,0.5); --btn-fg: #fff; }
.final .btn--outline::before { background: rgba(0,0,0,0.35); }
.final .btn--outline:hover, .final .btn--outline:focus-visible { border-color: #fff; }

.footer { padding-block: var(--s-16) var(--s-8); background: var(--bg); border-top: 1px solid var(--line); }
.footer__grid {
  display: grid;
  gap: var(--s-12);
  padding-bottom: var(--s-12);
}
.footer__brand { display: grid; gap: var(--s-4); justify-items: start; }
.footer__brand .brand__mark { width: 44px; height: 44px; color: var(--accent-bright); }
.footer__tagline { color: var(--text-3); font-size: var(--t-sm); max-width: 34ch; }
.footer__col-title {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: var(--s-4);
}
.footer__list { display: grid; gap: var(--s-3); }
.footer__list a, .footer__list span { font-size: var(--t-sm); color: var(--text-2); text-decoration: none; }
.footer__list a { transition: color var(--dur) var(--ease); }
.footer__list a:hover, .footer__list a:focus-visible { color: var(--accent-bright); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: var(--s-8);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  color: var(--text-3);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: var(--text-2); }
.socials { display: flex; gap: var(--s-2); }
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.socials a:hover, .socials a:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------------------
   17. Появление при прокрутке
   ------------------------------------------------------------------------- */
/* Появление блоков. Направление задаётся атрибутом data-reveal:
   заголовки выезжают слева, медиа справа, карточки снизу. Смысл не в
   разнообразии ради разнообразия — направление подсказывает, что блок
   пришёл из-за края экрана, и страница читается как движение, а не как
   набор мигающих прямоугольников. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.reveal[data-reveal="left"]  { transform: translate3d(-56px, 0, 0); }
.reveal[data-reveal="right"] { transform: translate3d(56px, 0, 0); }
.reveal[data-reveal="up"]    { transform: translate3d(0, 44px, 0); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Горизонтальный сдвиг на узком экране пришлось бы гасить: 56px вправо
   у блока во всю ширину создают горизонтальную прокрутку. */
@media (max-width: 899px) {
  .reveal[data-reveal="left"],
  .reveal[data-reveal="right"] { transform: translate3d(0, 32px, 0); }
}
/* Без JS всё видно сразу: контент важнее анимации */
.no-js .reveal { opacity: 1; transform: none; }
/* Отсчёт без JS посчитать нечем — прочерки вместо цифр только сбивают */
.no-js .countdown { display: none; }
/* Машинка без JS не тронется с места и будет выглядеть поломкой,
   поэтому дорога с флажком тоже прячется */
.no-js .progress { display: none; }

/* -------------------------------------------------------------------------
   18. Адаптив
   ------------------------------------------------------------------------- */
@media (max-width: 519px) {
  .partner { padding: var(--s-4) var(--s-3); min-height: 104px; }
}

@media (min-width: 700px) {
  .container { padding-inline: var(--s-8); }
  .gallery-grid { grid-template-columns: repeat(4, 1fr); }
  .about__grid { grid-template-columns: 1.15fr 1fr; }
  .venue__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .lightbox { padding: var(--s-6); }
}

@media (min-width: 560px) {
  .partners { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
  .prize { grid-template-columns: 1.25fr 1fr; align-items: center; }
}

@media (min-width: 1000px) {
  .partners { grid-template-columns: repeat(5, 1fr); }

  /* Колонок хватает — плитки занимают ровно три из пяти, а не всю строку. */
  .partner--span3 { grid-column: span 3; }

  /* Marshall встаёт со второй колонки — так три его ячейки оказываются ровно
     по центру пяти. «Независимый эксперт» идёт последним и занимает отдельный
     ряд, поэтому центруется тем же способом: два широких логотипа по центру
     читаются как пара, а прижатый влево нижний выглядел бы недоложенным. */
  .partners > :first-child { grid-column: 2 / span 3; grid-row: 1; }
  .partners > :last-child  { grid-column: 2 / span 3; }
}

@media (min-width: 1000px) {
  :root { --header-h: 84px; }
  .nav { display: block; }
  .header__cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .hero__scroll { display: flex; }
  .hero__inner { max-width: 820px; }
  .container { padding-inline: var(--s-12); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

}

@media (min-width: 1200px) {
  .nav__list { gap: var(--s-6); }
}

/* Телефон в альбомной ориентации: экран низкий, 100svh становится тесным */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--s-8)) var(--s-8); }
  .mobile-menu__body { padding-block: var(--s-4); }
}

/* -------------------------------------------------------------------------
   19. Уменьшенное движение
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__img, .venue__media img { transform: none; }
  .hero__wordmark path { stroke-dashoffset: 0; }
  .ticker__track { animation: none; }
  .cursor-glow { display: none; }
}