/* Первый экран с 3D-профилями */
/* ⚠️ Небо задаётся ПЕРЕМЕННЫМИ: их ставит sezon.js по сегодняшней дате,
   и между пиками сезонов цвета плавно перетекают. Значения по умолчанию —
   летние: их видно доли секунды, пока не отработал скрипт.
   Средняя остановка обязана совпадать с цветом тумана в сцене, иначе дальний
   план не сходится с фоном и город выглядит вырезанным ножницами. */
/* ⚠️ Высота — ВЕСЬ экран, без вычета шапки. Раньше стояло
   `calc(100svh - 66px)`: шапка была в потоке и занимала эти 66 px.
   С прозрачной шапкой она вынута из потока и лежит ПОВЕРХ баннера —
   вычет стал лишним, и снизу вылезала светлая полоса в высоту шапки.
   ⚠️ Единица именно `svh`, а не `vh` и не `dvh`: `vh` на телефоне считает
   экран БЕЗ учёта панели браузера, и низ баннера уезжает под неё;
   `dvh` меняется в момент скрытия панели, и тогда вся сцена с надписью
   дёргается прямо во время прокрутки. `svh` — наименьшая гарантированная
   высота: баннер виден целиком в любом состоянии панели.
   ⚠️ `vh` оставлен строкой выше запасным — для браузеров без svh. */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;
  grid-template-rows:1fr auto;overflow:hidden;
  background:radial-gradient(120% 90% at 62% 38%,
    var(--sky-1,#b6c8d3) 0%,var(--sky-2,#85a0b0) 45%,var(--sky-3,#5d7686) 100%);
  color:var(--ink);
  /* верхний отступ пропускает шапку, чтобы надпись под неё не залезала */
  padding:calc(var(--hdr, 73px) + clamp(.6rem,2vw,1.4rem)) 0 clamp(1.6rem,4vw,2.6rem)}

#gl-city{position:absolute;inset:0;z-index:0;opacity:.9}
.hero canvas{display:block;width:100%!important;height:100%!important}

.hero__mid{position:relative;z-index:2;display:grid;place-items:center;align-content:center;gap:clamp(1rem,4vh,2.6rem)}
.hero__kicker{font-size:.72rem;font-weight:900;letter-spacing:.32em;text-transform:uppercase;
  color:var(--soft);text-align:center;padding:0 1rem}
.hero__kicker s{text-decoration:none;color:var(--accent)}
.hero__word{font-weight:900;letter-spacing:-.045em;line-height:.82;
  font-size:clamp(3.4rem,16vw,15.5rem);color:#f4f7f9;text-align:center;user-select:none;
  white-space:nowrap;text-shadow:0 24px 70px rgba(20,26,32,.45)}
.hero__word span{display:inline-block}

.hero__bot{position:relative;z-index:5;display:flex;align-items:flex-end;gap:2rem}
.hero__claim{max-width:34ch;font-size:clamp(.94rem,1.2vw,1.06rem);line-height:1.55;color:var(--soft)}
.hero__claim b{font-weight:900;color:var(--ink)}
.hero__cta{margin-left:auto;display:flex;gap:.6rem;flex-wrap:wrap}

.hero__scroll{position:absolute;left:50%;bottom:.9rem;transform:translateX(-50%);z-index:5;text-align:center;
  font-size:.62rem;font-weight:900;letter-spacing:.28em;text-transform:uppercase;color:rgba(238,241,243,.45)}
.hero__scroll i{display:block;width:1px;height:34px;background:rgba(238,241,243,.22);margin:.45rem auto 0;
  position:relative;overflow:hidden;font-style:normal}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--accent);
  animation:heroRun 2.2s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes heroRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

.js .hero__word span{transform:translateY(115%);opacity:0}
.js .hero__kicker,.js .hero__claim,.js .hero__cta{opacity:0}

@media(max-width:820px){
  .hero__bot{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .hero__cta{margin-left:0}
  .hero__scroll{display:none}
  .hero__kicker{font-size:.66rem;letter-spacing:.2em;line-height:1.7}
}

/* ⚠️ На узком экране текст первого экрана ложится прямо на сцену — на светлой
   траве и технике светлые буквы теряются. Затемняющая подложка снизу: она
   тянется за нижнюю границу и не режет кадр видимой линией. */
@media(max-width:820px){
  .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;
    background:linear-gradient(to top,rgba(24,30,36,.82) 0%,rgba(24,30,36,.6) 42%,rgba(24,30,36,0) 100%);
    z-index:1;pointer-events:none}
  .hero__claim{color:var(--ink);max-width:none}
  .hero__bot{gap:1.3rem}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 auto;text-align:center;justify-content:center}
}

/* Телефон в альбомной ориентации: экран низкий, первому экрану нужна вся высота,
   а нижний блок иначе съедает кадр целиком. */
@media(max-height:520px) and (orientation:landscape){
  /* ⚠️ Вычет высоты шапки убран и здесь: она больше не в потоке.
     Верхний отступ оставляем маленьким — на лежащем телефоне каждый
     пиксель высоты на счету, а шапка тут ужимается до 52 px. */
  .hero{min-height:100vh;min-height:100svh;padding:calc(52px + .3rem) 0 .9rem}
  .hero__word{font-size:clamp(2.6rem,11vw,7rem)}
  .hero__kicker,.hero__claim{display:none}
  /* ⚠️ «листайте» прячем не по ширине, а по высоте: телефон лёжа шире 820 px,
     и указатель налезал прямо на кнопку */
  .hero__scroll{display:none}
  .hero__bot{flex-direction:row;align-items:center}
  .hero__cta{margin-left:auto;width:auto}
  .hero__cta .btn{padding:.6rem 1.1rem;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .js .hero__word span,.js .hero__kicker,.js .hero__claim,.js .hero__cta{opacity:1;transform:none}
  .hero__scroll i::after{animation:none}
}