:root {

    --animation-speed: 0.4s;
    --stroke-duration: var(--animation-speed);
    --fill-duration: calc(var(--animation-speed) * 1.5);
    --delay-between-paths: calc(var(--animation-speed) * 0.5);
    --stroke-fadeout-duration: var(--animation-speed);
    --delay-between-paths: calc(var(--animation-speed) * 0.2);
    --stroke-color: var(--header-color);
    --fill-color: var(--header-color);
    --stroke-color: hsl(150, 90%, 60%);
    --fill-color: hsl(200, 70%, 40%);
}

#logo {
    width: 100%;
    height: auto;
}

#logo svg {
    width: 100%;
    height: auto;
}

/* Initial state for paths - transparent fill, visible stroke */
.st0 {
    fill: transparent;
    stroke: var(--stroke-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Animation classes */
.animate-stroke {
    animation: drawStroke var(--stroke-duration) ease-in-out forwards;
}

.animate-fill {
    animation: fadeInFill var(--fill-duration) ease-in-out forwards;
}

.animate-stroke-fadeout {
    animation: fadeOutStroke var(--stroke-fadeout-duration) linear forwards;
}

@keyframes drawStroke {
    from {
        stroke-dashoffset: var(--path-length);
    }
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fadeInFill {
    from {
        fill: transparent;
    }
    to {
        fill: var(--fill-color);
        fill-opacity: 1;
    }
}

@keyframes fadeOutStroke {
    from {
        stroke-opacity: 1;
        fill: var(--fill-color);
        fill-opacity: 1;
    }
    to {
        stroke-opacity: 0;
        fill: var(--fill-color);
        fill-opacity: 1;
    }
}