/* ===== Tidy Yard - hero com foto de fundo e parallax ===== */
.hero{
  position: relative;
  isolation: isolate;        /* prende as camadas ao proprio hero */
  overflow: hidden;
  background-color: #0C2015; /* base enquanto a foto carrega */
  --py: 0px;                 /* deslocamento do parallax (ba-touch.js) */
}

/* camada da foto - e ela que se move */
.hero::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18%; bottom: -18%;
  background: url("/img/hero-mow.webp") center 42% / cover no-repeat;
  transform: translate3d(0, var(--py), 0);
  will-change: transform;
  backface-visibility: hidden;
  z-index: -2;
}

/* veu: escurece o centro (onde fica o texto) e preserva a foto nas bordas */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 78% at 50% 52%, rgba(9,24,16,.80) 0%, rgba(9,24,16,.56) 46%, rgba(9,24,16,.26) 78%),
    linear-gradient(180deg, rgba(9,24,16,.80) 0%, rgba(9,24,16,.26) 34%, rgba(9,24,16,.40) 66%, rgba(9,24,16,.88) 100%);
  z-index: -1;
}

/* texto em primeiro plano */
.hero .eyebrow{ color: #E3C88F; }
.hero h1, .hero h1 .hl{ color: #F6F3EA; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.hero h1 em.uline{ color: #E8CB96; }
.hero .lead{ color: rgba(248,245,237,.96); text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 20px rgba(0,0,0,.5); }
.hero .hero-scroll{ color: rgba(248,245,237,.85); }
.hero > svg{ opacity: .09; }

/* botoes sobre a foto */
.hero .btn-solid{ background: #B08D4F; border-color: #B08D4F; color: #12301F; }
.hero .btn-solid:hover{ background: #C4A063; border-color: #C4A063; color: #12301F; }
.hero .btn-ghost{ color: #F6F3EA; border-color: rgba(246,243,234,.72); background: rgba(9,24,16,.34); }
.hero .btn-ghost:hover{ color: #F6F3EA; background: rgba(246,243,234,.16); border-color: #F6F3EA; }

/* celular: imagem mais leve, enquadramento no operador e veu mais forte */
@media (max-width: 900px){
  .hero::before{
    background-image: url("/img/hero-mow-900.webp");
    background-position: 45% 42%;
  }
  .hero::after{
    background:
      radial-gradient(150% 70% at 50% 48%, rgba(9,24,16,.82) 0%, rgba(9,24,16,.60) 50%, rgba(9,24,16,.38) 82%),
      linear-gradient(180deg, rgba(9,24,16,.82) 0%, rgba(9,24,16,.38) 34%, rgba(9,24,16,.50) 66%, rgba(9,24,16,.90) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero::before{ transform: none; }
}