/* ============================
   Hero-секция
   ============================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-black);
}

.hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* --- Видео + poster-фоллбэк --- */
.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* poster-фоллбэк: если видео не загрузится, виден poster через CSS */
  background: #000 url(../../assets/images/hero-poster-desktop.jpg) center / cover no-repeat;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hero__video--ready {
  opacity: 1;
}

/* --- Затемнение видео (gradient + точки) --- */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.4) 100%);
}

.hero__overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../../assets/images/v-bg.png) center repeat;
  opacity: 0.7;
}

/* --- Диагональные полосы (V-образный конверт) --- */
.hero__line {
  position: absolute;
  z-index: 9;
  top: 0;
  width: 40%;
  height: 200%;
  background: rgba(0, 0, 0, 0.45);
}

.hero__line::after {
  content: '';
  position: absolute;
  top: 0;
  width: 60%;
  height: 200%;
  background: rgba(190, 0, 0, 0.78);
}

/* Левая полоса — 244 px ≈ 12.7 vw при 1920 */
.hero__line--left {
  right: 50%;
  transform-origin: top right 0;
  transform: matrix(1, 0, -0.4, 1, -244, 0);
}

.hero__line--left::after {
  right: 40%;
}

/* Правая полоса */
.hero__line--right {
  left: 50%;
  transform-origin: top left 0;
  transform: matrix(1, 0, 0.4, 1, 244, 0);
}

.hero__line--right::after {
  left: 40%;
}

/* --- Лого вверху (перевёрнутый треугольник свисает от верхнего края) --- */
.hero__logo {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 50%;
  margin-left: -244px;
  width: 488px;
  height: 272px;
  background: url(../../assets/images/main-top.png) 50% 0 / contain no-repeat;
  /* Анимация спуска */
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__logo--visible {
  transform: translateY(0);
}

.hero__logo-img {
  display: block;
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 163px;
}

/* --- Кнопка "Прокрутите ВНИЗ" — единый круг --- */
.hero__scroll-down {
  position: absolute;
  z-index: 99;
  bottom: 15%;
  left: 50%;
  margin-left: -48px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-primary, #182d97);
  box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: box-shadow 0.3s ease, opacity 0.3s ease;
  animation: scroll-bounce 2s ease-in-out infinite;
}

.hero__scroll-down:hover {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.32);
}

.hero__scroll-down.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.hero__scroll-text {
  font: 600 9px/1 var(--font-heading, 'Arimo', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero__scroll-label {
  font: 600 24px/1 var(--font-heading, 'Arimo', sans-serif);
  text-transform: uppercase;
  display: block;
}

.hero__scroll-icon {
  margin-top: 2px;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================
   Responsive
   ============================ */
/* --- Responsive: tablet --- */
@media (max-width: 1024px) {
  .hero__line--left {
    transform: matrix(1, 0, -0.4, 1, -150, 0);
  }
  .hero__line--right {
    transform: matrix(1, 0, 0.4, 1, 150, 0);
  }
}

/* --- Responsive: mobile --- */
@media (max-width: 768px) {
  .hero__video-wrap {
    background-image: url(../../assets/images/hero-poster-mobile.jpg);
  }

  .hero__logo {
    width: 80vw;
    max-width: 380px;
    height: 0;
    padding-bottom: 44.6%;       /* сохраняем пропорцию 488:272 ≈ 1:0.557 */
    margin-left: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
  }

  .hero__logo--visible {
    transform: translateX(-50%) translateY(0);
  }

  .hero__logo-img {
    max-width: 28%;
    top: 5vw;
  }

  .hero__line--left {
    transform: matrix(1, 0, -0.4, 1, -80, 0);
  }
  .hero__line--right {
    transform: matrix(1, 0, 0.4, 1, 80, 0);
  }

  .hero__scroll-down {
    width: 72px;
    height: 72px;
    margin-left: -36px;
  }

  .hero__scroll-label {
    font-size: 18px;
  }

  .hero__scroll-text {
    font-size: 7px;
  }
}