@include rule-animation('.pkm-rule1', rgba(43, 26, 8, 0), #d98026);
@include rule-animation('.pkm-rule2', rgba(43, 8, 8, 0), #d92626);
@include rule-animation('.pkm-rule3', rgba(43, 43, 8, 0), #d9d926);
@include rule-animation('.pkm-rule4', rgba(8, 43, 8, 0), #26d926);
@include rule-animation('.pkm-rule5', rgba(8, 8, 43, 0), #26d9d9);
@include rule-animation('.pkm-rule6', rgba(8, 43, 26, 0), #26d980);
@include rule-animation('.pkm-rule7', rgba(43, 8, 26, 0), #d92680);

// Zoom In-out
@include animatedBy('.phkay-zoom-in-out') {
    0% {
        transform: scale(1);
        filter   : none;
    }

    50% {
        transform: scale(1.1);
        filter   : drop-shadow(10px 3px 10px $warning) invert(10%);
    }

    100% {
        transform: scale(1);
        filter   : none;
    }
}

// anition rotateX
@include animatedBy('.phkay-rotate-x') {
    0% {
        transform: translateX(-15px) rotate(0);
    }

    50% {
        transform: translateX(0) rotate(-1deg);
    }

    to {
        transform: translateX(-15px) rotate(0);
    }
}

// animation rotateY
@include animatedBy('.phkay-rotate-y') {
    0% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-10px) rotate(-1deg);
    }

    to {
        transform: translateY(0) rotate(0);
    }
}

// filter
@include animatedBy('.phkay-filter') {
    0% {
        filter: drop-shadow(0px 0px 0px $warning);
    }

    50% {
        filter: drop-shadow(0px 0px 10px $warning);
    }

    to {
        filter: drop-shadow(0px 0px 0px $warning);
    }
}

// animation filter (shadow) && RotateX
@include animatedBy('.phkay-rotate-x-filter') {
    0% {
        transform: translateX(0) rotate(0);
        filter   : drop-shadow(0px 0px 0px $warning);
    }

    50% {
        transform: translateX(-30px) rotate(-1deg);
        filter   : drop-shadow(0px 0px 10px $warning);
    }

    to {
        transform: translateX(0) rotate(0);
        filter   : drop-shadow(0px 0px 0px $warning);
    }
}

// animation filter (shadow) && rotateY
@include animatedBy('.phkay-rotate-y-filter') {
    0% {
        filter   : drop-shadow(0px 0px 0px $warning);
        transform: translateY(0) rotate(0);
    }

    50% {
        filter   : drop-shadow(0px 0px 10px $warning);
        transform: translateY(-30px) rotate(-1deg);
    }

    to {
        filter   : drop-shadow(0px 0px 0px $warning);
        transform: translateY(0) rotate(0);
    }
}


.shadow-load {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}