/* ============================================================
   VÕIDU TALU — GRAPEVINE SYSTEM
   Hand-built SVG vines: botanical leaves, ripening grape
   clusters & curling tendrils woven through the backgrounds.
   Ties the current flowers to the wine that is "tulekul".
   ============================================================ */

/* hidden symbol/gradient library takes no space */
.vine-defs{ position:absolute; width:0; height:0; overflow:hidden; }

/* sections that host vines become isolated positioning contexts,
   so a z-index:-1 vine paints above the section's own light background
   but behind its content — independent of the section's inner classes */
.hero, .products, .upcoming, .story, .contact, .footer{
  position:relative;
  isolation:isolate;
}

/* ---- base vine container ---- */
.vine{
  position:absolute;
  overflow:visible;
  pointer-events:none;
  z-index:-1;                /* behind section content, above section bg */
  --vine:#5f7138;            /* woody-green stem (all sections are light) */
}

/* ---- element fills (inherited into <use> shadow trees) ---- */
.vine use.leaf{ fill:url(#leafFill); }
.vine use.cluster{ fill:url(#grapeFill); }
.vine use.cluster.green{ fill:url(#grapeGreen); }
.vine use.tendril{ fill:none; stroke:var(--vine); }
.vine .vine-stem{
  fill:none; stroke:var(--vine);
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
}

/* ============================================================
   GROWING ANIMATIONS
   Pre-animation (resting) state — hidden until scrolled in.
   ============================================================ */
.vine .vine-stem{ stroke-dasharray:1; stroke-dashoffset:1; }   /* pathLength="1" */
.vine .sprout{
  opacity:0;
  transform:scale(.01);
  transform-box:fill-box;
}
.vine use.leaf.sprout{   transform-origin:50% 100%; } /* grows up from its base   */
.vine use.cluster.sprout{ transform-origin:50% 0%;  } /* grows down (hangs)       */
.vine use.tendril.sprout{ transform-origin:8% 8%;   } /* unfurls from the stem    */
.vine use.cluster.ripen{ opacity:1; }                 /* green skin, fades to ripe */

/* When the vine scrolls into view → grow */
.vine.in .vine-stem{
  animation: gv-draw 1.7s cubic-bezier(.22,.61,.36,1) forwards;
}
.vine.in .sprout{
  animation: gv-sprout .85s cubic-bezier(.34,1.4,.5,1) forwards;
  animation-delay: var(--d, .2s);
}
/* the green skin first sprouts WITH the bunch, then ripens away to purple */
.vine.in use.cluster.ripen{
  animation:
    gv-sprout .85s cubic-bezier(.34,1.4,.5,1) var(--d, .2s) forwards,
    gv-ripen 3.4s ease-in calc(var(--d, .2s) + 1.1s) forwards;
}

/* gentle perpetual sway brings the whole vine to life */
.vine-sway{
  transform-box:fill-box;
  transform-origin:top center;
  animation: gv-sway 9s ease-in-out infinite;
}
.vine--story .vine-sway{ animation-duration:7s; }
.vine--footer .vine-sway{ transform-origin:center top; animation-duration:11s; }

@keyframes gv-draw{ to{ stroke-dashoffset:0; } }
@keyframes gv-sprout{
  0%{ opacity:0; transform:scale(.01); }
  70%{ opacity:1; }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes gv-ripen{
  0%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes gv-sway{
  0%,100%{ transform:rotate(-1.5deg); }
  50%{ transform:rotate(1.6deg); }
}

/* ============================================================
   PLACEMENTS
   ============================================================ */

/* — Hero: slim climbing vines in the left AND right gutters (beside content, not over it) — */
.vine--hero,
.vine--hero-r{
  top:40px;
  width:clamp(96px, 9vw, 124px); height:auto;
  z-index:-1;
}
.vine--hero{   left:calc(50% - 50vw + 8px); }
.vine--hero-r{ right:calc(50% - 50vw + 8px); transform:scaleX(-1); }

/* — Products: sprig in the corner — */
.vine--products{
  right:-26px; top:30px;
  width:min(34%, 230px); height:auto;
}

/* — Tulekul (wine teaser): rich vines framing both top corners — */
.vine--wine-l{ left:-26px; top:-12px; width:min(44%, 380px); height:auto; }
.vine--wine-r{ right:-26px; top:-18px; width:min(40%, 350px); height:auto; }

/* — Story: trailing vine in the corner — */
.vine--story{
  top:-22px; left:-14px;
  width:min(42%, 230px); height:auto;
}

/* — Contact: corner vine top-right — */
.vine--contact{
  top:-16px; right:-10px;
  width:min(40%, 320px); height:auto;
}

/* — Gallery: corner vine top-right, beside the heading — */
.vine--gallery{
  top:8px; right:2px;
  width:min(32%, 300px); height:auto;
}

/* — Footer: full-width hanging garland across the top — */
.vine--footer{
  top:-2px; left:0;
  width:100%; height:100px;
}
/* clear headroom for the hanging garland */
.footer{ padding-top:6.5rem; }

/* Content sits above the z-index:-1 vines automatically (sections isolate). */

/* ============================================================
   RESPONSIVE — thin the vines out on smaller screens
   ============================================================ */
/* the slim hero gutter-vines need real margin space → only on wide screens */
@media (max-width: 1400px){
  .vine--hero,
  .vine--hero-r{ display:none; }
}
@media (max-width: 1100px){
  .vine--products{ display:none; }
}
@media (max-width: 980px){
  .vine--wine-l{ width:46%; }
  .vine--wine-r{ display:none; }
}
@media (max-width: 760px){
  .vine--gallery{ display:none; }
}
@media (max-width: 640px){
  .vine--story{ width:46%; }
  .vine--contact{ width:52%; }
  .vine--footer{ height:96px; }
}

/* ============================================================
   ACCESSIBILITY — no motion → show fully grown, ripe vines
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .vine .vine-stem{ stroke-dashoffset:0; animation:none; }
  .vine .sprout{ opacity:1; transform:none; animation:none; }
  .vine use.cluster.ripen{ opacity:0; animation:none; }
  .vine-sway{ animation:none; }
}