// Function to show notifications
            function showNotification(message, type, duration) {
                // Default parameters
                type = type || 'info'; // info, success, warning, error
                duration = duration || 4000; // 4 seconds
                
                // Create notification element if it doesn't exist
                let $notificationArea = $("#notification-area");
                if ($notificationArea.length === 0) {
                    $notificationArea = $("<div id='notification-area'></div>");
                    $("body").append($notificationArea);
                }
                
                // Create notification
                let $notification = $("<div class='notification notification-" + type + "'>" + 
                                      "<div class='notification-message'>" + message + "</div>" +
                                      "<button class='notification-close'>×</button>" +
                                      "</div>");
                
                // Add to notification area
                $notificationArea.append($notification);
                
                // Initially hide the notification
                $notification.css({
                    opacity: 0,
                    transform: "translateY(-20px)"
                });
                
                // Show with animation
                $notification.animate({
                    opacity: 1,
                    transform: "translateY(0)"
                }, 300, "easeOutCubic");
                
                // Set up auto-dismissal
                let dismissTimeout = setTimeout(function() {
                    dismissNotification($notification);
                }, duration);
                
                // Close button handler
                $notification.find(".notification-close").on("click", function() {
                    clearTimeout(dismissTimeout);
                    dismissNotification($notification);
                });
                
                // Return the notification object for further manipulation
                return $notification;
            }
            
            // Function to dismiss notifications
            function dismissNotification($notification) {
                $notification.animate({
                    opacity: 0,
                    transform: "translateY(-20px)"
                }, 300, "easeInCubic", function() {
                    // Remove from DOM after animation
                    $(this).remove();
                });
            }
            
            // Example usage in WordPress
            $(document).ready(function($) {
                // Show notification when a form is submitted successfully
                $(".ajax-form").on("submit", function(e) {
                    e.preventDefault();
                    
                    let $form = $(this);
                    let formData = $form.serialize();
                    
                    // Show loading state
                    let $submitButton = $form.find("input[type='submit']");
                    let originalButtonText = $submitButton.val();
                    $submitButton.prop("disabled", true).val("Sending...");
                    
                    // Send AJAX request
                    $.ajax({
                        url: ajax_vars.url,
                        type: "POST",
                        data: formData + "&action=process_form&nonce=" + ajax_vars.nonce,
                        success: function(response) {
                            if (response.success) {
                                // Show success notification
                                showNotification(response.data.message, "success");
                                
                                // Reset form
                                $form[0].reset();
                            } else {
                                // Show error notification
                                showNotification(response.data.message || "An error occurred", "error");
                            }
                        },
                        error: function() {
                            // Show connection error notification
                            showNotification("Connection error. Please try again.", "error");
                        },
                        complete: function() {
                            // Restore button state
                            $submitButton.prop("disabled", false).val(originalButtonText);
                        }
                    });
                });
                
                // Show notification for WordPress admin notices
                $(".is-dismissible").each(function() {
                    let $notice = $(this);
                    let noticeType = "info";
                    
                    if ($notice.hasClass("notice-success")) {
                        noticeType = "success";
                    } else if ($notice.hasClass("notice-warning")) {
                        noticeType = "warning";
                    } else if ($notice.hasClass("notice-error")) {
                        noticeType = "error";
                    }
                    
                    // Get notice text
                    let noticeText = $notice.find("p").first().text();
                    
                    // Hide the original notice
                    $notice.hide();
                    
                    // Show our custom notification
                    showNotification(noticeText, noticeType);
                });
            });

// Function to check if element is in viewport
            function isElementInViewport($element, offset) {
                offset = offset || 100; // Default offset from bottom of viewport
                
                let windowHeight = $(window).height();
                let windowScrollTop = $(window).scrollTop();
                let elementTop = $element.offset().top;
                
                // Element is in viewport if its top is less than viewport bottom minus offset
                return elementTop < (windowScrollTop + windowHeight - offset);
            }
            
            // Function to animate elements when they enter the viewport
            function animateOnScroll() {
                $(".animate-on-scroll").each(function() {
                    let $element = $(this);
                    
                    // Skip if already animated
                    if ($element.hasClass("animated")) return;
                    
                    // Check if in viewport
                    if (isElementInViewport($element)) {
                        // Determine animation type
                        let animationType = $element.data("animation") || "fade";
                        
                        // Apply animation
                        switch (animationType) {
                            case "fade":
                                $element.css({
                                    opacity: 0
                                }).animate({
                                    opacity: 1
                                }, 800);
                                break;
                                
                            case "slide-up":
                                $element.css({
                                    opacity: 0,
                                    transform: "translateY(50px)"
                                }).animate({
                                    opacity: 1,
                                    transform: "translateY(0)"
                                }, 800);
                                break;
                                
                            case "slide-right":
                                $element.css({
                                    opacity: 0,
                                    transform: "translateX(-50px)"
                                }).animate({
                                    opacity: 1,
                                    transform: "translateX(0)"
                                }, 800);
                                break;
                                
                            case "slide-left":
                                $element.css({
                                    opacity: 0,
                                    transform: "translateX(50px)"
                                }).animate({
                                    opacity: 1,
                                    transform: "translateX(0)"
                                }, 800);
                                break;
                                
                            case "zoom-in":
                                $element.css({
                                    opacity: 0,
                                    transform: "scale(0.8)"
                                }).animate({
                                    opacity: 1,
                                    transform: "scale(1)"
                                }, 800);
                                break;
                        }
                        
                        // Mark as animated
                        $element.addClass("animated");
                    }
                });
            }
            
            // Initialize scroll animations
            $(document).ready(function($) {
                // Run once on page load
                animateOnScroll();
                
                // Run on scroll with throttling for performance
                let scrollTimeout;
                $(window).on("scroll", function() {
                    if (scrollTimeout) {
                        clearTimeout(scrollTimeout);
                    }
                    
                    scrollTimeout = setTimeout(function() {
                        animateOnScroll();
                    }, 100);
                });
                
                // Add scroll animation to WordPress content elements
                if ($(".entry-content").length) {
                    // Add animation to headings
                    $(".entry-content h2, .entry-content h3").addClass("animate-on-scroll").attr("data-animation", "slide-right");
                    
                    // Add animation to paragraphs
                    $(".entry-content p").addClass("animate-on-scroll").attr("data-animation", "fade");
                    
                    // Add animation to images
                    $(".entry-content img").addClass("animate-on-scroll").attr("data-animation", "zoom-in");
                    
                    // Add animation to lists
                    $(".entry-content ul, .entry-content ol").addClass("animate-on-scroll").attr("data-animation", "slide-left");
                    
                    // Run animation check again
                    animateOnScroll();
                }
            });

// In your theme's functions.php or plugin file
            function enqueue_login_scripts() {
                wp_enqueue_script('jquery');
                wp_enqueue_script('login-animations', get_template_directory_uri() . '/js/login-animations.js', array('jquery'), '1.0', true);
                wp_enqueue_style('login-styles', get_template_directory_uri() . '/css/login-styles.css');
            }
            add_action('login_enqueue_scripts', 'enqueue_login_scripts');
            
            // JavaScript file (login-animations.js)
            jQuery(document).ready(function($) {
                // Cache DOM elements
                let $loginForm = $("#loginform");
                let $logo = $(".login h1");
                let $loginError = $("#login_error");
                let $message = $(".message");
                
                // Initially hide all elements
                $loginForm.css("opacity", 0);
                $logo.css("opacity", 0);
                if ($loginError.length) $loginError.css("opacity", 0);
                if ($message.length) $message.css("opacity", 0);
                
                // Animate logo first
                $logo.animate({
                    opacity: 1,
                    top: 0
                }, 800, "easeOutQuad", function() {
                    // Then animate form
                    $loginForm.animate({
                        opacity: 1,
                        top: 0
                    }, 600, "easeOutQuad", function() {
                        // Focus on username field
                        $("#user_login").focus();
                        
                        // Animate error message if present
                        if ($loginError.length) {
                            $loginError.animate({
                                opacity: 1,
                                left: 0
                            }, 400, "easeOutQuad");
                        }
                        
                        // Animate info message if present
                        if ($message.length) {
                            $message.animate({
                                opacity: 1,
                                right: 0
                            }, 400, "easeOutQuad");
                        }
                    });
                });
                
                // Add animation to form fields when focused
                $("#loginform input").on("focus", function() {
                    $(this).addClass("input-focus");
                }).on("blur", function() {
                    $(this).removeClass("input-focus");
                });
                
                // Animate submit button on hover
                $("#wp-submit").on("mouseenter", function() {
                    $(this).stop().animate({
                        backgroundColor: "#0073e6"
                    }, 300);
                }).on("mouseleave", function() {
                    $(this).stop().animate({
                        backgroundColor: "#2271b1"
                    }, 300);
                });
                
                // Add loading animation when form is submitted
                $loginForm.on("submit", function() {
                    // Disable submit button
                    let $submitBtn = $("#wp-submit");
                    $submitBtn.prop("disabled", true);
                    
                    // Add and animate loading indicator
                    if ($submitBtn.find(".loading-spinner").length === 0) {
                        $submitBtn.append("<span class='loading-spinner'></span>");
                    }
                    
                    // Fade form slightly to indicate processing
                    $loginForm.animate({
                        opacity: 0.7
                    }, 300);
                    
                    // Form will submit normally
                    return true;
                });
            });