/* Hero секція з JS parallax
 * BEM методологія
 * Parallax через JS
 */

/* ============================================================================ */

/* HERO КОНТЕЙНЕР                                                               */

/* ============================================================================ */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg-dark);
  overflow: hidden;
}

/* ============================================================================ */

/* ВІДЕО WRAPPER                                                                */

/* ============================================================================ */

.hero__video-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  /* Parallax через CSS змінну (встановлюється JS) */
  --parallax-offset: 0px;

  transform: translateX(-50%) translateY(var(--parallax-offset));
}

/* Desktop: 52% позиціонування, 11% від топу */
@media (width >= 768px) {
  .hero__video-wrapper {
    top: 11%;
    left: 52%;
    max-width: 50%;
  }

  .hero__text--center {
    max-width: 50%;
  }

  .hero__text--center-bottom {
    max-width: 50%;
  }
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-in;
  pointer-events: none;
}

/* Відео готове до показу (встановлюється JS в init) */
.hero__video--visible {
  opacity: 1;
}

/* Заборонити взаємодію після ended */
.hero__video--ended {
  pointer-events: none;
}

/* Відео в статичному режимі (вже було відтворено) */
.hero__video--static {
  pointer-events: none;
}

/* ============================================================================ */

/* ТЕКСТОВИЙ КОНТЕЙНЕР                                                          */

/* ============================================================================ */

.hero__text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ============================================================================ */

/* ТЕКСТ З АНІМАЦІЄЮ (через JS)                                                */

/* ============================================================================ */

.hero__text {
  position: absolute;
  color: var(--color-text-light);
  font-family: var(--font-family-hero);
  font-size: clamp(2.25rem, 7.5vw, 5.25rem);
  font-weight: normal;
  line-height: 1.2;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  backface-visibility: hidden;
  transition: opacity 5s ease-out, transform 5s ease-out;
}

/* Для центрованого тексту - об'єднуємо translateX з анімацією */
.hero__text--center {
  transform: translate3d(-50%, 20px, 0);

  /* ПОГЛЯНЬТЕ - по центру, зверху */
  top: calc(2rem + var(--safe-area-top));
  left: 50%;
  text-align: center;
}

/* ПРАВДІ У ВІЧІ - по центру під відео */
.hero__text--center-bottom {
  bottom: calc(2rem + var(--safe-area-bottom));
  left: 50%;
  transform: translate3d(-50%, 20px, 0);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.hero__text-line {
  display: block;
  line-height: 1.2;
}

/* JS додає цей клас на 5 секунді відео */
.hero__text--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Для центрованого тексту при видимості */
.hero__text--center.hero__text--visible {
  transform: translate3d(-50%, 0, 0);
}

/* Для center-bottom при видимості */
.hero__text--center-bottom.hero__text--visible {
  transform: translate3d(-50%, 0, 0);
}

/* Текст одразу видимий для статичного режиму */
.hero__text--static {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}

/* Для центрованого тексту в статичному режимі */
.hero__text--center.hero__text--static {
  transform: translate3d(-50%, 0, 0);
}

/* Для center-bottom в статичному режимі */
.hero__text--center-bottom.hero__text--static {
  transform: translate3d(-50%, 0, 0);
}

/* Текст для error fallback */
.hero__text--error {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: none;
}

/* Для центрованого тексту в error режимі */
.hero__text--center.hero__text--error {
  transform: translate3d(-50%, 0, 0);
}

/* Для center-bottom в error режимі */
.hero__text--center-bottom.hero__text--error {
  transform: translate3d(-50%, 0, 0);
}

/* ============================================================================ */

/* ACCESSIBILITY                                                                */

/* ============================================================================ */

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

  .hero__text--visible {
    opacity: 1;
    transform: none;
  }

  .hero__text--center.hero__text--visible {
    transform: translateX(-50%);
  }

  .hero__text--center-bottom.hero__text--visible {
    transform: translateX(-50%);
  }
}

/* ============================================================================ */

/* МОБІЛЬНА АДАПТАЦІЯ                                                           */

/* ============================================================================ */

@media (width <= 767px) {
  .hero__video-wrapper {
    left: 54%;
  }

  .hero__text {
    font-size: clamp(3.6rem, 12vw, 6rem);
  }

  /* ПОГЛЯНЬТЕ - над відео на мобільній */
  .hero__text--center {
    top: calc(2rem + var(--safe-area-top));
    bottom: auto;
    left: 50%;
    /* transform та правила для модифікаторів (--visible, --static, --error) 
       визначені в базовому блоці вище і працюють через каскад */
  }

  .hero__text--center-bottom {
    bottom: calc(1rem + var(--safe-area-bottom));
    left: 50%;
    transform: translate3d(-50%, 20px, 0);
  }

  /* Правила для .hero__text--center з модифікаторами (--visible, --static, --error) 
     визначені в базовому блоці вище і працюють через каскад */
}