/* Plants & Exotics — vines climbing the page edges */

.vine {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 60px;
  pointer-events: none;
  z-index: 5;
}
.vine-left { left: 0; }
.vine-right { right: 0; }
.vine svg { width: 100%; height: 100%; display: block; }

.vine-path {
  fill: none;
  stroke: var(--sprout-dark);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: vineGrow 2.8s ease-out forwards;
}

.vine-leaves path {
  fill: var(--sprout);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: leafPop .5s ease-out forwards;
}
.vine-leaves path:nth-child(1) { animation-delay: .5s; }
.vine-leaves path:nth-child(2) { animation-delay: 1s; }
.vine-leaves path:nth-child(3) { animation-delay: 1.5s; }
.vine-leaves path:nth-child(4) { animation-delay: 2s; }
.vine-leaves path:nth-child(5) { animation-delay: 2.5s; }

@keyframes vineGrow { to { stroke-dashoffset: 0; } }
@keyframes leafPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

/* Keep vines from crowding content on narrow screens */
@media (max-width: 720px) {
  .vine { width: 30px; opacity: .7; }
}

.plants-page .site-header,
.plants-page main,
.plants-page .site-footer {
  position: relative;
  z-index: 10;
}

.shop-hero .hero-sub { max-width: 60ch; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .vine-path { stroke-dashoffset: 0; animation: none; }
  .vine-leaves path { opacity: 1; animation: none; }
}