/* =========================================================================
   НЕпросто PR - обложка «полёт при прокрутке» (hero: scroll). Пара к hero-scroll.js.
   html.hs-live - режим полёта (ставит inline-скрипт в <head>, снимает скрипт при ошибке).
   Без него - обычная обложка: постер, затемнение, заголовок.
   ========================================================================= */
:root{--tb:0px}
@supports (height:100lvh){:root{--tb:calc(100lvh - 100svh)}}
.hero.hero--scroll{display:block;min-height:0;overflow:visible;overflow:clip;background:#05050d}
html.hs-live .hero.hero--scroll{height:300vh;height:300lvh;scroll-margin-top:0}
.hs__stage{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
html.hs-live .hs__stage{position:sticky;top:0;height:100vh;height:100lvh;min-height:0}

/* медиа: постер, конечный кадр, canvas кадров. Параллакс за курсором - на обёртке */
.hs__media{position:absolute;inset:0;z-index:0;overflow:hidden;
  translate:calc(var(--hx,0) * -14px) calc(var(--hy,0) * -9px);scale:1.04;transition:translate 1s cubic-bezier(.2,.7,.2,1)}
.hs__poster img,.hs__end,.hs__cv{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%}
.hs__poster img{transform-origin:50% 42%}
.hs__end{opacity:0}
.hs__cv{opacity:0;transition:opacity .7s cubic-bezier(.2,.7,.2,1)}
.hero.hero--scroll.drawn .hs__cv{opacity:1}
html:not(.hs-live) .hs__end,html:not(.hs-live) .hs__cv{display:none}

/* затемнения: слева-снизу под заголовком (общий .hero__shade), в центре - под подписями и финалом */
.hs__stage > .hero__shade{z-index:0}
html.hs-live .hs__stage > .hero__shade{
  background:
    linear-gradient(180deg,rgba(5,5,13,.62) 0%,rgba(5,5,13,.08) 20%,rgba(5,5,13,.12) 52%,rgba(5,5,13,.72) 82%,#05050d 100%),
    linear-gradient(90deg,rgba(5,5,13,.76) 0%,rgba(5,5,13,.5) 44%,rgba(5,5,13,0) 72%)}
/* полупрозрачный заголовок над полётом: плотнее подложка под строками */
/* строки заголовка не заходят на яркий мост в правой части кадра */
@media (min-width:961px){html.hs-live .hero--scroll .hero__title{max-width:min(800px,100%)}}
html.hs-live .hero--scroll .np-title::before{background:radial-gradient(closest-side,rgba(4,4,16,.62),rgba(4,4,16,.32) 62%,transparent)}
.hs__glow{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(70% 62% at 32% 62%,rgba(5,5,13,.78),rgba(5,5,13,.3) 62%,transparent 100%)}
.hs__stage > .fx-particles,.hs__stage > .fx-spot{z-index:1}
.hs__stage > .hero__top,.hs__stage > .hero__inner{z-index:3}

/* ---------- подписи этапов полёта ---------- */
.hs-cap,.hs-end{display:none}
html.hs-live .hs-cap,html.hs-live .hs-end{display:block;position:absolute;z-index:3;opacity:0;visibility:hidden}
.hs-cap{max-width:min(820px,calc(100% - 2 * var(--pad)))}
.hs-cap::before{content:"";position:absolute;inset:-28% -20%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,5,13,.72),rgba(5,5,13,.36) 58%,transparent)}
.hs-cap--1{left:max(var(--pad),calc((100vw - var(--wrap)) / 2));bottom:calc(96px + var(--tb,0px))}
.hs-cap--2{right:max(var(--pad),calc((100vw - var(--wrap)) / 2));top:calc(var(--hdr) + 12vh);text-align:right}
.hs-cap--3{left:50%;top:44%;translate:-50% -50%;text-align:center}
.hs-cap__big{margin:0;font:700 clamp(30px,4.6vw,74px)/1.04 var(--f-h1);letter-spacing:-.025em;color:rgba(239,239,245,.8);text-wrap:balance}
.hs-cap__big em{font-style:normal}
/* подстрочник на своей тёмной плашке: читается на ярком мосту и огнях города */
.hs-cap__sub{margin:18px 0 0;width:fit-content;max-width:46ch;padding:.6em .95em .65em;border-radius:14px;
  font-size:clamp(15.5px,1.25vw,19px);line-height:1.55;color:rgba(239,239,245,.92);text-shadow:0 1px 10px rgba(5,5,13,.9);
  background:linear-gradient(100deg,rgba(6,6,16,.74),rgba(6,6,16,.58));border:1px solid rgba(239,239,245,.08);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hs-cap--2 .hs-cap__sub{margin-left:auto}
@media (hover:none),(max-width:760px){.hs-cap__sub{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(100deg,rgba(6,6,16,.86),rgba(6,6,16,.74))}}
.hs-cap--3 .hs-cap__sub{margin-inline:auto}
/* слова кинетической строки: обёртка двигается, градиент - на внутреннем span (iOS Safari) */
.hs-w{display:inline-block;white-space:nowrap;will-change:transform,opacity}
.hs-w__i{display:inline-block;color:rgba(239,239,245,.8);padding:.06em 0 .1em}
.hs-w__i.em{color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(120deg,rgba(172,182,255,.88),rgba(178,146,255,.78));-webkit-background-clip:text;background-clip:text}

/* ---------- вход в статью ---------- */
.hs-end{left:max(var(--pad),calc((100vw - var(--wrap)) / 2));bottom:calc(84px + var(--tb,0px));max-width:min(860px,calc(100% - 2 * var(--pad)))}
.hs-end::before{content:"";position:absolute;inset:-34% -26% -30% -40%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(5,5,13,.8),rgba(5,5,13,.45) 56%,transparent)}
.hs-end__q{margin:16px 0 26px;font:700 clamp(24px,3.1vw,48px)/1.12 var(--f-h1);letter-spacing:-.02em;color:rgba(239,239,245,.82);text-wrap:balance}
.hs-end__q em{font-style:normal;color:transparent;-webkit-text-fill-color:transparent;
  background-image:linear-gradient(120deg,rgba(172,182,255,.9),rgba(178,146,255,.8));-webkit-background-clip:text;background-clip:text}
.hs-end__btns{display:flex;flex-wrap:wrap;gap:12px}
.hs-end__btns .ico{transition:transform .3s var(--ease)}
.hs-end__btns a:hover .ico{transform:translateY(3px)}

/* плавающие кнопки не спорят с полётом */
html.hs-live:not(.hs-past) .fab{opacity:0 !important;pointer-events:none !important}

/* ---------- телефон ---------- */
@media (max-width:760px){
  html.hs-live .hero.hero--scroll{height:260vh;height:260lvh}
  .hs-cap,.hs-cap--1,.hs-cap--2,.hs-cap--3{left:var(--pad);right:var(--pad);top:auto;bottom:calc(56px + var(--tb,0px));translate:none;text-align:left;max-width:none}
  .hs-cap--2 .hs-cap__sub,.hs-cap--3 .hs-cap__sub{margin-left:0;margin-right:0}
  .hs-cap__big{font-size:clamp(28px,8.6vw,40px)}
  .hs-cap__sub{font-size:15.5px;margin-top:14px}
  .hs-end{left:var(--pad);right:var(--pad);bottom:calc(40px + var(--tb,0px));max-width:none}
  .hs-end__q{font-size:clamp(22px,6.6vw,30px);margin:12px 0 20px}
  .hs-end__btns .btn{flex:1 1 100%}
  .hs__glow{background:radial-gradient(90% 60% at 50% 74%,rgba(5,5,13,.85),rgba(5,5,13,.35) 64%,transparent 100%)}
  /* под заголовком на телефоне огни набережной: нижнее затемнение плотнее */
  html.hs-live .hs__stage > .hero__shade{background:linear-gradient(180deg,rgba(5,5,13,.6) 0%,rgba(5,5,13,.1) 18%,rgba(5,5,13,.3) 40%,rgba(5,5,13,.84) 62%,#05050d 100%)}
}

/* ---------- страховки ---------- */
@media (prefers-reduced-motion:reduce){
  .hs__media{translate:none !important;transition:none !important}
}
@media print{
  .hs-cap,.hs-end,.hs__cv,.hs__end,.hs__glow{display:none !important}
  .hero.hero--scroll{height:auto !important}
  .hs__stage{position:relative !important;height:auto !important}
}