/* Первый экран. Слои привязаны к координатам кадра (stage = cover кадра), поэтому слово и вырез крыши не расходятся. */

.hero{
  --hero-h:clamp(620px,calc(100svh - 56px),960px);
  --fx:.62;           /* какая часть кадра в фокусе по X */
  --fy:.55;
  --wt:.095;          /* верх слова: доля высоты кадра */
  --wl:.243;          /* левый край слова: доля ширины кадра */
  --word-size:.2;   /* размер слова: доля ширины кадра */
  --shade-top:.62;
  position:relative;
  height:var(--hero-h);
  background:var(--color-background);
  color:var(--color-text);
  overflow:clip;
  isolation:isolate;
}

.hero__view{
  position:absolute;inset:0;
  container-type:size;
  --sw:max(100cqw,calc(100cqh * 1.79167));
  --sh:calc(var(--sw) / 1.79167);
  --sl:calc((100cqw - var(--sw)) * var(--fx));
  --st:calc((100cqh - var(--sh)) * var(--fy));
}

.hero__bg,
.hero__cut{
  position:absolute;
  opacity:0;
  transform-origin:50% 60%;
  transform:translate3d(0,var(--py,0px),0) scale(var(--zoom,1));
  will-change:transform;
}
.hero__bg{
  left:var(--sl);top:var(--st);
  width:var(--sw);height:var(--sh);
  z-index:0;
}
.hero__bg img{width:100%;height:100%;object-fit:cover}

/* слово между небом и крышей */
.hero__word{
  position:absolute;
  left:calc(var(--sl) + var(--sw) * var(--wl));
  top:calc(var(--st) + var(--sh) * var(--wt));
  z-index:2;
  display:flex;
  font-weight:800;
  font-size:calc(var(--sw) * var(--word-size));
  line-height:.8;
  letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--color-text);
  transform:translate3d(var(--wx,0px),var(--wy,0px),0);
  user-select:none;
  pointer-events:none;
}
.hero__word .w{display:block;overflow:clip;padding-top:.06em;margin-top:-.06em}
.hero__word i{display:block;font-style:normal;transform:translateY(0)}

/* вырез здания: те же пиксели кадра поверх слова */
.hero__cut{
  left:calc(var(--sl) + var(--sw) * .4);
  top:var(--st);
  width:calc(var(--sw) * .6);
  height:calc(var(--sh) * .5495);
  z-index:3;
  pointer-events:none;
}
.hero__cut img{width:100%;height:100%}

/* локальные подложки: сверху (небо, под словом и цифрами) и в правом нижнем углу (под абзацем) */
.hero__shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(14,28,20,var(--shade-top)) 0%,rgba(14,28,20,.38) 26%,rgba(14,28,20,0) 54%),
    linear-gradient(90deg,rgba(14,28,20,.46) 0%,rgba(14,28,20,0) 36%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 78%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 78%);
}
.hero__shade--br{
  z-index:4;
  background:radial-gradient(70% 90% at 100% 100%,rgba(14,28,20,.62) 0%,rgba(14,28,20,0) 70%);
  -webkit-mask-image:none;mask-image:none;
}
.hero .grain{z-index:5;opacity:.05}

.hero__dust{
  position:absolute;inset:0;z-index:6;width:100%;height:100%;
  pointer-events:none;
}

/* текстовый слой */
.hero__ui{
  position:absolute;inset:0;z-index:7;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(27ch,26vw));
  grid-template-rows:auto 1fr auto;
  column-gap:4vw;
  padding:calc(var(--header-h) + clamp(28px,6vh,70px)) var(--pad) clamp(30px,9.5vh,96px);
  pointer-events:none;
}
.hero__ui > *{pointer-events:auto}

.hero__stats{grid-column:1;grid-row:1;display:grid;gap:clamp(16px,2.6vh,26px);align-content:start;justify-self:start}
.hero__stats li{display:grid;gap:3px}
.hero__stat-num{
  font-weight:700;
  font-size:clamp(22px,1.9vw,30px);
  letter-spacing:-.03em;
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.hero__stat-label{--mono-size:10.5px;opacity:.92;max-width:16ch}

.hero__main{grid-column:1;grid-row:3;align-self:end;display:grid;gap:clamp(18px,3.2vh,34px);justify-items:start}
.hero__h1{
  font-weight:800;
  font-size:clamp(34px,3.9vw,66px);
  line-height:.94;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:var(--color-text-inverse);
}
.hero__h1 span{display:block}

.hero__cta{display:grid;justify-items:start;gap:14px}
.hero__note{
  max-width:32ch;
  font-size:14px;line-height:1.35;
  color:var(--color-text-inverse);
}

.hero__lead{
  grid-column:2;grid-row:3;align-self:end;
  font-weight:500;
  font-size:clamp(12.5px,1.02vw,15px);
  line-height:1.2;
  letter-spacing:0;
  text-transform:uppercase;
  color:var(--color-text);
  text-wrap:balance;
}

/* край следующей секции виден намеренно: тонкая линия + начало утверждения */
.hero__edge{position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(241,240,230,.4);z-index:8}

/* вход */
@keyframes letter-up{from{transform:translateY(104%)}to{transform:translateY(0)}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@property --zoom{syntax:"<number>";inherits:true;initial-value:1}

.hero.is-in .hero__word i{animation:letter-up 1.05s var(--ease-out) both;animation-delay:calc(var(--i) * 90ms + 250ms)}
.hero.is-in .hero__bg,
.hero.is-in .hero__cut{animation:zoom-in 2.6s var(--ease-out) both,img-in 1.1s ease-out both}
@keyframes zoom-in{from{--zoom:1.07}to{--zoom:1}}
@keyframes img-in{from{opacity:0}to{opacity:1}}
.hero.is-in .hero__stats li,
.hero.is-in .hero__h1 span,
.hero.is-in .hero__cta,
.hero.is-in .hero__lead{animation:rise .8s var(--ease-out) both}
.hero.is-in .hero__stats li:nth-child(1){animation-delay:.55s}
.hero.is-in .hero__stats li:nth-child(2){animation-delay:.65s}
.hero.is-in .hero__stats li:nth-child(3){animation-delay:.75s}
.hero.is-in .hero__h1 span:nth-child(2){animation-delay:.7s}
.hero.is-in .hero__h1 span:nth-child(3){animation-delay:.78s}
.hero.is-in .hero__h1 span:nth-child(4){animation-delay:.86s}
.hero.is-in .hero__h1 span:nth-child(5){animation-delay:.94s}
.hero.is-in .hero__lead{animation-delay:1.0s}
.hero.is-in .hero__cta{animation-delay:1.1s}

/* ниже 1100: чуть уже колонка абзаца */
@media (max-width:1100px){
  .hero__ui{grid-template-columns:minmax(0,1fr) minmax(0,30ch)}
}

/* телефон и вертикальный планшет: кадр сверху, текст на тёмном поле ниже кадра.
   Слово считается от ширины экрана, не от кадра; кадр поднят под шапку (верх кадра скрыт стеклом). */
@media (max-width:900px), (max-aspect-ratio:1/1){
  .hero{
    --fx:.74;
    --fy:1;
    height:auto;
    display:flex;flex-direction:column;
    padding-bottom:40px;
    gap:30px;
  }
  .hero__view{
    position:relative;inset:auto;flex:none;
    height:min(66svh,600px);
    --sw:max(100cqw,calc((100cqh - 38px) * 1.79167));
  }
  .hero__ui{display:contents}
  .hero__stats,.hero__main,.hero__lead{padding:0 var(--pad);margin:0;align-self:stretch}
  .hero__stats{
    grid-column:auto;grid-row:auto;
    grid-auto-flow:column;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
    justify-self:stretch;
  }
  .hero__stat-num{font-size:clamp(20px,5.4vw,30px)}
  .hero__stat-label{--mono-size:9.5px;max-width:14ch}
  .hero__main{grid-column:auto;grid-row:auto;gap:26px}
  .hero__h1{color:var(--color-text);font-size:clamp(34px,10.4vw,64px)}
  .hero__note{color:var(--color-text-muted)}
  .hero__lead{grid-column:auto;grid-row:auto;font-size:13.5px;max-width:42ch}
  .hero__cta{width:100%;max-width:520px}
  .hero__cta .btn{justify-content:space-between}
  .hero__word{
    left:var(--pad);
    top:94px;
    font-size:min(calc((100vw - 2 * var(--pad)) / 2.66),190px);
    letter-spacing:-.045em;
  }
  .hero__shade--br{display:none}
  .hero__edge{display:none}
}

@media (prefers-reduced-motion:reduce){
  .hero .hero__bg,.hero .hero__cut{transform:none;animation:none;opacity:1}
  .hero__word{transform:none}
  .hero__word i,.hero__stats li,.hero__h1 span,.hero__cta,.hero__lead{animation:none!important}
  .hero__dust{display:none}
}