/* ══════════════════════════════════════════════════════════
   v3-hero — герой третьей страницы: полноэкранный статичный
   кадр, текст внизу слева. Образец — proto/deck/index.html.
   Красного в акте ровно два места: кикер и заливка CTA;
   h1 идёт одним цветом (--bone) — партнёры сняли «слишком ярко».
   Все значения — var() из tokens.css.
   ══════════════════════════════════════════════════════════ */

.v3hero{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:100vh;min-height:100svh;
  padding:26px var(--pad) clamp(34px,6vh,66px);
  background:var(--graphite);color:var(--bone);
}

/* ── кадр ──
   object-position 58 %: кадр шире экрана, и при кропе по центру героиня
   у правого края уезжает за границу — сдвигаем окно вправо. */
.v3hero__media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--graphite)}
.v3hero__media img{width:100%;height:100%;object-fit:cover;object-position:58% center}

/* Две завесы: слева — под колонку текста, снизу — под кнопки и стык
   со следующим актом. Справа кадр остаётся почти чистым. */
.v3hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,var(--veil-hard) 0%,var(--veil-mid) 38%,var(--veil-soft) 72%,var(--veil-none) 100%),
    linear-gradient(0deg,var(--veil-deep) 0%,var(--veil-none) 44%);
}


/* ── контент ── */
.v3hero__in{position:relative;width:100%;max-width:var(--content-max);margin-top:auto;padding-top:clamp(32px,6vh,64px)}
.v3hero__kicker{margin:0 0 clamp(14px,2.6vh,24px)}

.v3hero__h{
  margin:0;font-family:var(--disp);font-weight:900;text-transform:uppercase;
  font-size:var(--fs-hero-photo);line-height:.96;letter-spacing:-.03em;
  color:var(--bone);
}
.v3hero__line{display:block}

.v3hero__sub{
  margin:clamp(16px,2.6vh,26px) 0 0;max-width:46ch;
  font-size:var(--fs-h3);font-weight:400;line-height:1.45;color:var(--dim-strong);
}

.v3hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.6vh,36px)}

/* призрачная кнопка: та же посадка, что у .cta (19px+12.5px кегль),
   минус 1px паддинга на обводку — высоты двух кнопок совпадают */
.v3hero__ghost{
  display:inline-flex;align-items:center;white-space:nowrap;
  font-family:var(--disp);font-weight:700;font-size:var(--fs-ui);letter-spacing:.05em;
  text-transform:uppercase;text-decoration:none;color:var(--bone);
  background:none;border:1px solid var(--faint-16);padding:18px 29px;
  transition:background-color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease);
}
@media (hover:hover){
  .v3hero__ghost:hover{background:var(--faint);border-color:var(--faint-30)}
}

/* ── подъём строк при загрузке ── */
@media (prefers-reduced-motion:no-preference){
  .v3hero__kicker,.v3hero__line,.v3hero__sub,.v3hero__actions{
    opacity:0;transform:translateY(var(--reveal-shift));
    animation:v3heroUp var(--dur-m) var(--ease) forwards;
  }
  .v3hero__line:nth-child(1){animation-delay:.08s}
  .v3hero__line:nth-child(2){animation-delay:.16s}
  .v3hero__sub{animation-delay:.26s}
  .v3hero__actions{animation-delay:.34s}
  @keyframes v3heroUp{to{opacity:1;transform:none}}
}

/* ── планшет и телефон ──
   Героиня стоит справа: чем уже экран, тем дальше вправо уводим окно
   кропа, иначе в кадре остаётся пустая тёмная стена. Завеса при этом
   становится в основном нижней — текст идёт во всю ширину. */
@media (max-width:900px){
  .v3hero{padding-top:26px}
  .v3hero__media img{object-position:76% center}
  .v3hero__media::after{
    background:
      linear-gradient(90deg,var(--veil-deep) 0%,var(--veil-soft) 100%),
      linear-gradient(0deg,var(--veil-hard) 0%,var(--veil-mid) 34%,var(--veil-none) 68%);
  }
  .v3hero__sub{max-width:34ch}
}

@media (max-width:720px){
}

@media (max-width:420px){
  .v3hero__actions{display:grid;gap:10px}
  .v3hero__actions>*{justify-content:center;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .v3hero__ghost{transition:none}
}