/* 1. Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fadeIn {
    animation: fadeIn 1s ease-in-out;
}

/* 2. Slide In From Left */
@keyframes slideInFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
.slideInFromLeft {
    animation: slideInFromLeft 1s ease-in-out;
}

/* 3. Slide In From Right */
@keyframes slideInFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.slideInFromRight {
    animation: slideInFromRight 1s ease-in-out;
}

/* 4. Zoom In */
@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
.zoomIn {
    animation: zoomIn 1s ease-in-out;
}

/* 5. Zoom Out */
@keyframes zoomOut {
    from { transform: scale(2); }
    to { transform: scale(1); }
}
.zoomOut {
    animation: zoomOut 1s ease-in-out;
}

/* 6. Rotate In */
@keyframes rotateIn {
    from { transform: rotate(-360deg); }
    to { transform: rotate(0); }
}
.rotateIn {
    animation: rotateIn 1s ease-in-out;
}

/* 7. Bounce In */
@keyframes bounceIn {
    0% { transform: scale(0.1); opacity: 0; }
    60% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}
.bounceIn {
    animation: bounceIn 1s ease-in-out;
}

/* 8. Flip In (X-axis) */
@keyframes flipInX {
    from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
    to { transform: perspective(400px) rotateX(0); opacity: 1; }
}
.flipInX {
    animation: flipInX 1s ease-in-out;
}

/* 9. Flip In (Y-axis) */
@keyframes flipInY {
    from { transform: perspective(400px) rotateY(90deg); opacity: 0; }
    to { transform: perspective(400px) rotateY(0); opacity: 1; }
}
.flipInY {
    animation: flipInY 1s ease-in-out;
}

/* 10. Matrix-style character reveal */
@keyframes matrix {
    from { opacity: 0; }
    to { opacity: 1; }
}
.matrix-char {
    display: inline-block;
    opacity: 0;
    animation: matrix 0.1s forwards;
}

/* --- Image Animations --- */

/* 1. Ken Burns - Zoom In */
@keyframes kenBurnsZoomIn {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}
.kenBurnsZoomIn img {
    animation: kenBurnsZoomIn 10s ease-in-out forwards;
}

/* 2. Ken Burns - Zoom Out */
@keyframes kenBurnsZoomOut {
    from { transform: scale(1.1); }
    to { transform: scale(1); }
}
.kenBurnsZoomOut img {
    animation: kenBurnsZoomOut 10s ease-in-out forwards;
}

/* 3. Pan Left */
@keyframes panLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-10%); }
}
.panLeft img {
    animation: panLeft 10s ease-in-out forwards;
}

/* 4. Pan Right */
@keyframes panRight {
    from { transform: translateX(-10%); }
    to { transform: translateX(0); }
}
.panRight img {
    animation: panRight 10s ease-in-out forwards;
}

/* 5. Slide In From Top */
@keyframes slideInFromTopImg {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
.slideInFromTopImg {
    animation: slideInFromTopImg 1s ease-in-out;
}

/* 6. Slide In From Bottom */
@keyframes slideInFromBottomImg {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.slideInFromBottomImg {
    animation: slideInFromBottomImg 1s ease-in-out;
}

/* 7. Blur In */
@keyframes blurIn {
    from { filter: blur(20px); }
    to { filter: blur(0); }
}
.blurIn img {
    animation: blurIn 1s ease-in-out forwards;
}

/* 8. Grayscale to Color */
@keyframes grayscaleToColor {
    from { filter: grayscale(100%); }
    to { filter: grayscale(0%); }
}
.grayscaleToColor img {
    animation: grayscaleToColor 1s ease-in-out forwards;
}

/* 9. Sepia to Color */
@keyframes sepiaToColor {
    from { filter: sepia(100%); }
    to { filter: sepia(0%); }
}
.sepiaToColor img {
    animation: sepiaToColor 1s ease-in-out forwards;
}

/* 10. Brightness In */
@keyframes brightnessIn {
    from { filter: brightness(0); }
    to { filter: brightness(1); }
}
.brightnessIn img {
    animation: brightnessIn 1s ease-in-out forwards;
}

/* 11. Contrast In */
@keyframes contrastIn {
    from { filter: contrast(0); }
    to { filter: contrast(1); }
}
.contrastIn img {
    animation: contrastIn 1s ease-in-out forwards;
}

/* 12. Skew In (X-axis) */
@keyframes skewInX {
    from { transform: skewX(20deg); }
    to { transform: skewX(0); }
}
.skewInX img {
    animation: skewInX 1s ease-in-out forwards;
}

/* 13. Skew In (Y-axis) */
@keyframes skewInY {
    from { transform: skewY(20deg); }
    to { transform: skewY(0); }
}
.skewInY img {
    animation: skewInY 1s ease-in-out forwards;
}

/* 14. Slide and Fade In (from Top) */
@keyframes slideAndFadeInFromTop {
    from { transform: translateY(-50%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slideAndFadeInFromTop {
    animation: slideAndFadeInFromTop 1s ease-in-out;
}

/* 15. Slide and Fade In (from Bottom) */
@keyframes slideAndFadeInFromBottom {
    from { transform: translateY(50%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slideAndFadeInFromBottom {
    animation: slideAndFadeInFromBottom 1s ease-in-out;
}

/* 16. Slide and Fade In (from Left) */
@keyframes slideAndFadeInFromLeft {
    from { transform: translateX(-50%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slideAndFadeInFromLeft {
    animation: slideAndFadeInFromLeft 1s ease-in-out;
}

/* 17. Slide and Fade In (from Right) */
@keyframes slideAndFadeInFromRight {
    from { transform: translateX(50%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slideAndFadeInFromRight {
    animation: slideAndFadeInFromRight 1s ease-in-out;
}

/* 18. Rotate and Zoom In */
@keyframes rotateAndZoomIn {
    from { transform: scale(0) rotate(-360deg); }
    to { transform: scale(1) rotate(0); }
}
.rotateAndZoomIn {
    animation: rotateAndZoomIn 1s ease-in-out;
}

/* 19. Pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.pulse img {
    animation: pulse 1s ease-in-out;
}

/* 20. Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake img {
    animation: shake 0.5s ease-in-out;
}