.trees{
  position:absolute;
  left:5%; right:5%;
  bottom:calc(var(--river-height) + 6vh);
  z-index:10;
  overflow:visible;
  display:flex;
  gap:28px;
  justify-content:space-between;
  align-items:flex-end;
}

.tree{
  width:120px; height:220px; position:relative;
  transition:transform .25s ease;
}
.tree .trunk{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:26px; height:86px; background:#8b5a36; border-radius:5px;
  box-shadow:inset -3px 0 0 #0002;
}

.tree .foliage{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:68px; width:130px; height:92px;
  background:linear-gradient(#2f8a34, #287930);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.08));
}

.tree .foliage:before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:108px; width:110px; height:80px;
  background:linear-gradient(#2b7d30, #246d2a);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

.tree .foliage:after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:142px; width:88px; height:62px;
  background:linear-gradient(#2a9b31, #22862a);
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
}

.tree:hover{transform:translateY(-6px) scale(1.03)}

.tree2{width:130px; height:220px; position:relative; transition:transform .25s ease}
.tree2 .trunk{
  position:absolute; left:50%; transform:translateX(-50%); bottom:0;
  width:28px; height:86px; background:#8b5a36; border-radius:6px;
  box-shadow:inset -3px 0 0 #0002;
}
.tree2 .crown{
  position:absolute; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 40% 30%, #7de08a 0 45%, #2e7d32 100%);
  border:2px solid #2a6f2e; border-radius:50%;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.08));
}
.tree2 .crown.c1{bottom:100px; width:120px; height:90px}
.tree2 .crown.c2{bottom:140px; width:92px;  height:70px}
.tree2 .crown.c3{bottom:166px; width:66px;  height:52px}
.tree2:hover{transform:translateY(-6px) scale(1.03)}
.trees > :nth-child(4){ margin-right:6vw; }  
.trees > :nth-child(5){ margin-left:6vw;  }