/* ----- Tidy Yard - hero da pagina /areas: foto de fundo com parallax -----
   Linkado SO no areas.html. O movimento vem do --py que o ba-touch.js escreve. */

.phero{
  position: relative;
  isolation: isolate;          /* prende as camadas ao proprio banner */
  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 */
.phero::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18%; bottom: -18%;
  background: url("/img/hero-areas.webp") center 58% / cover no-repeat;
  transform: translate3d(0, var(--py), 0);
  will-change: transform;
  backface-visibility: hidden;
  z-index: -2;
}

/* veu: escurece a esquerda (onde fica o texto) e deixa a casa visivel a direita */
.phero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(96deg, rgba(9,24,16,.90) 0%, rgba(9,24,16,.78) 38%, rgba(9,24,16,.40) 66%, rgba(9,24,16,.18) 100%),
    linear-gradient(180deg, rgba(9,24,16,.55) 0%, rgba(9,24,16,.12) 34%, rgba(9,24,16,.45) 100%);
}

/* texto sobre a foto */
.phero > svg{ opacity: .08; }
.phero .crumbs li{ color: rgba(246,243,234,.66); }
.phero .crumbs li::before{ color: rgba(246,243,234,.30); }
.phero .crumbs a{ color: #E8CB96; }
.phero .eyebrow{ color: #E8CB96; }
.phero .eyebrow::before{ background: #E8CB96; }
.phero h1{ color: #F6F3EA; text-shadow: 0 2px 26px rgba(0,0,0,.5); }
.phero .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); }

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

/* celular: imagem mais leve, enquadramento no jardim e veu vertical */
@media (max-width: 900px){
  .phero::before{
    background-image: url("/img/hero-areas-900.webp");
    background-position: 64% 56%;
  }
  .phero::after{
    background: linear-gradient(180deg, rgba(9,24,16,.80) 0%, rgba(9,24,16,.58) 42%, rgba(9,24,16,.74) 100%);
  }
}

/* respeita "reduzir movimento": foto fixa, sem parallax */
@media (prefers-reduced-motion: reduce){
  .phero::before{ transform: none; top: 0; bottom: 0; }
}