/* 
 * WICKET MENU ICON CSS
 * You can adjust the .wicket-menu-icon size using width/height.
 */
.wicket-menu-icon {
    width: 48px;
    /* Standard menu icon size */
    height: 48px;
    cursor: pointer;
    overflow: visible;
    background: transparent;
    /* Or whatever background you need */
}
/* Stumps */
.wicket-menu-icon .stump {
    fill: #ffffff;
    /* White */
    stroke: #000000;
    stroke-width: 2;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Bails (Gulli) */
.wicket-menu-icon .bail {
    fill: #ff9800;
    /* Orange */
    stroke: #000000;
    stroke-width: 2;
    transform-origin: center;
    transition: all 0.5s ease-out;
    opacity: 1;
}
/* --- Animation States (Menu Open) --- */
/* Stumps spread out */
.wicket-menu-icon.open .stump-left {
    transform: rotate(-25deg) translateX(-10px);
}
.wicket-menu-icon.open .stump-middle {
    transform: rotate(5deg) translateY(5px);
}
.wicket-menu-icon.open .stump-right {
    transform: rotate(30deg) translateX(10px);
}
/* Bails fly off */
.wicket-menu-icon.open .bail-left {
    animation: flyOffLeft 0.6s forwards ease-out;
}
.wicket-menu-icon.open .bail-right {
    animation: flyOffRight 0.6s forwards ease-out;
}
/* Keyframes for flying bails */
@keyframes flyOffLeft {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }
    50% {
        transform: translate(-20px, -40px) rotate(-180deg);
        opacity: 1;
    }
    100% {
        transform: translate(-40px, -20px) rotate(-360deg);
        opacity: 0;
    }
}
@keyframes flyOffRight {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }
    50% {
        transform: translate(20px, -50px) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: translate(50px, -10px) rotate(360deg);
        opacity: 0;
    }
}