/* Hero — вариант A (poster + facts, чистое золото) */

/* База страницы — тон из --bg-base-* (styles/live-track-base.css).
   Селектор класса, поэтому он и выигрывает у html, body { background: var(--page) }:
   держим оба на одном тоне, чтобы не расходились. Градиент растянут на всю
   высоту документа — в пределах экрана тон меняется незаметно, и на стыках
   секций нет ступенек. */
.landing-lock {
  background:
    radial-gradient(ellipse 80rem 40rem at 50% -10rem, rgba(243, 240, 234, 0.03), transparent 58%),
    linear-gradient(
      180deg,
      var(--bg-base-top) 0%,
      var(--bg-base-mid) 40%,
      var(--bg-base) 72%,
      var(--bg-base-deep) 100%
    );
  color: var(--color-text);
  font-family: var(--font-body);
}

.lock-hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: clip;
}

.lock-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lock-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease-in-out;
}

.lock-hero__slide--active {
  opacity: 1;
}

.lock-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transform: scale(1.02);
  filter: grayscale(1) contrast(0.9) brightness(1.14);
}

.lock-hero__image--architect {
  object-position: center 58%;
  transform-origin: center 58%;
  transform: scale(1.1) translateY(2%);
}

@media (min-height: 860px) {
  .lock-hero__image--architect {
    transform: scale(1.12) translateY(0%);
  }
}

@media (min-height: 980px) {
  .lock-hero__image--architect {
    transform: scale(1.14) translateY(1%);
  }
}

.lock-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at top center, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(180deg, rgba(22, 24, 28, 0.08) 0%, rgba(22, 24, 28, 0.26) 52%, rgba(26, 29, 33, 0.58) 100%);
}

.lock-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at 50% 44%,
      transparent 0%,
      transparent 48%,
      rgba(20, 22, 26, 0.26) 80%,
      rgba(20, 22, 26, 0.52) 100%
    ),
    /* Низ кадра тонет в базе страницы: последний стоп совпадает с --bg-base-top,
       иначе hero обрывается по прямой в более светлое поле под собой. */
    linear-gradient(
      180deg,
      rgba(20, 22, 26, 0.26) 0%,
      transparent 28%,
      transparent 52%,
      rgba(10, 12, 15, 0.45) 78%,
      rgba(10, 13, 16, 0.85) 93%,
      var(--bg-base-top) 100%
    );
}

.lock-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: screen;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 112px 112px;
}

.lock-shell {
  width: min(100% - 1rem, 1220px);
  margin: 0 auto;
}

.lock-shell.lock-hero__shell {
  position: relative;
  z-index: 2;
  width: calc(100% - 2 * clamp(10px, 1.4vw, 20px));
  max-width: none;
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0.75rem 0 1.25rem;
}

/* Правила шапки (.lock-nav*, .lock-brand*, .lock-cta--ghost) вынесены в styles/lock-nav.css */

.lock-cta--plate {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.2rem;
  min-width: 9.75rem;
  padding: 0 1.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #141416 0%, #0a0a0c 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  transition: border-color 180ms ease;
}

.lock-cta--plate:hover {
  border-color: rgba(184, 132, 36, 0.8);
}

/* Правила шапки (.lock-nav*, .lock-brand*, .lock-cta--ghost) вынесены в styles/lock-nav.css */

.lock-hero__content {
  align-self: end;
  display: grid;
  gap: 1rem;
  padding: 1.5rem 0 clamp(2.25rem, 5vh, 3.75rem);
}

.hero-block {
  display: grid;
  gap: clamp(1.05rem, 2vw, 1.5rem);
  max-width: 62rem;
}

.hero-desc {
  max-width: 41rem;
  margin: 0;
  color: rgba(243, 240, 234, 0.88);
  font-size: var(--text-lg);
  line-height: 1.55;
  text-wrap: pretty;
}

.lock-title {
  position: relative;
  display: grid;
  gap: 0.015em;
  width: fit-content;
  margin: 0 0 0 -0.06em;
  padding: 0.07em 0.15em 0.09em 0.1em;
  font-family: var(--font-ui);
  font-size: clamp(2.7rem, 11.5vw, 5.85rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  isolation: isolate;
}

.lock-title span {
  position: relative;
  width: fit-content;
  color: var(--color-text);
  text-shadow: var(--track-title-edge);
  isolation: isolate;
}

.lock-title span:nth-child(1),
.lock-title span:nth-child(2) {
  font-size: 0.72em;
  letter-spacing: -0.052em;
}

.lock-title span:nth-child(3):not(.lock-title__tagline) {
  font-size: 1em;
  letter-spacing: -0.075em;
}

/* Золотая заливка заголовка — тот же шиммер, что у тэглайна */
.lock-title span:not(.lock-title__tagline-copy)::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: none;
  background-image: linear-gradient(
    105deg,
    rgba(243, 240, 234, 0.9) 0%,
    rgba(243, 240, 234, 0.9) 32%,
    rgba(216, 180, 106, 0.65) 42%,
    rgb(255, 220, 130) 49%,
    rgb(255, 255, 255) 50%,
    rgb(255, 220, 130) 51%,
    rgba(216, 180, 106, 0.65) 58%,
    rgba(243, 240, 234, 0.9) 68%,
    rgba(243, 240, 234, 0.9) 100%
  );
  background-size: 320% 100%;
  background-position: 120% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
  animation: lockTaglineShimmer 6.5s cubic-bezier(0.45, 0, 0.25, 1) 2.6s infinite;
  pointer-events: none;
}

.lock-title span:nth-child(2)::after {
  animation-delay: 3s;
}

.lock-title--award-name {
  max-width: 48rem;
  gap: 0.02em;
  font-size: clamp(2rem, 7.2vw, 3.4rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.lock-title--award-name span:nth-child(1),
.lock-title--award-name span:nth-child(2) {
  font-size: 1em;
  letter-spacing: -0.075em;
}

.lock-title.lock-title--award-name > .lock-title__tagline {
  display: grid;
  gap: 0.5em;
  width: fit-content;
  margin-top: 0.12em;
  padding-top: 0.42em;
  font-size: 0.5em;
  letter-spacing: -0.028em;
  text-transform: none;
}

.lock-title.lock-title--award-name .lock-title__tagline-line {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-gold-bright);
  box-shadow: 0 0 14px rgba(211, 161, 58, 0.4);
}

.lock-title--gold .lock-title__tagline-line {
  background: var(--color-gold-bright) !important;
  box-shadow: 0 0 14px rgba(211, 161, 58, 0.4) !important;
}

.lock-title.lock-title--award-name .lock-title__tagline-line::after {
  content: none;
  display: none;
}

.lock-title.lock-title--award-name .lock-title__tagline-copy {
  position: relative;
  display: block;
  width: fit-content;
  font-size: 1em;
  letter-spacing: inherit;
  text-transform: uppercase;
  text-shadow: none;
  color: transparent;
  background-image: linear-gradient(
    105deg,
    rgba(243, 240, 234, 0.9) 0%,
    rgba(243, 240, 234, 0.9) 32%,
    rgba(216, 180, 106, 0.65) 42%,
    rgb(255, 220, 130) 49%,
    rgb(255, 255, 255) 50%,
    rgb(255, 220, 130) 51%,
    rgba(216, 180, 106, 0.65) 58%,
    rgba(243, 240, 234, 0.9) 68%,
    rgba(243, 240, 234, 0.9) 100%
  );
  background-size: 320% 100%;
  background-position: 120% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lockTaglineShimmer 6.5s cubic-bezier(0.45, 0, 0.25, 1) 2.6s infinite;
}

@keyframes lockTaglineShimmer {
  0%,
  72%,
  100% {
    background-position: 120% 50%;
  }
  28% {
    background-position: -20% 50%;
  }
  28.01%,
  71% {
    background-position: 120% 50%;
  }
}

@media (min-width: 721px) {
  .lock-shell {
    width: min(100% - 2rem, 1220px);
  }

  .lock-hero__image {
    object-position: center top;
    transform: scale(1.02);
  }

  .lock-hero__image--architect {
    object-position: center 55%;
    transform-origin: center 55%;
    transform: scale(1.1) translateY(2%);
  }

  .lock-shell.lock-hero__shell {
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0.65rem 0 1.5rem;
  }

  /* Правила шапки внутри этого брейкпоинта вынесены в styles/lock-nav.css */

  .lock-hero__content {
    align-self: end;
    padding: 0 0 clamp(2.25rem, 5vh, 3.5rem);
  }

  .lock-title {
    font-size: clamp(4rem, 5.95vw, 6.15rem);
    line-height: 0.9;
  }

  .lock-title--award-name {
    max-width: 68rem;
    font-size: clamp(4rem, 5.95vw, 6.15rem);
    line-height: 0.9;
  }
}

@media (min-width: 721px) and (min-height: 860px) {
  .lock-hero__image--architect {
    transform: scale(1.12) translateY(1%);
  }
}

@media (min-width: 721px) and (min-height: 980px) {
  .lock-hero__image--architect {
    transform: scale(1.14) translateY(1%);
  }
}

/* Широкие/низкие экраны: object-fit: cover сильнее режет верх */
@media (min-width: 721px) and (max-aspect-ratio: 16/9) {
  .lock-hero__image--architect {
    object-position: center 52%;
    transform: scale(1.08) translateY(4%);
  }
}

@media (min-width: 721px) and (max-aspect-ratio: 16/9) and (min-height: 980px) {
  .lock-hero__image--architect {
    object-position: center 55%;
    transform: scale(1.12) translateY(2%);
  }
}

@media (min-width: 721px) and (max-height: 820px) {
  .lock-hero__image--architect {
    object-position: center 50%;
    transform: scale(1.07) translateY(5%);
  }
}

/* Ultrawide при небольшой высоте */
@media (min-width: 721px) and (min-aspect-ratio: 16/9) and (max-height: 1100px) {
  .lock-hero__image--architect {
    object-position: center 52%;
    transform: scale(1.09) translateY(3%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock-hero__slide {
    transition: none;
  }

  .lock-title span:not(.lock-title__tagline-copy)::after,
  .lock-title.lock-title--award-name .lock-title__tagline-copy {
    animation: none;
  }

  .lock-title span:not(.lock-title__tagline-copy)::after {
    opacity: 0;
  }

  .lock-title.lock-title--award-name .lock-title__tagline-copy {
    color: rgba(243, 240, 234, 0.9);
    -webkit-text-fill-color: rgba(243, 240, 234, 0.9);
    background: none;
  }
}

/* Ширина как у .live-track в .prototype-shell; перебивает .lock-shell (1220px) из landing-sections.css */
.lock-shell.lock-hero__shell {
  width: calc(100% - 2 * clamp(10px, 1.4vw, 20px));
  max-width: none;
}

/* ═══════════════ СМЫКАНИЕ В СТВОРЕ ═══════════════
   Композиция первого экрана (перенесена со стенда hero-home-variants.html,
   вариант 05, раскладка «в одну строку»):

   - «ЛИДЕРЫ ИНДУСТРИИ» одной строкой по центру кадра, слова остаются
     отдельными спанами — на них держится вся хореография;
   - золото идёт навстречу: по «ЛИДЕРЫ» слева направо, по «ИНДУСТРИИ» справа
     налево, обе волны проходят стык слов в одну и ту же долю секунды;
   - боковые панели затемнения гасят борта кадра, косяков на их кромке нет —
     панель работает только тоном;
   - золото только в движении и на линии-состоянии, статичных плашек нет.

   Блок стоит в конце файла: правила выше (в т.ч. @media min-width: 721px)
   той же специфичности, перебить их можно только порядком.
   Мобильная раскладка живёт в styles/mobile-home.css — там свои два ряда. */

.lock-hero__gate {
  --gate: 6%;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ── Раскрытие створа ──
   Панели стартуют по 50% ширины каждая — кадр закрыт целиком — и медленно
   расходятся к краям до своих 6%. Отдельного занавеса нет: закрывают и
   открывают кадр те же самые панели.

   Хронометраж первого экрана:
     0.12–1.42  панели расходятся с 50% до 6%, кадр открывается
     1.15       кикер
     1.15/1.30  «ЛИДЕРЫ» и «ИНДУСТРИИ» въезжают с противоположных сторон
     2.05       линия расходится из центра
     2.30       тэглайн
     2.50       описание и факты
     3.10       пошли встречные золотые волны (цикл 8 с)
   Базовое состояние панели — конечное (6% и приглушённый тон): если анимации
   отключены, кадр остаётся открытым, а не наполовину закрытым. */
.lock-hero__gate-light {
  position: absolute;
  inset: 0;
  clip-path: inset(0 var(--gate) 0 var(--gate));
  backdrop-filter: brightness(1.18) saturate(1.05) contrast(1.03);
  -webkit-backdrop-filter: brightness(1.18) saturate(1.05) contrast(1.03);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 42%,
    transparent 78%
  );
  animation: heroGateOpen 1300ms cubic-bezier(0.7, 0, 0.25, 1) 120ms both;
}

/* Тон плотный по всей панели, мягкая кромка в 96px у внутреннего края.
   Кромка задана в пикселях, а не в процентах: на закрытом кадре (панель в
   пол-экрана) она остаётся такой же узкой, и кадр действительно закрыт, а
   не просто завиньетирован. На своих 6% панель целиком укладывается в эту
   кромку — отсюда мягкий тон в покое, стыка и косяка не видно. */
.lock-hero__gate-shade {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Ширина постоянная — открытие едет на transform. Прежняя анимация width
     проходила через layout, и Chrome записывал каждый её кадр в layout shift:
     0.125 CLS на каждом визите. Створка шириной в полкадра уезжает за борт,
     пока в кадре не останется полоса в --gate; переполнение режет
     overflow: clip на .lock-hero. */
  width: 50%;
  /* В покое панель приглушена: плотность 0.94 нужна только закрытому кадру */
  opacity: 0.78;
  transform: translateX(var(--shift));
  animation: heroPanelsOpen 1300ms cubic-bezier(0.7, 0, 0.25, 1) 120ms both;
}

/* Проценты в translateX считаются от ширины самой створки (полкадра),
   поэтому --gate, заданный от ширины кадра, здесь берётся удвоенным */
.lock-hero__gate-shade--l {
  left: 0;
  --shift: calc(-100% + var(--gate) * 2);
  background: linear-gradient(90deg, rgba(6, 8, 10, 0.94) 0, rgba(6, 8, 10, 0.94) calc(100% - 96px), rgba(6, 8, 10, 0) 100%);
}

.lock-hero__gate-shade--r {
  right: 0;
  --shift: calc(100% - var(--gate) * 2);
  background: linear-gradient(270deg, rgba(6, 8, 10, 0.94) 0, rgba(6, 8, 10, 0.94) calc(100% - 96px), rgba(6, 8, 10, 0) 100%);
}

/* Светлая середина открывается вместе с панелями: пока кадр закрыт, её нет */
@keyframes heroGateOpen {
  from {
    clip-path: inset(0 50% 0 50%);
  }
  to {
    clip-path: inset(0 var(--gate) 0 var(--gate));
  }
}

@keyframes heroPanelsOpen {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(var(--shift));
    opacity: 0.78;
  }
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Слова слетаются с противоположных краёв */
@keyframes heroWordLeft {
  from {
    clip-path: inset(0 100% 0 0);
    transform: translateX(-0.24em);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes heroWordRight {
  from {
    clip-path: inset(0 0 0 100%);
    transform: translateX(0.24em);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

/* Встречные волны: замедление к стыку, сразу резкий отскок наружу
   (без паузы на стыке), затем ожидание до следующего круга. */
@keyframes heroSweepLtr {
  0% {
    background-position: 120% 50%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  28% {
    background-position: 50% 50%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  48% {
    background-position: -20% 50%;
    /* Высокая начальная скорость разворота — без залипания после торможения */
    animation-timing-function: cubic-bezier(0.05, 0.92, 0.2, 1);
  }
  56% {
    background-position: 120% 50%;
  }
  56.01%,
  100% {
    background-position: 120% 50%;
  }
}

@keyframes heroSweepRtl {
  0% {
    background-position: -20% 50%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  28% {
    background-position: 50% 50%;
    animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1);
  }
  48% {
    background-position: 120% 50%;
    animation-timing-function: cubic-bezier(0.05, 0.92, 0.2, 1);
  }
  56% {
    background-position: -20% 50%;
  }
  56.01%,
  100% {
    background-position: -20% 50%;
  }
}

@keyframes heroRuleOpen {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (min-width: 721px) {
  .lock-hero__content {
    align-self: stretch;
    padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(1.6rem, 3.4vh, 2.6rem);
  }

  /* Два ряда: титул в нижней части свободного поля,
     описание прижато к низу кадра. */
  .hero-block {
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: 0;
    max-width: none;
    text-align: center;
  }

  /* Колонки объявлены явно: при grid-auto-flow: column у грида нет явных
     линий, и тэглайн с grid-column: 1 / -1 схлопывается в нулевой спан. */
  .lock-title.lock-title--award-name {
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto;
    align-content: end;
    align-items: baseline;
    align-self: end;
    justify-content: center;
    column-gap: 0.24em;
    row-gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 clamp(1.25rem, 3.5vh, 2.5rem);
    /* Замер: строка со стыком занимает 9.75em, при 7.8vw это ~76% ширины
       кадра — до панелей остаётся ~70px с каждой стороны. Мерить надо по
       спанам слов, а не по h1: он растянут на всю ширину сцены. */
    font-size: clamp(2.2rem, 7.8vw, 8rem);
    line-height: 0.9;
    letter-spacing: -0.075em;
    white-space: nowrap;
  }

  .lock-title--award-name > span:nth-child(1) {
    animation: heroWordLeft 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1150ms both;
  }

  .lock-title--award-name > span:nth-child(2) {
    animation: heroWordRight 1000ms cubic-bezier(0.22, 1, 0.36, 1) 1300ms both;
  }

  .lock-title--award-name > span:nth-child(1)::after {
    animation: heroSweepLtr 8s linear 3.1s infinite;
  }

  .lock-title--award-name > span:nth-child(2)::after {
    animation: heroSweepRtl 8s linear 3.1s infinite;
  }

  /* Тэглайн уходит на всю ширину титула отдельной строкой грида, золотая
     линия над ним и есть та самая линия, что расходится из центра. */
  .lock-title.lock-title--award-name > .lock-title__tagline {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-items: center;
    width: 100%;
    margin-top: 0.06em;
    padding-top: 0.26em;
    gap: 1.15em;
    font-size: 0.155em;
    letter-spacing: 0.2em;
  }

  .lock-title.lock-title--award-name .lock-title__tagline-line {
    animation: heroRuleOpen 900ms cubic-bezier(0.22, 1, 0.36, 1) 2050ms both;
  }

  .lock-title.lock-title--award-name .lock-title__tagline-copy {
    margin-inline: auto;
    animation:
      heroFadeUp 900ms ease 2300ms both,
      lockTaglineShimmer 6.5s cubic-bezier(0.45, 0, 0.25, 1) 4.4s infinite;
  }

  .hero-block__foot {
    align-self: end;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    width: 100%;
    animation: heroFadeUp 900ms ease 2500ms both;
  }

  .hero-desc {
    max-width: 44ch;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lock-hero__gate-light,
  .lock-hero__gate-shade,
  .hero-block__foot,
  .lock-title--award-name > span:nth-child(1),
  .lock-title--award-name > span:nth-child(2),
  .lock-title--award-name > span:nth-child(1)::after,
  .lock-title--award-name > span:nth-child(2)::after,
  .lock-title.lock-title--award-name .lock-title__tagline-line,
  .lock-title.lock-title--award-name .lock-title__tagline-copy {
    animation: none !important;
  }

  /* Конечные состояния: ничего не остаётся спрятанным */
  .lock-hero__gate-light {
    clip-path: inset(0 var(--gate) 0 var(--gate));
  }

  .lock-hero__gate-shade {
    transform: translateX(var(--shift));
  }
}