.plant-animation-component {
    margin-top: 0.5em;
    /* --- Configurable Size Variable --- */
    --emoji-base-size: 2rem; /* ADJUST THIS VALUE TO SCALE THE ANIMATION */

    /* --- Calculated Dimensions (Based on base size & animation needs) --- */
    /* Width approx 4.5x base size (for spread + emoji width) */
    --component-width: calc(var(--emoji-base-size) * 4);
    /* Height approx 4.2x base size (for drop + emoji height) */
    --component-height: calc(var(--emoji-base-size) *1.4);

    /* --- Component Container Styling & Layout --- */
    height: var(--component-height);
    display: flex;         /* Still useful if inner container differs slightly */
    justify-content: center;

    /* --- Timing and Curve Definitions (Scoped to component) --- */
    --total-duration: 2.5s;
    --grow-phase-percent: 0.75;
    --grow-duration: calc(var(--total-duration) * var(--grow-phase-percent));
    --spread-duration: calc(var(--total-duration) * (1 - var(--grow-phase-percent)));
    --grow-curve: ease-in-out;
    --spread-curve: cubic-bezier(0.68, -0.4, 0.27, 1.25);
}
.plant-animation-component .animation-container {
    /* Match the outer component size for tight fit */
    width: 100%; /* Inherit calculated width */
    height: 100%; /* Inherit calculated height */
    position: relative;
    /* border: 1px solid red; */
}

.plant-animation-component .stage {
    position: absolute;
    /* Position stages at the bottom of the container */
    top: calc(var(--emoji-base-size) * 0.2);
    left: 50%;
    transform: translateX(-50%);
    /* Emoji size controlled by variable */
    font-size: var(--emoji-base-size);
    /* Use line-height 1 for more predictable vertical size */
    line-height: 1;
    opacity: 0;
    transform-origin: center bottom;
    scale: 1;
}

/* --- Keyframes Definitions (Using 'em' units relative to --emoji-base-size) --- */

/* == Seed == */
@keyframes seed-grow {
    /* Start position scales with font size */
    0%    { transform: translate(-50%, -3.125em) scale(0); opacity: 0; } /* Approx -200px @ 4rem */
    15%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    25%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    35%   { transform: translate(-50%, 0) scale(0); opacity: 0; }
    35.1%, 100% { transform: translateX(-50%) scale(0); opacity: 0; }
}
@keyframes seed-spread {
    0%    { transform: translateX(-50%) scale(1); opacity: 0; }
    /* Final position scales with font size */
    100%  { transform: translateX(-2.6em) scale(1); opacity: 1; } /* Approx -105px @ 4rem */
}

/* == Seedling == */
@keyframes seedling-grow {
     /* Start position scales with font size */
    0%, 23.8% { transform: translate(-50%, 0.3125em) scale(0); opacity: 0; } /* Approx 20px */
    35%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    55%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    65%   { transform: translate(-50%, 0) scale(1); opacity: 0; }
    65.1%, 100% { transform: translateX(-50%) scale(1); opacity: 0; }
}
@keyframes seedling-spread {
    0%    { transform: translateX(-50%) scale(1); opacity: 0; }
    /* Final position scales with font size */
    100%  { transform: translateX(-1.3em) scale(1); opacity: 1; } /* Approx -35px @ 4rem */
}

/* == Fern == */
@keyframes fern-grow {
    0%, 53.8% { opacity: 0; transform: translate(-50%, 0) scale(1); }
    65%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    85%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    95%   { opacity: 0; transform: translate(-50%, 0) scale(1); }
    95.1%, 100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}
@keyframes fern-spread {
    0%    { transform: translateX(-50%) scale(1); opacity: 0; }
    /* Final position scales with font size */
    100%  { transform: translateX(0em) scale(1); opacity: 1; } /* Approx 35px @ 4rem */
}

/* == Tree == */
@keyframes tree-grow {
    0%, 83.8% { opacity: 0; transform: translate(-50%, 0) scale(1); }
    95%   { opacity: 1; transform: translate(-50%, 0) scale(1); }
    100%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@keyframes tree-spread {
    0%    { transform: translateX(-50%) scale(1); opacity: 1; }
    /* Final position scales with font size */
    100%  { transform: translateX(1.3em) scale(1); opacity: 1; } /* Approx 105px @ 4rem */
}

/* --- Applying Split Animations (Unchanged) --- */

.plant-animation-component #seed {
    animation:
        seed-grow var(--grow-duration) var(--grow-curve) forwards,
        seed-spread var(--spread-duration) var(--spread-curve) var(--grow-duration) forwards;
}

.plant-animation-component #seedling {
     animation:
        seedling-grow var(--grow-duration) var(--grow-curve) forwards,
        seedling-spread var(--spread-duration) var(--spread-curve) var(--grow-duration) forwards;
}

.plant-animation-component #fern {
     animation:
        fern-grow var(--grow-duration) var(--grow-curve) forwards,
        fern-spread var(--spread-duration) var(--spread-curve) var(--grow-duration) forwards;
}

.plant-animation-component #tree {
     animation:
        tree-grow var(--grow-duration) var(--grow-curve) forwards,
        tree-spread var(--spread-duration) var(--spread-curve) var(--grow-duration) forwards;
}