/* ======================================================================
   EXTRA HEAVY ANIMATIONS — load alongside animate-heavy.css
   ======================================================================
   13 new, more extreme entrance animations that don't exist in the
   original animate.css library at all — built specifically to expand
   the variety pool for the random-animation-swap script. Same design
   language (--ease-heavy-smooth, --ease-heavy-back, --ease-in-out-heavy
   from animate-heavy.css), same "no attempt at subtlety" direction.
   ====================================================================== */

@keyframes flipInX {
    from {
        opacity: 0;
        transform: perspective(800px) rotate3d(1, 0, 0, 90deg)
    }

    40% {
        transform: perspective(800px) rotate3d(1, 0, 0, -18deg)
    }

    60% {
        opacity: 1;
        transform: perspective(800px) rotate3d(1, 0, 0, 10deg)
    }

    80% {
        transform: perspective(800px) rotate3d(1, 0, 0, -5deg)
    }

    to {
        opacity: 1;
        transform: perspective(800px)
    }
}

.flipInX {
    animation-name: flipInX;
    backface-visibility: visible !important;
    animation-timing-function: var(--ease-heavy-back)
}

@keyframes flipInY {
    from {
        opacity: 0;
        transform: perspective(800px) rotate3d(0, 1, 0, 90deg)
    }

    40% {
        transform: perspective(800px) rotate3d(0, 1, 0, -18deg)
    }

    60% {
        opacity: 1;
        transform: perspective(800px) rotate3d(0, 1, 0, 10deg)
    }

    80% {
        transform: perspective(800px) rotate3d(0, 1, 0, -5deg)
    }

    to {
        opacity: 1;
        transform: perspective(800px)
    }
}

.flipInY {
    animation-name: flipInY;
    backface-visibility: visible !important;
    animation-timing-function: var(--ease-heavy-back)
}

@keyframes glitchIn {
    0% {
        opacity: 0;
        transform: translate3d(-34px, 0, 0) skewX(-16deg)
    }

    10% {
        opacity: 1;
        transform: translate3d(24px, -3px, 0) skewX(11deg)
    }

    20% {
        transform: translate3d(-16px, 3px, 0) skewX(-8deg)
    }

    32% {
        transform: translate3d(12px, -4px, 0) skewX(6deg)
    }

    44% {
        transform: translate3d(-8px, 4px, 0) skewX(-4deg)
    }

    58% {
        transform: translate3d(5px, 0, 0) skewX(2deg)
    }

    72% {
        transform: translate3d(-3px, 0, 0) skewX(-1deg)
    }

    100% {
        opacity: 1;
        transform: none
    }
}

.glitchIn {
    animation-name: glitchIn;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes slamDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -160%, 0) scale(1, 1)
    }

    70% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1, 1)
    }

    82% {
        transform: scale(1.08, .86)
    }

    92% {
        transform: scale(.97, 1.03)
    }

    100% {
        transform: scale(1, 1)
    }
}

.slamDown {
    animation-name: slamDown;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes matrixDrop {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: translate3d(0, -220px, 0) scaleY(1.3)
    }

    60% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 10px, 0) scaleY(.95)
    }

    80% {
        transform: translate3d(0, -4px, 0) scaleY(1.02)
    }

    100% {
        transform: translate3d(0, 0, 0) scaleY(1)
    }
}

.matrixDrop {
    animation-name: matrixDrop;
    animation-timing-function: var(--ease-heavy-back)
}

@keyframes elasticPop {
    0% {
        opacity: 0;
        transform: scale3d(.3, .3, .3)
    }

    35% {
        opacity: 1;
        transform: scale3d(1.25, 1.25, 1.25)
    }

    55% {
        transform: scale3d(.85, .85, .85)
    }

    75% {
        transform: scale3d(1.1, 1.1, 1.1)
    }

    90% {
        transform: scale3d(.96, .96, .96)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

.elasticPop {
    animation-name: elasticPop;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes spinSmash {
    0% {
        opacity: 0;
        transform: scale3d(.2, .2, .2) rotate3d(0, 0, 1, -540deg)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 15deg)
    }

    80% {
        transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -5deg)
    }

    100% {
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg)
    }
}

.spinSmash {
    animation-name: spinSmash;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes punchIn {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: scale3d(2.4, 2.4, 2.4)
    }

    60% {
        opacity: 1;
        filter: blur(0);
        transform: scale3d(.92, .92, .92)
    }

    80% {
        transform: scale3d(1.04, 1.04, 1.04)
    }

    100% {
        transform: scale3d(1, 1, 1)
    }
}

.punchIn {
    animation-name: punchIn;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes skewSlam {
    0% {
        opacity: 0;
        transform: translate3d(-160px, 0, 0) skewX(-35deg) scale(1.1)
    }

    60% {
        opacity: 1;
        transform: translate3d(20px, 0, 0) skewX(6deg) scale(1)
    }

    80% {
        transform: translate3d(-8px, 0, 0) skewX(-2deg)
    }

    100% {
        transform: none
    }
}

.skewSlam {
    animation-name: skewSlam;
    animation-timing-function: var(--ease-heavy-back)
}

@keyframes blurZoomSmash {
    0% {
        opacity: 0;
        filter: blur(24px);
        transform: scale3d(.15, .15, .15) rotate3d(0, 0, 1, 25deg)
    }

    55% {
        opacity: 1;
        filter: blur(0);
        transform: scale3d(1.12, 1.12, 1.12) rotate3d(0, 0, 1, -4deg)
    }

    75% {
        transform: scale3d(.94, .94, .94) rotate3d(0, 0, 1, 2deg)
    }

    100% {
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg)
    }
}

.blurZoomSmash {
    animation-name: blurZoomSmash;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes neonPulse {
    0% {
        opacity: 0;
        filter: brightness(3) blur(6px)
    }

    15% {
        opacity: 1;
        filter: brightness(3) blur(0)
    }

    25% {
        opacity: .3;
        filter: brightness(1)
    }

    35% {
        opacity: 1;
        filter: brightness(2.5)
    }

    45% {
        opacity: .4;
        filter: brightness(1)
    }

    55% {
        opacity: 1;
        filter: brightness(1.8)
    }

    70% {
        opacity: .6;
        filter: brightness(1)
    }

    85% {
        opacity: 1;
        filter: brightness(1.2)
    }

    100% {
        opacity: 1;
        filter: brightness(1)
    }
}

.neonPulse {
    animation-name: neonPulse;
    animation-timing-function: var(--ease-in-out-heavy)
}

@keyframes shutterIn {
    0% {
        opacity: 1;
        clip-path: inset(50% 0 50% 0)
    }

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

.shutterIn {
    animation-name: shutterIn;
    animation-timing-function: var(--ease-heavy-smooth)
}

@keyframes dropSmash {
    0% {
        opacity: 0;
        transform: translate3d(0, -100vh, 0) scale(1, 1)
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1, 1)
    }

    68% {
        transform: scale(1.15, .75)
    }

    76% {
        transform: scale(.92, 1.08)
    }

    84% {
        transform: scale(1.04, .97)
    }

    92% {
        transform: scale(.98, 1.01)
    }

    100% {
        transform: scale(1, 1)
    }
}

.dropSmash {
    animation-name: dropSmash;
    animation-timing-function: var(--ease-heavy-smooth)
}