/* Scroll-Pflanze — eine zarte Ranke, die links beim Herunterscrollen mitwächst.
   Rein CSS: das Wachstum ist an den Scroll-Fortschritt gekoppelt — primär über die native
   scroll()-Timeline (wie .progress/.slogan in heimseiten.css), als Fallback über die
   --scroll-Variable (theme.js) per „pausierte Animation + negatives delay".
   Umgesetzt als Selbstzeichnen per stroke-dashoffset: die Wachstumsfront ist immer das
   Stängelende → eine natürliche, runde Triebspitze (kein harter Schnitt). Die Ranke endet
   in einer organischen Knospe. WICHTIG: der Pfad trägt fill="none" (sonst füllt die globale
   SVG-Fill-Regel die eingeschlossenen Flächen grau). Pfadlänge = 1089 (per getTotalLength). */

.plant-scroll {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 46px;                /* schmal, umarmt den linken Rand */
    z-index: 10;                /* ÜBER dem Sticky-Header (z-index 9); pointer-events:none → stört nicht */
    pointer-events: none;       /* rein dekorativ, blockiert keine Klicks */
    overflow: visible;
    opacity: .6;                /* klar grün, aber noch zurückhaltend */
}

.plant-scroll path {
    /* Start (und Fallback ohne --scroll): komplett „ungezeichnet" = unsichtbar
       (stroke-dasharray = Pfadlänge + große Lücke steht als Attribut am Pfad). */
    stroke-dashoffset: 1089;
    animation: plant-grow 1s linear;
    animation-play-state: paused;                     /* nicht abspielen, nur „scrubben" … */
    animation-delay: calc(var(--scroll, 0) * -1s);    /* … per Scroll-Fortschritt (Fallback) */
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

@keyframes plant-grow {
    to { stroke-dashoffset: 0; }   /* voll gezeichnet bei Scroll-Ende (Triebspitze unten) */
}

/* Primärer Mechanismus in modernen Browsern: native scroll()-Timeline treibt das Wachstum
   direkt (identisch zu .progress/.slogan). Kein JS, kein --scroll nötig. */
@supports (animation-timeline: scroll()) {
    .plant-scroll path {
        animation-duration: auto;
        animation-delay: 0s;
        animation-play-state: running;
        animation-timeline: scroll();
    }
}

/* Die grüne Fortschritts-Statusbar oben NUR dort ausblenden, wo die Ranke sie ersetzt
   (breite Viewports > 1360px). Wo die Ranke ausgeblendet ist (≤ 1360px), bleibt die
   Statusbar als Scroll-Anzeige sichtbar. */
@media (min-width: 1361px) {
    .progress { display: none; }
}

/* Ranke nur auf breiten Viewports, wo links wirklich freier Rand ist */
@media (max-width: 1360px) {
    .plant-scroll { display: none; }
}

/* Bewegungsreduktion: keine Scroll-Kopplung, Ranke einfach ruhig ganz gezeichnet */
@media (prefers-reduced-motion: reduce) {
    .plant-scroll path { animation: none !important; stroke-dashoffset: 0; }
}