/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Jun 17 2025 | 22:52:38 */
.jims-trees-button-animation {
    position: relative;
    overflow: hidden;
}

.jims-trees-button-animation a {
	position: relative;
	z-index: 2;
	/*color: #111 !important;*/
}
/* Chainsaw sliding in from left 
.jims-trees-button-animation::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -30px;
    width: 30px;
    height: 30px;
    background-image: url('https://staging.jimstrees.com.au/wp-content/uploads/2025/06/icons8-handsaw-100-1.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%) translateY(-5px);
    opacity: 1;
    transition: all 0.4s;
	z-index: 1;
}

.jims-trees-button-animation:hover::before {
    left: calc(100% - 2px);
    opacity: 1;
    animation: chainsawSlideAndRotate .8s forwards;
}
*/

/* Horizontal jagged cut line that follows the chainsaw */
.jims-trees-button-animation::after {
    content: '';
    position: absolute;
	z-index: 0;
    top: 50%;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(to right, 
        transparent 0%, 
        rgba(255,255,255,0.3) 10%, 
        rgba(255,255,255,0.7) 20%, 
        rgba(255,255,255,0.3) 30%, 
        rgba(255,255,255,0.7) 40%, 
        rgba(255,255,255,0.3) 50%, 
        rgba(255,255,255,0.7) 60%, 
        rgba(255,255,255,0.3) 70%, 
        rgba(255,255,255,0.7) 80%, 
        rgba(255,255,255,0.3) 90%, 
        transparent 100%
    );
    transform: translateY(-50%) skewX(2deg);
    opacity: 0;
    transition: all .45s 
}

.jims-trees-button-animation:hover::after {
    width: 100%;
    opacity: 1;
}

/* Chainsaw slide and rotate animation */
@keyframes chainsawSlideAndRotate {
    0% {
        left: -35px;
        transform: translateY(-50%) translateY(-5px) rotate(0deg);
    }
    80% {
        left: calc(100% - 28px);
        transform: translateY(-50%) translateY(-5px) rotate(0deg);
    }
    100% {
        left: calc(100% - 28px);
        transform: translateY(-50%) translateY(0) rotate(90deg);
    }
}