/* Animation Stylesheet */

/* Fade In */
.visible.fade-in {
    animation-name: fadeIn;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade Out */
.visible.fade-out {
    animation-name: fadeOut;
}
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Slide Up */
.visible.slide-up {
    animation-name: slideUp;
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

/* Slide Down */
.visible.slide-down {
    animation-name: slideDown;
}
@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

/* Slide Left */
.visible.slide-left {
    animation-name: slideLeft;
}
@keyframes slideLeft {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Slide Right */
.visible.slide-right {
    animation-name: slideRight;
}
@keyframes slideRight {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

/* Zoom In */
.visible.zoom-in {
    animation-name: zoomIn;
}
@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Zoom Out */
.visible.zoom-out {
    animation-name: zoomOut;
}
@keyframes zoomOut {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

/* Rotate */
.visible.rotate {
    animation-name: rotate;
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Bounce */
.visible.bounce {
    animation-name: bounce;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-30px); }
    60% { transform: translateY(-15px); }
}

/* Shake */
.visible.shake {
    animation-name: shake;
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
    20%, 40%, 60%, 80% { transform: translateX(10px); }
}

/* Pulse */
.visible.pulse {
    animation-name: pulse;
}
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Spin */
.visible.spin {
    animation-name: spin;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Flip Horizontal */
.visible.flip-horizontal {
    animation-name: flipHorizontal;
}
@keyframes flipHorizontal {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(180deg); }
}

/* Flip Vertical */
.visible.flip-vertical {
    animation-name: flipVertical;
}
@keyframes flipVertical {
    from { transform: rotateX(0deg); }
    to { transform: rotateX(180deg); }
}

/* Flash */
.visible.flash {
    animation-name: flash;
}
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Wobble */
.visible.wobble {
    animation-name: wobble;
}
@keyframes wobble {
    0%, 100% { transform: translateX(0%); }
    15%, 45%, 75% { transform: translateX(-5%) rotate(-5deg); }
    30%, 60%, 90% { transform: translateX(5%) rotate(5deg); }
}

/* Jello */
.visible.jello {
    animation-name: jello;
}
@keyframes jello {
    0%, 100% { transform: skewX(0deg); }
    25% { transform: skewX(-25deg); }
    50% { transform: skewX(25deg); }
    75% { transform: skewX(-25deg); }
}

/* Heartbeat */
.visible.heartbeat {
    animation-name: heartbeat;
}
@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    14%, 21% { transform: scale(1.3); }
}

/* Swing */
.visible.swing {
    animation-name: swing;
}
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* Predefined Classes for Animation Properties */

/* Animation Duration */
.duration-500 { animation-duration: 500ms; }
.duration-1000 { animation-duration: 1s; }
.duration-1500 { animation-duration: 1.5s; }
.duration-2000 { animation-duration: 2s; }

/* Animation Delay */
.delay-500 { animation-delay: 500ms; }
.delay-750 { animation-delay: 750ms; }
.delay-1000 { animation-delay: 1s; }
.delay-1500 { animation-delay: 1.5s; }
.delay-2000 { animation-delay: 2s; }

/* Animation Timing Function */
.function-linear { animation-timing-function: linear; }
.function-ease { animation-timing-function: ease; }
.function-ease-in { animation-timing-function: ease-in; }
.function-ease-out { animation-timing-function: ease-out; }
.function-ease-in-out { animation-timing-function: ease-in-out; }

/* Animation Fill Mode */
.fill-mode-none { animation-fill-mode: none; }
.fill-mode-forwards { animation-fill-mode: forwards; }
.fill-mode-backwards { animation-fill-mode: backwards; }
.fill-mode-both { animation-fill-mode: both; }

/* Animation Iteration Count */
.iteration-1 { animation-iteration-count: 1; }
.iteration-infinite { animation-iteration-count: infinite; }

/* Animation Direction */
.direction-normal { animation-direction: normal; }
.direction-reverse { animation-direction: reverse; }
.direction-alternate { animation-direction: alternate; }
.direction-alternate-reverse { animation-direction: alternate-reverse; }