/**
 * Superb Addons Animations
 * 30+ animations for blocks
 */

/* Base animation setup */
.superb-animate {
    animation-fill-mode: both;
}

/* Fade Animations */
@keyframes superb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes superb-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes superb-fade-in-down {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes superb-fade-in-left {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes superb-fade-in-right {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide Animations */
@keyframes superb-slide-in-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes superb-slide-in-down {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

@keyframes superb-slide-in-left {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes superb-slide-in-right {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Zoom Animations */
@keyframes superb-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes superb-zoom-out {
    from {
        opacity: 0;
        transform: scale(1.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Rotate Animation */
@keyframes superb-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-200deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* Flip Animations */
@keyframes superb-flip-in-x {
    from {
        opacity: 0;
        transform: perspective(400px) rotateX(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateX(0);
    }
}

@keyframes superb-flip-in-y {
    from {
        opacity: 0;
        transform: perspective(400px) rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: perspective(400px) rotateY(0);
    }
}

/* Bounce Animations */
@keyframes superb-bounce-in {
    0%, 20%, 40%, 60%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    20% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.03);
    }
    80% {
        transform: scale(0.97);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes superb-bounce-in-up {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    60% {
        opacity: 1;
        transform: translateY(-30px);
    }
    75% {
        transform: translateY(10px);
    }
    90% {
        transform: translateY(-15px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes superb-bounce-in-down {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    60% {
        opacity: 1;
        transform: translateY(30px);
    }
    75% {
        transform: translateY(-10px);
    }
    90% {
        transform: translateY(15px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes superb-bounce-in-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    60% {
        opacity: 1;
        transform: translateX(25px);
    }
    75% {
        transform: translateX(-10px);
    }
    90% {
        transform: translateX(5px);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes superb-bounce-in-right {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    60% {
        opacity: 1;
        transform: translateX(-25px);
    }
    75% {
        transform: translateX(10px);
    }
    90% {
        transform: translateX(-5px);
    }
    to {
        transform: translateX(0);
    }
}

/* Special Effects */
@keyframes superb-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

@keyframes superb-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@keyframes superb-swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes superb-wobble {
    0% { transform: translateX(0%); }
    15% { transform: translateX(-25%) rotate(-5deg); }
    30% { transform: translateX(20%) rotate(3deg); }
    45% { transform: translateX(-15%) rotate(-3deg); }
    60% { transform: translateX(10%) rotate(2deg); }
    75% { transform: translateX(-5%) rotate(-1deg); }
    100% { transform: translateX(0%); }
}

@keyframes superb-flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

@keyframes superb-rubber-band {
    0% { transform: scale(1); }
    30% { transform: scaleX(1.25) scaleY(0.75); }
    40% { transform: scaleX(0.75) scaleY(1.25); }
    50% { transform: scaleX(1.15) scaleY(0.85); }
    65% { transform: scaleX(0.95) scaleY(1.05); }
    75% { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scale(1); }
}

@keyframes superb-jello {
    0%, 11.1%, 100% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

@keyframes superb-heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.3); }
    28% { transform: scale(1); }
    42% { transform: scale(1.3); }
    70% { transform: scale(1); }
}

@keyframes superb-bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translateY(0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translateY(-30px);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translateY(-15px);
    }
    90% { transform: translateY(-4px); }
}

@keyframes superb-flip {
    0% { transform: perspective(400px) rotateY(0); }
    40% { transform: perspective(400px) rotateY(-180deg); }
    100% { transform: perspective(400px) rotateY(-360deg); }
}

@keyframes superb-light-speed-in {
    0% {
        opacity: 0;
        transform: translateX(100%) skewX(-30deg);
    }
    60% {
        opacity: 1;
        transform: translateX(-20%) skewX(20deg);
    }
    80% {
        transform: translateX(0%) skewX(-5deg);
    }
    100% {
        transform: translateX(0%) skewX(0deg);
    }
}

@keyframes superb-roll-in {
    from {
        opacity: 0;
        transform: translateX(-100%) rotate(-120deg);
    }
    to {
        opacity: 1;
        transform: translateX(0%) rotate(0deg);
    }
}

/* Apply animations */
.superb-animate-fade-in { animation-name: superb-fade-in; }
.superb-animate-fade-in-up { animation-name: superb-fade-in-up; }
.superb-animate-fade-in-down { animation-name: superb-fade-in-down; }
.superb-animate-fade-in-left { animation-name: superb-fade-in-left; }
.superb-animate-fade-in-right { animation-name: superb-fade-in-right; }
.superb-animate-slide-in-up { animation-name: superb-slide-in-up; }
.superb-animate-slide-in-down { animation-name: superb-slide-in-down; }
.superb-animate-slide-in-left { animation-name: superb-slide-in-left; }
.superb-animate-slide-in-right { animation-name: superb-slide-in-right; }
.superb-animate-zoom-in { animation-name: superb-zoom-in; }
.superb-animate-zoom-out { animation-name: superb-zoom-out; }
.superb-animate-rotate-in { animation-name: superb-rotate-in; }
.superb-animate-flip-in-x { animation-name: superb-flip-in-x; }
.superb-animate-flip-in-y { animation-name: superb-flip-in-y; }
.superb-animate-bounce-in { animation-name: superb-bounce-in; }
.superb-animate-bounce-in-up { animation-name: superb-bounce-in-up; }
.superb-animate-bounce-in-down { animation-name: superb-bounce-in-down; }
.superb-animate-bounce-in-left { animation-name: superb-bounce-in-left; }
.superb-animate-bounce-in-right { animation-name: superb-bounce-in-right; }
.superb-animate-shake { animation-name: superb-shake; }
.superb-animate-pulse { animation-name: superb-pulse; }
.superb-animate-swing { animation-name: superb-swing; }
.superb-animate-wobble { animation-name: superb-wobble; }
.superb-animate-flash { animation-name: superb-flash; }
.superb-animate-rubber-band { animation-name: superb-rubber-band; }
.superb-animate-jello { animation-name: superb-jello; }
.superb-animate-heartbeat { animation-name: superb-heartbeat; }
.superb-animate-bounce { animation-name: superb-bounce; }
.superb-animate-flip { animation-name: superb-flip; }
.superb-animate-light-speed-in { animation-name: superb-light-speed-in; }
.superb-animate-roll-in { animation-name: superb-roll-in; }