/*------------------------------------*\
    SVG ANIMATIES
\*------------------------------------*/

/* --- 1. TRIAL: Pijl van links naar rechts --- */
/* Zoek in je SVG naar de pijl en geef deze class="anim-arrow" */
.anim-arrow {
    transition: transform 0.4s ease-out;
}

/* Bij hover over de container (bijv. de link of de box eromheen) */
*:hover > svg .anim-arrow,
*:hover > .anim-arrow {
    transform: translateX(10px); /* Schuift 10px naar rechts */
}


/* --- 2. GROWTH: Plantje groeit --- */
/* Zoek naar de bladeren/stengel en geef class="anim-plant" */
.anim-plant {
    transform-box: fill-box;       /* Zorgt dat transformatie kijkt naar het element zelf */
    transform-origin: bottom center; /* Groeien vanaf de bodem */
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Beetje 'bouncy' */
    /* Optioneel: begin iets kleiner */
    /* transform: scaleY(0.8); */
}

*:hover > svg .anim-plant,
*:hover > .anim-plant {
    transform: scaleY(1.2); /* Groeit 20% in hoogte */
}


/* --- 3. REPORTS: Staafjes omhoog --- */
/* Geef de staafjes classes: "anim-bar bar-1", "anim-bar bar-2", etc. */
.anim-bar {
    transform-box: fill-box;
    transform-origin: bottom;      /* Groeien vanaf de bodem */
    transition: transform 0.4s ease;
}

/* Zet ze standaard laag (bijvoorbeeld op 50%) */
.anim-bar { transform: scaleY(0.5); }

/* Bij hover: terug naar volle lengte (of zelfs iets groter) */
*:hover > svg .anim-bar { transform: scaleY(1); }

/* Stagger effect: ze bewegen na elkaar */
*:hover > svg .bar-1 { transition-delay: 0ms; }
*:hover > svg .bar-2 { transition-delay: 100ms; }
*:hover > svg .bar-3 { transition-delay: 200ms; }