/* Hero секція: статичне зображення (вспливання) + текст + CTA
 * BEM · без !important · CSS variables з base.css
 * Motion: лише opacity/transform (Emil)
 */

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

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

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

.hero {
  --hero-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hero-media-duration: 2s;

  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}

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

/* MEDIA: зображення + veil                                                     */

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

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--hero-media-duration) var(--hero-ease-out);
}

.hero__media--visible {
  opacity: 1;
}

.hero__media-plane {
  position: absolute;
  inset: 0;

  --parallax-offset: 0px;

  transform: translateY(var(--parallax-offset));
  will-change: transform;
}

.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 36%;
  display: block;
  pointer-events: none;
  transform: scale(1.06);
  transform-origin: 62% 36%;
  transition: transform var(--hero-media-duration) var(--hero-ease-out);
  will-change: transform;
}

.hero__media--visible .hero__image {
  transform: scale(1);
}

/* Затемнення для читабельності тексту */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.92) 0%, rgba(7, 7, 7, 0.55) 42%, rgba(7, 7, 7, 0.2) 70%, transparent 100%),
    linear-gradient(0deg, rgba(7, 7, 7, 0.88) 0%, rgba(7, 7, 7, 0.35) 38%, transparent 62%);
  pointer-events: none;
}

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

/* CONTENT: бренд + заголовок + lead + CTA                                      */

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

.hero__content {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 40rem;
  padding:
    calc(5rem + var(--safe-area-top))
    var(--spacing-xl)
    calc(2.5rem + var(--safe-area-bottom));
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.9s var(--hero-ease-out) 0.25s,
    transform 0.9s var(--hero-ease-out) 0.25s;
}

.hero__content--visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.hero__eyebrow {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.hero__title {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-family-hero);
  font-size: clamp(2.4rem, 6.5vw, 4.5rem);
  font-weight: normal;
  line-height: 1.05;
  color: var(--color-text-light);
  text-transform: uppercase;
}

.hero__title-line {
  display: block;
}

.hero__lead {
  margin: 0 0 var(--spacing-xl);
  max-width: 28rem;
  font-family: var(--font-family-base);
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  align-items: center;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font-family: var(--font-family-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hero__cta:active {
  transform: scale(0.98);
}

.hero__cta--primary {
  background-color: var(--color-text-light);
  color: var(--color-bg-dark);
  border: 2px solid var(--color-text-light);
}

.hero__cta--primary:hover,
.hero__cta--primary:focus-visible {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-light);
}

.hero__cta--secondary {
  background-color: transparent;
  color: var(--color-text-light);
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.hero__cta--secondary:hover,
.hero__cta--secondary:focus-visible {
  border-color: var(--color-text-light);
  opacity: 0.92;
}

.hero__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

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

/* DESKTOP                                                                      */

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

@media (width >= 768px) {
  .hero {
    align-items: center;
  }

  .hero__image {
    object-position: 62% 32%;
    transform-origin: 62% 32%;
  }

  .hero__veil {
    background:
      linear-gradient(90deg, rgba(7, 7, 7, 0.94) 0%, rgba(7, 7, 7, 0.72) 36%, rgba(7, 7, 7, 0.25) 58%, transparent 78%),
      linear-gradient(0deg, rgba(7, 7, 7, 0.55) 0%, transparent 45%);
  }

  .hero__content {
    padding-left: clamp(2rem, 6vw, 5rem);
    padding-right: 2rem;
    padding-bottom: calc(3rem + var(--safe-area-bottom));
  }
}

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

/* MOBILE / TABLET                                                              */

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

@media (width <= 767px) {
  .hero {
    align-items: flex-end;
    min-height: 100svh;
  }

  .hero__image {
    object-position: 68% 30%;
    transform-origin: 68% 30%;
  }

  .hero__veil {
    background:
      linear-gradient(0deg, rgba(7, 7, 7, 0.96) 0%, rgba(7, 7, 7, 0.75) 34%, rgba(7, 7, 7, 0.25) 58%, transparent 78%),
      linear-gradient(90deg, rgba(7, 7, 7, 0.35) 0%, transparent 55%);
  }

  .hero__content {
    max-width: none;
    padding:
      1rem
      var(--spacing-md)
      calc(1.5rem + var(--safe-area-bottom));
  }

  .hero__title {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
  }

  .hero__actions {
    width: 100%;
  }

  .hero__cta {
    flex: 1 1 auto;
    min-width: calc(50% - 0.35rem);
  }
}

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

/* iOS Safari                                                                   */

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

@supports (-webkit-touch-callout: none) {
  .hero {
    min-height: -webkit-fill-available;
  }
}

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

/* ACCESSIBILITY                                                                */

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

@media (prefers-reduced-motion: reduce) {
  .hero__content,
  .hero__media,
  .hero__image {
    transition: none;
  }

  .hero__content {
    opacity: 1;
    transform: none;
  }

  .hero__media {
    opacity: 1;
  }

  .hero__image {
    transform: none;
  }

  .hero__media-plane {
    transform: none;
    will-change: auto;
  }
}