/* SVG Sketch Animation */
.milestone-icon svg path,
.milestone-icon svg circle,
.milestone-icon svg line,
.milestone-icon svg polyline,
.milestone-icon svg polygon {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: draftDraw 4s ease-in-out forwards;
}

#radici.story-expanded .milestone-icon svg path,
#radici.story-expanded .milestone-icon svg circle,
#radici.story-expanded .milestone-icon svg line {
    animation-delay: 0.5s;
}

@keyframes draftDraw {
    0% {
        stroke-dashoffset: 500;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.milestone-icon svg text {
    opacity: 0;
    animation: fadeInText 1s ease-in forwards 3s;
}

@keyframes fadeInText {
    to {
        opacity: 1;
    }
}

.polo-sketch-svg {
    width: 155px;
    /* Shrunk further to avoid scroll */
    height: auto;
    filter: drop-shadow(4px 4px 0px rgba(0, 0, 0, 0.15));
}

.polo-sketch-svg path {
    fill: none;
    stroke: var(--ema-orange);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    opacity: 0;
    transition: opacity 0.1s;
}

/* Comic Draw Animation Triggered by Class */
.vision-animation-container.animating .polo-sketch-svg path {
    opacity: 1;
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    animation: comicDraw 3.5s linear forwards;
    /* Speed up slightly to 3.5s */
}

@keyframes comicDraw {
    from {
        stroke-dashoffset: var(--path-length, 2000);
    }

    to {
        stroke-dashoffset: 0;
    }
}

/* Stylized Pencil - Path Following Artist Effect (Inside SVG) */
.pencil-element {
    pointer-events: none;
    opacity: 0;
    z-index: 10;
}

.pencil-element path {
    fill: #ffffff !important;
    stroke: none;
}

.vision-animation-container.animating .pencil-element {
    animation: pencilFollow 3.5s linear forwards;
    offset-path: path("M22 110 L22 35 C10 45 5 60 15 70 L22 35 C40 25 60 25 78 35 C90 45 95 60 85 70 L78 35 L78 110 L22 110 L50 110 L50 45 L35 35 C40 45 60 45 65 35");
    offset-rotate: auto;
}

@keyframes pencilFollow {
    0% {
        opacity: 1;
        offset-distance: 0%;
    }

    98% {
        opacity: 1;
        offset-distance: 100%;
    }

    100% {
        opacity: 0;
        offset-distance: 100%;
    }
}

/* Pop Effect at the end */
.vision-animation-container.animating .polo-sketch-svg {
    animation: comicPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    animation-delay: 3.3s;
}

@keyframes comicPop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1) rotate(2deg);
    }

    100% {
        transform: scale(1.05) rotate(0deg);
    }
}

/* Logo Reveal */
.ema-logo-reveal {
    opacity: 0;
    transform: scale(0.7) rotate(-15deg);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vision-animation-container.animating .ema-logo-reveal {
    opacity: 1;
    transform: scale(0.7) rotate(0deg);
    /* Scled down logo */
    transition-delay: 3.6s;
}

/* Blend masking for sketch-to-real transition image */
.sketch-fade-mask {
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(circle at bottom left, transparent 0%, black 25%);
    mask-image: radial-gradient(circle at bottom left, transparent 0%, black 25%);
    border-radius: 1rem 1rem 1rem 0;
}

@keyframes certScroll {

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

    12.5%,
    22.5% {
        transform: translateY(-11.11%);
    }

    25%,
    35% {
        transform: translateY(-22.22%);
    }

    37.5%,
    47.5% {
        transform: translateY(-33.33%);
    }

    50%,
    60% {
        transform: translateY(-44.44%);
    }

    62.5%,
    72.5% {
        transform: translateY(-55.55%);
    }

    75%,
    85% {
        transform: translateY(-66.66%);
    }

    87.5%,
    97.5% {
        transform: translateY(-77.77%);
    }

    100% {
        transform: translateY(-88.88%);
    }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}