/* ================================================================
   hero.css — блок 01 Hero (v3 — упрощённый layout, canvas hard right)
   ================================================================ */

.sec-hero {
  padding-top: var(--space-3);
  padding-bottom: var(--section-pad-y);
  position: relative;
  overflow: hidden;
}
.sec-hero .container { position: relative; }

.hero-content {
  position: relative;
  z-index: 2;                            /* точно поверх canvas */
  max-width: 100%;
  pointer-events: none;                  /* даём кругам получать hover; кнопки/ссылки ниже включают pointer-events обратно */
}
.hero-content a, .hero-content button, .hero-content .btn { pointer-events: auto; }

/* ─── Grid lines (только desktop, subtle) ─── */
.sec-hero .grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.12;
  z-index: 0;
  overflow: hidden;
  display: none;
}
@container (min-width: 900px) {
  .sec-hero .grid-lines { display: block; }
}
.sec-hero .grid-lines .h-line,
.sec-hero .grid-lines .v-line {
  position: absolute;
  background: var(--c-fg);
}
.sec-hero .grid-lines .h-line { height: 1px; left: 0; right: 0; }
.sec-hero .grid-lines .v-line { width: 1px; top: 0; bottom: 0; }

/* ─── Canvas rings — жёстко в правой половине ─── */
/* left: auto нужен: .bg-canvas base задаёт inset:0 → left:0.
   Без явного left:auto браузер в LTR при over-constraint (left+right+width) игнорирует right → canvas оказывается слева. */
.sec-hero .bg-canvas {
  position: absolute;
  top: 50%;
  left: auto;
  right: -30%;
  transform: translateY(-50%);
  width: 76.5%;                          /* 90% × 0.85 — уменьшено на 15% */
  aspect-ratio: 1 / 1;
  height: auto;
  max-height: 59.5vh;                    /* 70vh × 0.85 — уменьшено на 15% */
  opacity: 0.18;                         /* mobile — subtle за контентом */
  pointer-events: none;
  z-index: 1;
}
@container (min-width: 900px) {
  .sec-hero .bg-canvas {
    inset: 7.5% 0 7.5% auto;             /* 15% суммарного отступа = canvas 85% высоты секции */
    transform: none;
    width: auto;
    height: auto;
    max-height: none;
    max-width: 50%;                      /* не занимает больше половины по ширине */
    aspect-ratio: 1 / 1;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ─── Eyebrow ─── */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-source);
  color: var(--c-fg-muted);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--c-fg);
  opacity: 0.3;
}

/* ─── PICK wordmark над H1 (компактный, не huge как H1) ─── */
.hero-wordmark {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: clamp(2rem, 5vw, 3.5rem);    /* 32→56px, меньше H1 */
  line-height: 1;
  letter-spacing: var(--ls-tight-3);
  color: var(--c-fg);
  margin-bottom: var(--space-3);
}

/* ─── H1 в 2 строки (через <br>), обычный текст, без flex ─── */
.hero-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight-3);
  color: var(--c-fg);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

/* ─── Fullname — 20px body-lg под H1 ─── */
.hero-fullname {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--c-fg-muted);
  margin-bottom: var(--space-6);
  max-width: 36ch;
}

.hero-sub { margin-top: 0; }
.hero-cta-row { margin-top: var(--space-6); }
.hero-under-btn { margin-top: var(--space-2); }
.hero-secondary-cta { display: inline-block; margin-top: var(--space-3); }

/* ─── Stagger cascade для hero content ─── */
.hero-content > * {
  opacity: 0;
  transform: translateY(12px);
}
.hero-content.is-mounted > * {
  animation: staggerIn var(--dur-slow) var(--ease) forwards;
}
.hero-content.is-mounted > *:nth-child(1) { animation-delay: 0ms;   animation-duration: 400ms; }
.hero-content.is-mounted > *:nth-child(2) { animation-delay: 100ms; animation-duration: 500ms; }
.hero-content.is-mounted > *:nth-child(3) { animation-delay: 200ms; animation-duration: 700ms; }
.hero-content.is-mounted > *:nth-child(4) { animation-delay: 400ms; animation-duration: 500ms; }
.hero-content.is-mounted > *:nth-child(5) { animation-delay: 550ms; animation-duration: 500ms; }
.hero-content.is-mounted > *:nth-child(6) { animation-delay: 750ms; animation-duration: 400ms; }
.hero-content.is-mounted > *:nth-child(7) { animation-delay: 900ms; animation-duration: 400ms; }

@keyframes staggerIn {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Section reveal on scroll (для не-hero секций) ─── */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}