@keyframes zkf-drawing-vibrate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-shake {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    33% {
        opacity: 0.4;
        transform: rotate(10deg) scale(1.2);
    }

    66% {
        opacity: 0.4;
        transform: rotate(-10deg)scale(1.2);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-40px);
    }

    60% {
        transform: translateY(-20px);
    }
}

@keyframes zkf-drawing-rotate {
    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes zkf-drawing-vertical-flip {
    to {
        /* ios 360deg or 1 turn is not working well */
        transform: rotateY(-360deg);
    }
}

@keyframes zkf-drawing-blinking {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.3);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-inflate {
    from {
        opacity: 1.0;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(2.2);
    }

    100% {
        opacity: 1.0;
        transform: scale(1);
    }
}

@keyframes zkf-drawing-glowing-outline {
    from {}

    50% {
        filter: drop-shadow(22px 22px 20px rgba(255, 255, 255, 0.95)) drop-shadow(-22px -22px 20px rgba(255, 255, 255, 0.95));
    }

    100% {}
}

@keyframes zkf-fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes zkf-fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes zkf-scroll-in-left {
    0% {
        transform: translate(100%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-right {
    0% {
        transform: translate(-100%, 0);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-up {
    0% {
        transform: translate(0, 100%);
    }

    100% {
        transform: translate(0%, 0);
    }
}

@keyframes zkf-scroll-in-down {
    0% {
        transform: translate(0, -100%);
    }

    100% {
        transform: translate(0%, 0);
    }
}

/* =========================================================
   1. Traveling Spark
   ========================================================= */

.zkf-traveling-spark {
    position: relative;
    overflow: hidden;
}

.zkf-traveling-spark::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-radius: inherit;

    background:
        linear-gradient(90deg, transparent, var(--colr-ztn), transparent) 0 0 / 25% 2px no-repeat,
        linear-gradient(180deg, transparent, var(--colr-ztn), transparent) 100% 0 / 2px 25% no-repeat,
        linear-gradient(270deg, transparent, var(--colr-ztn), transparent) 100% 100% / 25% 2px no-repeat,
        linear-gradient(0deg, transparent, var(--colr-ztn), transparent) 0 100% / 2px 25% no-repeat;

    animation: zkf-traveling-spark 3s linear infinite;
    pointer-events: none;
}

@keyframes zkf-traveling-spark {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    78% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================================
   2. Breathing Glow
   ========================================================= */

.zkf-breathing-glow {
    position: relative;
    border: 2px solid var(--colr-ztn);
    animation: zkf-breathing-glow 3s ease-in-out infinite;
}

@keyframes zkf-breathing-glow {

    0%,
    100% {
        box-shadow:
            0 0 2px var(--colr-ztn),
            0 0 4px transparent;
        opacity: 0.65;
    }

    50% {
        box-shadow:
            0 0 5px var(--colr-ztn),
            0 0 18px var(--colr-ztn);
        opacity: 1;
    }
}


/* =========================================================
   3. Flowing Light
   ========================================================= */

.zkf-flowing-light {
    position: relative;
    overflow: hidden;
}

.zkf-flowing-light::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: inherit;

    background:
        linear-gradient(90deg,
            transparent 0%,
            transparent 35%,
            var(--colr-ztn) 50%,
            transparent 65%,
            transparent 100%) top / 100% 2px no-repeat,

        linear-gradient(180deg,
            transparent 0%,
            transparent 35%,
            var(--colr-ztn) 50%,
            transparent 65%,
            transparent 100%) right / 2px 100% no-repeat,

        linear-gradient(270deg,
            transparent 0%,
            transparent 35%,
            var(--colr-ztn) 50%,
            transparent 65%,
            transparent 100%) bottom / 100% 2px no-repeat,

        linear-gradient(0deg,
            transparent 0%,
            transparent 35%,
            var(--colr-ztn) 50%,
            transparent 65%,
            transparent 100%) left / 2px 100% no-repeat;

    animation: zkf-flowing-light 2.5s linear infinite;
    pointer-events: none;
}

@keyframes zkf-flowing-light {
    0% {
        background-position:
            -100% 0,
            100% -100%,
            200% 100%,
            0 200%;
    }

    100% {
        background-position:
            200% 0,
            100% 200%,
            -100% 100%,
            0 -100%;
    }
}


/* =========================================================
   4. Chase
   ========================================================= */

.zkf-chase {
    position: relative;
    border: 2px solid transparent;
    overflow: hidden;
}

.zkf-chase::before {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--colr-ztn);
    border-radius: inherit;

    mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    animation: zkf-chase 1.8s linear infinite;
    box-shadow:
        0 0 6px var(--colr-ztn),
        0 0 12px var(--colr-ztn);

    pointer-events: none;
}

@keyframes zkf-chase {
    0% {
        clip-path: inset(0 90% 90% 0);
    }

    25% {
        clip-path: inset(0 0 90% 0);
    }

    50% {
        clip-path: inset(0 0 0 90%);
    }

    75% {
        clip-path: inset(90% 0 0 0);
    }

    100% {
        clip-path: inset(0 90% 90% 0);
    }
}


/* =========================================================
   5. Corner Pulse
   ========================================================= */

.zkf-corner-pulse {
    position: relative;
}

.zkf-corner-pulse::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 3px solid var(--colr-ztn);
    border-radius: inherit;

    animation: zkf-corner-pulse 2.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zkf-corner-pulse {

    0%,
    100% {
        clip-path: polygon(0 0, 18% 0, 18% 3px, 3px 3px,
                3px 18%, 0 18%);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    25% {
        clip-path: polygon(82% 0, 100% 0, 100% 18%,
                calc(100% - 3px) 18%,
                calc(100% - 3px) 3px, 82% 3px);
        opacity: 1;
    }

    50% {
        clip-path: polygon(82% calc(100% - 3px),
                calc(100% - 3px) calc(100% - 3px),
                calc(100% - 3px) calc(100% - 18%),
                100% calc(100% - 18%),
                100% 100%, 82% 100%);
        opacity: 1;
    }

    75% {
        clip-path: polygon(0 82%, 3px 82%, 3px calc(100% - 3px),
                18% calc(100% - 3px),
                18% 100%, 0 100%);
        opacity: 1;
    }

    88% {
        opacity: 0;
    }
}


/* =========================================================
   6. Four-Side Sweep
   ========================================================= */

.zkf-four-side-sweep {
    position: relative;
    overflow: hidden;
}

.zkf-four-side-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--colr-ztn);
    border-radius: inherit;

    box-shadow:
        0 0 8px var(--colr-ztn),
        inset 0 0 8px var(--colr-ztn);

    animation: zkf-four-side-sweep 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zkf-four-side-sweep {

    0%,
    10% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    20% {
        clip-path: inset(0 0 97% 0);
        opacity: 1;
    }

    35% {
        clip-path: inset(0 0 0 97%);
    }

    50% {
        clip-path: inset(97% 0 0 0);
    }

    65% {
        clip-path: inset(0 97% 0 0);
    }

    78% {
        opacity: 1;
    }

    88%,
    100% {
        opacity: 0;
    }
}


/* =========================================================
   7. Edge Shimmer
   ========================================================= */

.zkf-edge-shimmer {
    position: relative;
    border: 2px solid var(--colr-ztn);
    overflow: hidden;
}

.zkf-edge-shimmer::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(110deg,
            transparent 0%,
            transparent 42%,
            var(--colr-ztn) 50%,
            transparent 58%,
            transparent 100%);

    background-size: 250% 250%;

    animation: zkf-edge-shimmer 3.5s ease-in-out infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}

@keyframes zkf-edge-shimmer {

    0%,
    65% {
        background-position: 200% 200%;
        opacity: 0;
    }

    72% {
        opacity: 1;
    }

    85% {
        background-position: 0 0;
        opacity: 1;
    }

    90%,
    100% {
        background-position: -100% -100%;
        opacity: 0;
    }
}


/* =========================================================
   8. Pulse + Spark
   ========================================================= */

.zkf-pulse-spark {
    position: relative;
    border: 2px solid var(--colr-ztn);

    animation: zkf-pulse-spark-border 3.5s ease-in-out infinite;
}

.zkf-pulse-spark::after {
    content: "";
    position: absolute;
    inset: -3px;

    border: 3px solid transparent;
    border-top-color: var(--colr-ztn);
    border-radius: inherit;

    box-shadow:
        0 0 8px var(--colr-ztn),
        0 0 16px var(--colr-ztn);

    animation: zkf-pulse-spark 3.5s linear infinite;
    pointer-events: none;
}

@keyframes zkf-pulse-spark-border {

    0%,
    65%,
    100% {
        box-shadow: 0 0 2px transparent;
    }

    55% {
        box-shadow:
            0 0 6px var(--colr-ztn),
            0 0 20px var(--colr-ztn);
    }
}

@keyframes zkf-pulse-spark {

    0%,
    45% {
        transform: rotate(0deg);
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    75% {
        transform: rotate(360deg);
        opacity: 1;
    }

    85%,
    100% {
        transform: rotate(360deg);
        opacity: 0;
    }
}


/* =========================================================
   9. Directional Flow
   ========================================================= */

/* NEXT */
.zkf-directional-next {
    position: relative;
    border: 2px solid var(--colr-ztn);
    overflow: hidden;
}

.zkf-directional-next::after {
    content: "";
    position: absolute;
    inset: -2px;

    border: 3px solid transparent;
    border-right-color: var(--colr-ztn);
    border-top-color: var(--colr-ztn);
    border-radius: inherit;

    box-shadow:
        0 0 8px var(--colr-ztn);

    animation: zkf-directional-next 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zkf-directional-next {

    0%,
    70%,
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }

    15% {
        opacity: 1;
    }

    65% {
        opacity: 1;
        transform: rotate(360deg);
    }
}


/* PREVIOUS */
.zkf-directional-prev {
    position: relative;
    border: 2px solid var(--colr-ztn);
    overflow: hidden;
}

.zkf-directional-prev::after {
    content: "";
    position: absolute;
    inset: -2px;

    border: 3px solid transparent;
    border-left-color: var(--colr-ztn);
    border-bottom-color: var(--colr-ztn);
    border-radius: inherit;

    box-shadow:
        0 0 8px var(--colr-ztn);

    animation: zkf-directional-prev 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes zkf-directional-prev {

    0%,
    70%,
    100% {
        opacity: 0;
        transform: rotate(0deg);
    }

    15% {
        opacity: 1;
    }

    65% {
        opacity: 1;
        transform: rotate(-360deg);
    }
}


/* =========================================================
   10. Orbit
   ========================================================= */

.zkf-orbit {
    position: relative;
    border: 2px solid var(--colr-ztn);
}

.zkf-orbit::after {
    content: "";
    position: absolute;

    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: var(--colr-ztn);

    box-shadow:
        0 0 6px var(--colr-ztn),
        0 0 14px var(--colr-ztn);

    animation: zkf-orbit 3s linear infinite;
    pointer-events: none;
}

@keyframes zkf-orbit {
    0% {
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
    }

    25% {
        left: 100%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    50% {
        left: 100%;
        top: 100%;
        transform: translate(-50%, -50%);
    }

    75% {
        left: 0;
        top: 100%;
        transform: translate(-50%, -50%);
    }

    100% {
        left: 0;
        top: 0;
        transform: translate(-50%, -50%);
    }
}