/* Первый экран (без шапки: она отдельный компонент).
   ≥900 px: композиция из Figma (1920), коллаж плавно масштабируется.
   <900 px: мобильная композиция из Figma (320), растёт плавно. Планшета в макете нет, он считается от мобильной. */

.hero{container-type:inline-size;position:relative;background:var(--paper);overflow:hidden}

/* ---------- Десктоп ---------- */
.hero__in{--u:calc(100cqw / 1920);position:relative;height:calc(var(--u) * 1300)}
.hero__in > *{position:absolute}
.hero__stage{display:contents}

/* порядок слоёв как в Figma (снизу вверх): монстр, портрет, воин, звезда */
.panel{display:block;position:absolute}
.panel img{display:block;width:100%;height:auto}
.panel--monster{left:calc(var(--u) * 635);top:calc(var(--u) * 30);width:calc(var(--u) * 691)}
.panel--portrait{left:calc(var(--u) * 1281);top:0;width:calc(var(--u) * 639)}
.panel--warrior{left:calc(var(--u) * 50);top:0;width:calc(var(--u) * 710)}
.star{position:absolute;left:0;top:0;width:calc(var(--u) * 1174);height:auto;z-index:2}

.hero__copy{left:calc(var(--u) * 107);top:calc(var(--u) * 207);width:calc(var(--u) * 522);z-index:5}
.hero__title{margin:0;font-weight:var(--fw-black);font-size:clamp(27px, calc(var(--u) * 64), 64px);line-height:1.2}
.hero__title .mb{display:none}
.hero__sub{margin:calc(var(--u) * 32) 0 0;font-weight:var(--fw-regular);font-size:clamp(16px, calc(var(--u) * 24), 24px);line-height:1.33}
.hero__cta{margin-top:calc(var(--u) * 71)}

.oval{left:calc(var(--u) * 989);top:calc(var(--u) * 595);width:calc(var(--u) * 440);height:calc(var(--u) * 320);z-index:4;
  container-type:inline-size;
  display:grid;place-items:center;color:var(--purple);text-align:center;
  font-weight:var(--fw-bold);font-style:italic;line-height:1.25}
.oval img{position:absolute;inset:0;width:100%;height:100%}
.oval p{position:relative;margin:0;white-space:nowrap;font-size:clamp(12px, calc(100cqw * .0545), 26px)}
@media (max-width:899.98px){.oval p{font-size:clamp(12px, calc(100cqw * .066), 15px);line-height:1.22;transform:translateY(-7%)}}
.oval .m{display:none}

/* Кнопка-стрелка «Посмотреть все пакеты» ведёт себя как основная кнопка:
   на hover растёт и покрывается зерном, при нажатии чуть сжимается. */
.arrow{position:absolute;display:block;color:var(--paper);text-decoration:none;z-index:3;-webkit-tap-highlight-color:transparent}
.arrow picture,.arrow img{display:block;width:100%;height:auto}
.arrow img{transform-origin:center;transition:transform var(--dur) var(--ease)}
.arrow{--arrow-mask:url("../assets/hero/arrow1.svg")}
.arrow--a::after{
  content:"";position:absolute;inset:0;pointer-events:none;transform-origin:center;opacity:0;
  background:url("../assets/grain-purple.svg") 0 0/256px 256px;
  -webkit-mask:var(--arrow-mask) center/100% 100% no-repeat;
          mask:var(--arrow-mask) center/100% 100% no-repeat;
  transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.arrow--a{--grow:1.04}
.arrow--a:hover img,.arrow--a:hover::after,.arrow--a.is-hover img,.arrow--a.is-hover::after{transform:scale(var(--grow))}
.arrow--a:hover::after,.arrow--a.is-hover::after{opacity:1}
.arrow--a:active img,.arrow--a:active::after{transform:scale(.985)}
/* тач-экран: касание даёт то же состояние, что hover (рост и зерно), без сжатия */
@media (hover:none){
  .arrow--a:active img,.arrow--a:active::after{transform:scale(var(--grow))}
  .arrow--a:active::after{opacity:1}
}
.arrow--a:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.arrow span{position:absolute;z-index:2;left:0;right:0;top:0;bottom:0;display:grid;place-items:center;text-align:center;
  font-weight:var(--fw-bold);font-style:italic;font-size:clamp(12px, calc(var(--u) * 24), 24px);line-height:1.25}
.arrow--a{left:calc(var(--u) * 1266.5);top:calc(var(--u) * 778);width:calc(var(--u) * 544)}
.arrow--a span{padding-top:2%}
.arrow--b{left:calc(var(--u) * 1236.5);top:calc(var(--u) * 994);width:calc(var(--u) * 544);pointer-events:none}
.arrow--b span{display:none}

/* ---------- Мобильная и планшетная (<900) ---------- */
@media (max-width:899.98px){
  .hero__in{
    --u:calc(100cqw / 320);
    height:auto;display:grid;grid-template-columns:var(--page-pad) minmax(0,1fr) var(--page-pad);
  }
  .hero__in > *{position:relative}
  .hero__copy{display:contents}

  .hero__title{grid-column:2;grid-row:1;margin-top:calc(var(--u) * 36);font-size:clamp(29px, calc(var(--u) * 33), 56px);line-height:1.15;position:relative;z-index:2}
  .hero__title .mb{display:inline}
  .oval{grid-column:2;grid-row:1;justify-self:end;align-self:start;width:calc(var(--u) * 165.3);height:calc(var(--u) * 103.6);
    left:auto;top:calc(var(--u) * 4);margin-right:calc(var(--u) * -21);z-index:3}
  .oval .d{display:none}
  .oval .m{display:inline}
  .hero__sub{grid-column:2;grid-row:2;margin-top:calc(var(--u) * 24);font-size:clamp(16px, calc(var(--u) * 16), 24px);line-height:1.25}

  .hero__stage{display:block;grid-column:1/-1;grid-row:3;margin:calc(var(--u) * 14) 0 0;width:100%;height:calc(var(--u) * 361);overflow:hidden;position:relative}
  .hero__stage .panel{position:absolute}
  .panel--portrait{left:calc(var(--u) * 206);top:0;width:calc(var(--u) * 114)}
  .panel--warrior{left:0;top:calc(var(--u) * 102);width:calc(var(--u) * 87)}
  .panel--monster{left:calc(var(--u) * 81);top:calc(var(--u) * 102);width:calc(var(--u) * 122)}
  .star,.arrow--b{display:none}

  /* форма и позиция из мобильного макета: картинка 109.1×75.3, слева 200.7, сверху 272.5 от верха кадров */
  .arrow--a{container-type:inline-size;--grow:1.12;--arrow-mask:url("../assets/hero/arrow-m.svg");left:calc(var(--u) * 200.7);top:calc(var(--u) * 272.5);width:calc(var(--u) * 109.1);position:absolute;z-index:3}
  .arrow--a span{font-size:clamp(11px, 9.6cqw, 20px);line-height:1.2;padding:12% 6% 20% 0}

  .hero__cta{grid-column:2;grid-row:3;justify-self:start;align-self:start;margin:calc(var(--u) * 28) 0 0;position:relative;z-index:4;max-width:calc(var(--u) * 179)}
}

/* планшет 560–899: заголовок не заходит под овал, овал фиксированного размера */
@media (min-width:560px) and (max-width:899.98px){
  .hero__title{max-width:calc(100% - 210px);margin-top:calc(var(--u) * 22)}
  .hero__title .mb{display:none}
  .oval{width:200px;height:125px;margin-right:0;top:calc(var(--u) * 2)}
}