/* Selected moss garden: original PNG alpha and provenance metadata retained. */
.hero .hero-sky{background:radial-gradient(ellipse at 58% 80%,#c3aaa03d,transparent 48%),linear-gradient(180deg,#14161b 0%,#292b33 37%,#66616b 72%,#aaa0ab 100%)}
/* Stagger the garden vertically even at rest: far shore, middle bank, near frame. */
.hero .hills-back{bottom:clamp(240px,22.22vw,320px);filter:saturate(.76) brightness(.88)}
.hero .hills-mid{bottom:clamp(140px,12.5vw,180px);filter:saturate(.82) brightness(.84)}
.hero .hills-front{bottom:24px;width:108%;left:-4%;filter:saturate(.8) brightness(.78)}
.hero .landscape{mask-image:linear-gradient(to bottom,#000 0%,#000 83%,transparent 100%)}
.hero .hills-front{mask-image:none}
.hero-ground{position:absolute;left:0;right:0;bottom:0;height:calc(64px + var(--hero-scroll) * 210px);background:linear-gradient(transparent,#15171c 40px);z-index:5;pointer-events:none}
.hero .hero-fade{height:170px}
/* Near moss and maple branches overlap the preview and move fastest. */
.scroll-motion .hero .hills-back{transform:translateY(calc(var(--hero-scroll) * -32px))}
.scroll-motion .hero .hills-mid{transform:translateY(calc(var(--hero-scroll) * -76px))}
.scroll-motion .hero .hero-product{transform:translateX(-50%) translateY(calc(var(--hero-scroll) * -110px)) scale(calc(1 + var(--hero-scroll) * .065))}
.scroll-motion .hero .hills-front{transform:translateY(calc(var(--hero-scroll) * -210px)) scale(1.045)}
/* Every garden plane keeps its native 3:1 ratio; the preview sits between them. */
.contact .contact-inner{min-height:800px}
.contact .contact-copy{z-index:7;text-shadow:0 2px 18px #15171c80}
.contact::before{content:'';position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(90deg,#15171ca8 0%,#15171cbc 29%,transparent 57%)}
.contact .contact-product{z-index:2;height:calc(100% - 50px)}
.contact .contact-landscape{width:100%;height:auto;max-height:none;object-fit:contain;transform-origin:bottom}
.contact .contact-garden-back{bottom:240px;z-index:0;filter:saturate(.7) brightness(.8);mask-image:linear-gradient(to bottom,#000 75%,transparent)}
.contact .contact-garden-mid{bottom:120px;z-index:1;filter:saturate(.78) brightness(.8);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.contact .contact-garden-front{bottom:-12px;z-index:5;filter:saturate(.8) brightness(.76)}
.scroll-motion .contact .contact-garden-back{transform:translateY(calc(var(--dunes-shift,0px) * .35))}
.scroll-motion .contact .contact-garden-mid{transform:translateY(calc(var(--dunes-shift,0px) * .8))}
.scroll-motion .contact .contact-garden-front{transform:translateY(calc(var(--dunes-shift,0px) * 1.4))}
.contact::after{content:'';position:absolute;left:0;right:0;bottom:0;height:115px;background:linear-gradient(transparent,#15171c 82%);z-index:6;pointer-events:none}
.demo-horizon{background-image:url('./assets/landscapes/garden-mid.png');filter:saturate(.72) brightness(.95)}
@media(min-width:601px) and (max-width:1200px){
  .contact .contact-inner{display:block;min-height:1000px}
  .contact .contact-copy{width:100%;max-width:430px;padding-top:0}
  .contact::before{display:none}
  .contact .contact-product{top:400px;left:0;width:100%;height:560px}
  .contact .contact-garden-back{width:1200px;left:calc(50% - 600px)}
  .contact .contact-garden-mid{width:1200px;left:calc(50% - 600px)}
  .contact .contact-garden-front{width:1200px;left:calc(50% - 600px)}
}
@media(max-width:600px){
  .hero .hills-back{width:210%;left:-55%;bottom:190px}
  .hero .hills-mid{width:185%;left:-42.5%;bottom:112px}
  .hero .hills-front{width:145%;left:-22.5%;height:340px;object-fit:fill;bottom:36px}
  .hero-ground{height:calc(76px + var(--hero-scroll) * 112px)}
  .hero .hero-fade{height:120px}
  .scroll-motion .hero .hero-product{transform:translateX(-50%) translateY(calc(var(--hero-scroll) * -54px)) scale(calc(1 + var(--hero-scroll) * .035))}
  .scroll-motion .hero .hills-front{transform:translateY(calc(var(--hero-scroll) * -112px)) scale(1.045)}
  .contact .contact-inner{min-height:905px}
  .contact::before{display:none}
  .contact .contact-product{width:100%;height:460px}
  .contact .contact-product .product-sidebar{width:82px;padding-inline:8px}
  .contact .contact-product .sidebar-item>span{font-size:8px}
  .contact .contact-product .screen-content{padding:80px 12px 20px}
  .contact .contact-product .screen-content h3{font-size:24px}
  .contact .contact-screen-button{padding-inline:20px}
  .contact .contact-garden-back{width:1080px;left:calc(50% - 540px);bottom:240px}
  .contact .contact-garden-mid{width:960px;left:calc(50% - 480px);bottom:130px}
  .contact .contact-garden-front{width:1080px;left:calc(50% - 540px);bottom:20px}
}