/* Animate.css - A collection of CSS animations for revealing elements on scroll */
        /* 1. Fade In */
        .fade-in.reveal {
            animation: fadeIn 0.8s ease forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* 2. Slide Up */
        .slide-up.reveal {
            animation: slideUp 0.8s ease forwards;
        }

        @keyframes slideUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slide-up {
            transform: translateY(60px);
        }

        /* 3. Slide Down */
        .slide-down.reveal {
            animation: slideDown 0.8s ease forwards;
        }

        @keyframes slideDown {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .slide-down {
            transform: translateY(-60px);
        }

        /* 4. Slide Left */
        .slide-left.reveal {
            animation: slideLeft 0.8s ease forwards;
        }

        @keyframes slideLeft {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .slide-left {
            transform: translateX(60px);
        }

        /* 5. Slide Right */
        .slide-right.reveal {
            animation: slideRight 0.8s ease forwards;
        }

        @keyframes slideRight {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .slide-right {
            transform: translateX(-60px);
        }

        /* 6. Scale In */
        .scale-in.reveal {
            animation: scaleIn 0.8s ease forwards;
        }

        @keyframes scaleIn {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .scale-in {
            transform: scale(0.7);
        }

        /* 7. Scale Out */
        .scale-out.reveal {
            animation: scaleOut 0.8s ease forwards;
        }

        @keyframes scaleOut {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .scale-out {
            transform: scale(1.3);
        }

        /* 8. Rotate In */
        .rotate-in.reveal {
            animation: rotateIn 0.8s ease forwards;
        }

        @keyframes rotateIn {
            to {
                opacity: 1;
                transform: rotate(0deg);
            }
        }

        .rotate-in {
            transform: rotate(-90deg);
        }

        /* 9. Flip X */
        .flip-x.reveal {
            animation: flipX 0.8s ease forwards;
        }

        @keyframes flipX {
            to {
                opacity: 1;
                transform: perspective(600px) rotateX(0deg);
            }
        }

        .flip-x {
            transform: perspective(600px) rotateX(-90deg);
        }

        /* 10. Flip Y */
        .flip-y.reveal {
            animation: flipY 0.8s ease forwards;
        }

        @keyframes flipY {
            to {
                opacity: 1;
                transform: perspective(600px) rotateY(0deg);
            }
        }

        .flip-y {
            transform: perspective(600px) rotateY(-90deg);
        }

        /* 11. Zoom Blur */
        .zoom-blur.reveal {
            animation: zoomBlur 0.8s ease forwards;
        }

        @keyframes zoomBlur {
            to {
                opacity: 1;
                transform: scale(1);
                filter: blur(0);
            }
        }

        .zoom-blur {
            transform: scale(0.8);
            filter: blur(10px);
        }

        /* 12. Bounce In */
        .bounce-in.reveal {
            animation: bounceIn 0.8s ease forwards;
        }

        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.3); }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* 13. Elastic */
        .elastic.reveal {
            animation: elastic 1s ease forwards;
        }

        @keyframes elastic {
            0% { opacity: 0; transform: scale(0); }
            55% { transform: scale(1.15); }
            70% { transform: scale(0.95); }
            85% { transform: scale(1.05); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* 14. Swing In */
        .swing-in.reveal {
            animation: swingIn 0.8s ease forwards;
        }

        @keyframes swingIn {
            0% { opacity: 0; transform: rotate(-10deg); }
            50% { transform: rotate(5deg); }
            100% { opacity: 1; transform: rotate(0deg); }
        }

        /* 15. Slide Rotate */
        .slide-rotate.reveal {
            animation: slideRotate 0.8s ease forwards;
        }

        @keyframes slideRotate {
            to {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
            }
        }

        .slide-rotate {
            transform: translateY(60px) rotate(-15deg);
        }

        /* 16. Slide Scale */
        .slide-scale.reveal {
            animation: slideScale 0.8s ease forwards;
        }

        @keyframes slideScale {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .slide-scale {
            transform: translateY(60px) scale(0.8);
        }

        /* 17. Fade Slide Blur */
        .fade-slide-blur.reveal {
            animation: fadeSlideBlur 0.8s ease forwards;
        }

        @keyframes fadeSlideBlur {
            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0);
            }
        }

        .fade-slide-blur {
            transform: translateY(40px);
            filter: blur(5px);
        }

        /* 18. Skew In */
        .skew-in.reveal {
            animation: skewIn 0.8s ease forwards;
        }

        @keyframes skewIn {
            to {
                opacity: 1;
                transform: skewX(0deg) translateX(0);
            }
        }

        .skew-in {
            transform: skewX(-20deg) translateX(-60px);
        }

        /* 19. Curtain Reveal */
        .curtain.reveal {
            animation: curtain 0.8s ease forwards;
        }

        @keyframes curtain {
            to {
                opacity: 1;
                clip-path: inset(0 0 0 0);
            }
        }

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

        /* 20. Typewriter */
        .typewriter.reveal {
            animation: typewriter 0.8s steps(20) forwards;
        }

        @keyframes typewriter {
            to {
                opacity: 1;
                clip-path: inset(0 0 0 0);
            }
        }

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

        .info {
            text-align: center;
            margin-top: 60px;
            padding: 30px;
            background: rgba(102, 126, 234, 0.1);
            border-radius: 12px;
            border: 1px solid rgba(102, 126, 234, 0.2);
        }

        .info p {
            color: #aaa;
            line-height: 1.6;
        }