/* ============================================================
   Vines — SVG-Reben-Animation als Hintergrund-Layer
   Konsumenten: Heroes-CTA (heute), spaeter potenziell weitere
                dunkle Sections mit dekorativen Vines-Hintergruenden.

   Markup-Erwartung:
   <section class="... " data-vines>
     ... Content ...
     <svg class="vines-layer" ...>
       <path class="vine-stem" style="--stem-delay: 0s; --stem-opacity: 0.7" />
       <path class="vine-leaf" style="--leaf-delay: 0.4s; --leaf-opacity: 0.85" />
     </svg>
   </section>

   Das `data-vines` Attribut wird per JS (vines.js) beobachtet — sobald
   die Section in den Viewport kommt, bekommt sie die Klasse `is-in-view`.

   CSS-Variablen pro Element:
   --stem-delay   /  --stem-opacity   (Stem)
   --leaf-delay   /  --leaf-opacity   (Leaf / Trauben)
   ============================================================ */

.vines-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

/* ----- Stem (Hauptmotiv-Aeste) — Fade-In ----- */

.vine-stem {
  opacity: 0;
  transition: opacity 2.6s cubic-bezier(0.22, 1, 0.36, 1) var(--stem-delay, 0s);
}

[data-vines].is-in-view .vine-stem {
  opacity: var(--stem-opacity, 0.7);
}

/* ----- Leaf / Trauben — Scale-In mit Stagger ----- */

.vine-leaf {
  transform-origin: 0 0;
  transform: scale(0);
  opacity: 0;
  transition: transform 2.2s cubic-bezier(0.16, 1, 0.3, 1) var(--leaf-delay, 0s),
              opacity 1.8s cubic-bezier(0.22, 1, 0.36, 1) var(--leaf-delay, 0s);
}

[data-vines].is-in-view .vine-leaf {
  transform: scale(1);
  opacity: var(--leaf-opacity, 0.9);
}

/* ----- Responsive Opacity ----- */

@media (max-width: 1080px) {
  .vines-layer { opacity: 0.7; }
}

@media (max-width: 720px) {
  .vines-layer { opacity: 0.5; }
}

/* ----- Reduced Motion ----- */

@media (prefers-reduced-motion: reduce) {
  .vine-stem,
  .vine-leaf {
    opacity: var(--leaf-opacity, var(--stem-opacity, 0.7)) !important;
    transform: scale(1) !important;
    transition: none !important;
  }
}