/* Success tick: scale + draw. */
.success-tick {
    width: 48px;
    height: 48px;
    stroke: var(--primary-color);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: scale(.9);
    opacity: 0;
    animation: tick-pop .15s ease-out forwards .05s;
}

.tick-circle {
    stroke: rgba(0,0,0,0.12);
    stroke-width: 3;
}

.tick-path {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: tick-draw .4s ease forwards .1s;
}


@keyframes tick-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes tick-pop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}







.error-x {
    width: 48px;
    height: 48px;
    stroke: var(--danger-color, #e53935);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: scale(.9);
    opacity: 0;
    animation: x-pop .15s ease-out forwards .05s;
}

.x-circle {
    stroke: rgba(0,0,0,0.12);
    stroke-width: 3;
}

/* Path math is normalized by pathLength=100 */
.x-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.x-path-a {
    animation: x-draw .28s ease forwards .10s;
}
/* first line */
.x-path-b {
    animation: x-draw .28s ease forwards .42s;
}
/* starts after A finishes */

@keyframes x-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes x-pop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-x, .x-path {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        stroke-dashoffset: 0 !important;
    }
}