/* hero.css — главный экран pk-club: статичный космический фон, без анимации. */

.hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Постер на случай если видео ещё не загрузилось */
  background-image: url('/assets/img/scenes/cosmos-boy.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Затемнение для читаемости текста — мягкая виньетка слева, где живёт контент */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bg-deep) 75%, transparent) 0%,
      color-mix(in srgb, var(--bg-deep) 35%, transparent) 45%,
      transparent 75%
    ),
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg-deep) 50%, transparent) 0%,
      transparent 30%,
      transparent 70%,
      color-mix(in srgb, var(--bg-deep) 60%, transparent) 100%
    );
  pointer-events: none;
}

section.hero {
  position: relative;
  z-index: 5;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: 96px 32px 48px;
}

.hero-content {
  max-width: 920px;
  width: 100%;
  margin-left: 4vw;
}

/* Сжатый h-display только в hero — чтобы две строки гарантированно
   помещались по ширине даже на широких экранах */
section.hero .h-display {
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.05;
  margin-bottom: 6px;
}

/* Подзаголовок — Inter italic, светлее, плотно прижат к h1 как dek-цитата */
section.hero .h-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.35;
  color: var(--text-soft);
  margin-bottom: 24px;
  letter-spacing: 0.01em;
}

section.hero .lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 620px;
}

section.hero .eyebrow {
  margin-bottom: 16px;
  font-size: 12px;
}

section.hero .cta {
  padding: 14px 24px;
  font-size: 14px;
}

@media (max-height: 760px) {
  section.hero { padding: 84px 32px 36px; }
  section.hero .h-display { font-size: clamp(24px, 3.4vw, 44px); margin-bottom: 4px; }
  section.hero .h-sub { font-size: clamp(15px, 1.2vw, 18px); margin-bottom: 18px; }
  section.hero .lede { font-size: 15px; line-height: 1.5; margin-bottom: 20px; }
}

@media (max-width: 720px) {
  section.hero {
    padding: 96px 22px 40px;
    height: auto;
    min-height: 100svh;
  }
  .hero-content { margin-left: 0; }
  section.hero .h-display { font-size: clamp(32px, 8vw, 44px); }
  .hero-bg::after {
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--bg-deep) 70%, transparent) 0%,
        color-mix(in srgb, var(--bg-deep) 50%, transparent) 50%,
        color-mix(in srgb, var(--bg-deep) 80%, transparent) 100%
      );
  }
}