/* Facebook Icon Animation */
/* Base state - element visible by default to match initial="normal" */
[data-name="FacebookAnimate"] path {
opacity: 1;
stroke-dasharray: 100;
stroke-dashoffset: 0;
}
/* Facebook logo drawing animation - precise path targeting */
[data-name="FacebookAnimate"]:hover path[d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"] {
animation: facebookDraw 0.6s linear;
}
@keyframes facebookDraw {
0% {
opacity: 0;
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
16.7% {
opacity: 1;
}
100% {
opacity: 1;
stroke-dasharray: 100;
stroke-dashoffset: 0;
}
}