/* ==========================================================================
   Hero
   Опорный кадр 1920 × 1080. Все координаты переведены в проценты от кадра:

     фон                     #e9e9e9
     картинка справа   x 1147  y 372   1147/1920 = 59.74%   841/1920 = 43.80%
     картинка слева    x -442  y 121   -442/1920 = -23.02%  1200/1920 = 62.50%
     свечение          центр 960.19 / 551.2, круг 928px, blur 32, rotate 155.98°
     лого-локап        x 91  y 79  1788 × 991

   Порядок слоёв (снизу вверх): фон → правая графика → левая графика →
   свечение → локап. Он повторяет порядок слоёв в макете.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background-color: var(--bg-muted);
  isolation: isolate;
}

/* Страховка для браузеров без svh */
@supports not (height: 100svh) {
  .hero {
    min-height: 100vh;
  }
}

.hero__art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* --- Фоновая графика ------------------------------------------------------ */
/*
   Ширина задаётся в процентах, высота — auto: так SVG сохраняет собственные
   пропорции (1200×600 и 841×722) на любом соотношении сторон экрана.
*/

.hero__lines {
  position: absolute;
  height: auto;
}

.hero__lines--right {
  z-index: 1;
  left: 59.74%;
  top: 34.44%;
  width: 43.8%;
}

.hero__lines--left {
  z-index: 2;
  left: -23.02%;
  top: 11.2%;
  width: 62.5%;
}

/* --- Красное свечение ----------------------------------------------------- */

.hero__glow {
  position: absolute;
  z-index: 3;
  left: 50.01%;
  top: 51.04%;
  width: 48.33%;
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(155.98deg);
  filter: blur(clamp(0.75rem, 1.6667vw, 2rem));
}

/* --- Логотип-локап -------------------------------------------------------- */

.hero__title {
  position: absolute;
  z-index: 4;
  left: 4.74%;
  top: 7.31%;
  width: 93.125%;
  height: 91.76%;
  margin: 0;
  font-size: 0;
}

.hero__lockup {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Планшет -------------------------------------------------------------- */

@media (max-width: 1200px) {
  /*
     Центрируем свойством translate, а не transform: на блоке стоит
     data-reveal, и правила css/base/reveal.css задают ему свой transform
     (сначала сдвиг, потом none) — они специфичнее и стирали бы центровку,
     из-за чего локап уезжал вправо. Свойство translate живёт отдельно
     от transform, поэтому переезда не случается.
  */
  .hero__title {
    left: 50%;
    top: 50%;
    width: 108%;
    height: auto;
    translate: -50% -50%;
  }

  .hero__lockup {
    height: auto;
  }

  .hero__glow {
    width: 62%;
  }

  .hero__lines--left {
    left: -28%;
    top: 8%;
    width: 78%;
  }

  .hero__lines--right {
    left: 56%;
    top: 40%;
    width: 56%;
  }
}

/* --- Мобильные ------------------------------------------------------------ */
/*
   В PNG-локапе много прозрачных полей: реальная надпись занимает ~64% ширины
   файла. Поэтому на узких экранах картинка масштабируется больше 100%, чтобы
   сама надпись заняла ~88% ширины экрана.
*/

@media (max-width: 900px) {
  .hero__title {
    width: 136%;
  }

  .hero__glow {
    width: 92%;
    top: 48%;
  }

  .hero__lines--left {
    left: -34%;
    top: 10%;
    width: 105%;
  }

  .hero__lines--right {
    left: 44%;
    top: 52%;
    width: 78%;
  }
}

@media (max-width: 560px) {
  .hero__title {
    width: 148%;
  }

  .hero__glow {
    width: 112%;
  }

  .hero__lines--left {
    left: -40%;
    top: 12%;
    width: 130%;
  }

  .hero__lines--right {
    left: 34%;
    top: 56%;
    width: 96%;
  }
}

/* Ландшафтная ориентация телефона: кадр низкий, локап уменьшаем */
@media (max-width: 900px) and (orientation: landscape) {
  .hero__title {
    width: 104%;
  }

  .hero__glow {
    width: 58%;
  }
}