/* ============================================================
   Lake scene - decorative hero backdrop for Homes On Grand.
   Additive only. References /images/lake-scene.svg.
   Sits behind hero content (z-index:-1); never affects layout
   (absolutely positioned => no CLS). Palette: site tokens only.
   ============================================================ */

.hero .lake-scene{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("/images/lake-hero.jpg") no-repeat center 40% / cover;
  background:image-set(url("/images/lake-hero.webp") type("image/webp"), url("/images/lake-hero.jpg") type("image/jpeg")) no-repeat center 40% / cover;
  pointer-events:none;
  opacity:1;
}

/* Cream wash: protects the left headline column for contrast and
   keeps the cream palette dominant. Existing .hero::after handles
   the bottom fade into the page. */
.hero .lake-scene::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(130% 130% at -12% 122%,
      var(--paper) 0%,
      rgba(247,241,227,0.95) 23%,
      rgba(247,241,227,0.62) 39%,
      rgba(247,241,227,0.18) 55%,
      rgba(247,241,227,0) 66%);
}

/* A whisper of morning life - gentle drift + soft fade-in.
   Motion is opt-in via the user's OS setting. */
@media (prefers-reduced-motion:no-preference){
  .hero .lake-scene{
    opacity:0;
    transform-origin:62% 72%;
    will-change:transform, opacity;
    animation:
      hog-scene-in 1.2s ease 0.05s forwards,
      hog-scene-drift 32s ease-in-out 1.3s infinite alternate;
  }
  @keyframes hog-scene-in{ to{ opacity:1; } }
  @keyframes hog-scene-drift{
    from{ transform:scale(1.02) translate3d(0,0,0); }
    to{   transform:scale(1.06) translate3d(-12px,-7px,0); }
  }
}

/* Mobile: hero stacks, so strengthen the wash top-and-bottom to
   keep the headline and stats crisp over the scene. */
@media (max-width:919px){
  .hero .lake-scene{
    background-position:center 60%;
  }
  .hero .lake-scene::after{
    background:linear-gradient(180deg,
      rgba(247,241,227,0.26) 0%,
      rgba(247,241,227,0.40) 27%,
      rgba(247,241,227,0.80) 47%,
      var(--paper) 62%);
  }
}