/* CSS - layered vector (paste into a stylesheet) */

/* helper: encode a few characters for embedding SVG in CSS (space/newline safe) */
:root{
  --aspect: calc(1280 / 1920 * 100%); /* aspect ratio for reserved space if needed */
}

/* container that holds the layered background */
.hero-bg{
  position: relative;
  width: 100%;
  min-height: 60vh;    /* change as needed */
  height: auto;
  display: block;
  color: #fff;
  overflow: hidden;
  background-color: #0f4c36; /* fallback while SVGs load */
  /* multiple background layers: order is top-first: noise, trees, foreground, mid, distant, base gradient */
  background-image:
    /* 6) fine noise overlay (subtle) */
    url("./bg.svg"),

    /* 1) base gradient */
    linear-gradient(to bottom, #135c3e 0%, #0f4c36 100%);
  /* background layering details */
  background-repeat: no-repeat, repeat-x, no-repeat, no-repeat, no-repeat, no-repeat;
  /* sizing: noise covers full, tree row repeats horizontally and anchored near top of foreground,
     and other layers scale to cover horizontally and positioned near bottom */
  background-size: cover, auto 28%, cover, cover, cover, cover;
  background-position: center center, left 72% bottom, center 72% bottom, center 80% bottom, center 90% bottom, center center;
  /* native smoothing of transforms */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* approach to reserve vertical space to avoid content shift (good for SEO) */
.hero-bg::before{
  content: "";
  display: block;
  padding-top: var(--aspect); /* preserves 1920x1280 aspect ratio — adjust if you want taller/shorter */
  pointer-events: none;
  visibility: hidden;
}

/* actual page content lives above the backgrounds */
.hero-content{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 2rem;
  text-align: center;
}

/* small-screen tweaks */
@media (max-width: 640px){
  .hero-bg{
    background-size: cover, auto 36%, cover, cover, cover, cover;
    background-position: center top, left 72% bottom, center 68% bottom, center 70% bottom, center 86% bottom, center center;
    min-height: 56vh;
  }
  .hero-bg::before{ padding-top: calc(var(--aspect) * 0.9); }
  .hero-content{ padding: 1rem; }
}