/*
 * Hero — Figma desktop 13:5 (1440×928), mobile 44:2521 (375×850).
 * Desktop: pt 16, px 48, pb 150 (з них 30 — під заокругленим верхом
 *   наступної секції), justify-between; фото на 122.77%×107.22%,
 *   left −7.39%; затемнення зліва rgba(0,0,0,.4) 552×850 blur 150.
 * Контент: рейтинг (зірки 125×25 + 18/1.1), h1 64/1.1 SemiBold,
 *   lead 20/1.2 (ширина 504), gap 24; CTA-ряд gap 32; між блоками gap 44.
 * Mobile: усе по центру, h1 44, lead 16, затемнення .6 на всю ширину,
 *   pb 100.
 */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* шапка поза потоком (fixed/absolute) — контент знизу */
  height: 928px;
  padding: 16px var(--gutter) 150px;
  overflow: hidden;
  background: var(--color-white);
  color: var(--color-white);
}

/* Hero «прилипає», а наступні секції наїжджають на нього (наступний блок
   має заокруглений верх і margin-top −30). top рахує js/sticky-sections.js:
   min(0, висота вікна − висота hero) — фіксується, коли низ hero дійшов до низу екрана.
   Desktop: висота не більша за екран (928 за макетом, але не менше 720),
   тож відео не зсувається взагалі. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
}

.hero ~ main,
.hero ~ .site-footer {
  position: relative;
}

.hero ~ main {
  z-index: 1;
}

@media (min-width: 901px) {
  .hero {
    height: clamp(720px, 100vh, 928px);
  }
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Фонове відео (Assets/openart-video…mp4 → videos/hero.mp4, без аудіо).
   Грає один раз і зупиняється на останньому кадрі — js/hero-intro.js. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  /* Збільшення від лівого верхнього кута: дівчина зсувається праворуч і нижче,
     нижній рядок лого на фартуху («Residential Cleaning») іде за край кадру */
  transform: scale(1.3);
  transform-origin: left top;
}

/* Стан до появи: шапка й текст приховані до анімації появи (js/hero-intro.js).
   Страховка: якщо скрипт запізнився (повільна мобільна мережа), CSS сам показує їх через 1 с —
   заголовок і бургер не мають чекати на скрипти. */
.hero-intro-pending .site-header,
.hero-intro-pending .hero__content > * {
  opacity: 0;
  animation: hero-intro-fallback 0.4s ease 1s forwards;
}

@keyframes hero-intro-fallback {
  to { opacity: 1; }
}

.hero__shade {
  position: absolute;
  top: 0;
  left: 0;
  width: 552px;
  height: 850px;
  background: var(--color-hero-shade);
  filter: blur(150px);
  pointer-events: none;
}

.hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 44px;
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__rating {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.1;
}

.hero__rating img {
  width: 125px;
  height: 25px;
}

.hero__rating-mobile-stars {
  display: none;
}

.hero__rating strong {
  font-weight: 600;
}

.hero__title {
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
}

.hero__title em {
  font-weight: 600;
}

.hero__title-line {
  display: block;
}

/* Блик на слові «home» після появи тексту — js/hero-home-shine.js.
   Світла смуга (білий → #c6e1e8 → яскраве ядро) пробігає по літерах
   через background-clip: text, наприкінці спалахує зірочка ✦. */
.hero__shine-word {
  position: relative;
  display: inline-block;
}

.hero__shine-word.is-shining {
  background-image: linear-gradient(105deg,
    var(--color-white) 0%,
    var(--color-white) 40%,
    var(--color-primary-soft) 46%,
    var(--color-white) 50%,
    var(--color-primary-soft) 54%,
    var(--color-white) 60%,
    var(--color-white) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__glint {
  position: absolute;
  top: 0.08em;
  right: -0.32em;
  width: 0.4em;
  height: 0.4em;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.9));
}

.hero__lead {
  max-width: 504px;
  font-size: 20px;
  line-height: 1.2;
  color: var(--color-white-70);
}

.hero__lead strong {
  font-weight: 600;
  color: var(--color-white);
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 32px;
}

.hero__call {
  display: flex;
  flex-direction: column;
  gap: 8px;
  white-space: nowrap;
}

.hero__call-label {
  font-size: 18px;
  line-height: 1.2;
}

.hero__call-number {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
}

@media (max-width: 1279px) {
  .hero {
    padding-top: 0;
    padding-inline: 0;
  }

  .hero__content {
    padding-inline: var(--gutter);
  }
}

@media (max-width: 900px) {
  .hero {
    height: 850px;
    padding-bottom: 100px;
  }

  /* Mobile: дівчина по центру кадру, без збільшення */
  .hero__video {
    /* дівчина в кадрі на ~58% ширини відео — 61% ставить її по центру екрана;
       збільшення ×1.13 від низу по центру піднімає обличчя: очі — між
       шапкою і рейтингом (зірками) */
    object-position: 61% center;
    transform: scale(1.13);
    transform-origin: 50% 100%;
  }

  .hero__shade {
    width: 100%;
    background: var(--color-hero-shade-mobile);
  }

  .hero__content {
    align-items: center;
    text-align: center;
  }

  .hero__text {
    align-items: center;
  }

  .hero__rating {
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
  }

  .hero__rating img {
    display: none;
  }

  .hero__rating .hero__rating-mobile-stars {
    display: block;
    width: 100px;
    height: 20px;
  }

  .hero__title {
    font-size: 44px;
  }

  .hero__title-line {
    display: inline;
  }

  .hero__lead {
    font-size: 16px;
  }

  .hero__actions {
    flex-direction: column;
    gap: 24px;
  }

  .hero__call {
    align-items: center;
  }

  .hero__call-label {
    font-size: 14px;
  }

  .hero__call-number {
    font-size: 28px;
  }
}