/* css/hero-illustration.css */
.hero-illustration-container {
    position: relative;
    width: 100%;
    max-width: 500px;
}

.hero-svg {
    width: 100%;
    height: auto;
}

.svg-path {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svg-accent {
    fill: var(--color-accent-tint);
    stroke: var(--color-accent);
}

/* Drawing animation for SVG */
@keyframes drawStroke {
    to {
        stroke-dashoffset: 0;
    }
}

.draw-animate {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawStroke 2.5s ease-out forwards;
}

/* Floating animation */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

.float-animate {
    animation: float 6s ease-in-out infinite;
}

/* Lerp follows mouse will be in JS, this is base state */
.hero-lerp-target {
    transition: transform 0.1s linear;
}