/* ===== Animation Fixes ===== */

/* 
 * Fix for purchase button animation issue in navbar
 * Prevents button from expanding across navbar during click
 */
.nav-cta {
    /* Fixed dimensions to prevent expansion */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important; /* Keep width to content */
    min-width: 100px !important; /* Minimum width */
    max-width: 150px !important; /* Maximum width */
    height: 40px !important; /* Fixed height */
    padding: 0 16px !important; /* Horizontal padding only */
    box-sizing: border-box !important;
    white-space: nowrap !important;
    transform: translateZ(0) !important; /* Force GPU acceleration */
    will-change: transform !important; /* Hint for browser optimization */
    overflow: visible !important; /* Allow glow effects to show */
    isolation: isolate !important; /* Create stacking context for z-index */
    /* Better animation property */
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.2s ease !important;
    z-index: 100 !important;
}

/* Explicitly limit the span text inside the button */
.nav-cta span {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.nav-cta:active {
    /* More precise active state animation */
    transform: translateY(0) scale(0.98) !important; 
    transition: all 0.05s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 
 * Fix for modal interactions blocking navigation
 * Ensures proper modal behavior without affecting other elements
 */
.modal-overlay {
    /* Ensure modal overlay doesn't block navigation when hidden */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-overlay.visible {
    /* Only capture events when visible */
    pointer-events: all;
    opacity: 1;
    visibility: visible;
}

/* 
 * Fix for buttons with unsmooth animations
 * Make all button animations consistently smooth
 */
.btn,
button[class*="download"],
button[class*="purchase"],
.btn-primary,
.btn-outline {
    /* Improved transition for all button states */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease, 
                color 0.3s ease,
                border-color 0.3s ease !important;
    backface-visibility: hidden; /* Prevent flickering */
    transform: translateZ(0); /* Force GPU acceleration */
    will-change: transform, box-shadow; /* Hint for browser optimization */
}

/* Specific fixes for download and purchase buttons */
.download-free-btn,
.purchase-premium-btn,
button[class*="download"],
button[class*="purchase"] {
    position: relative;
    overflow: visible !important;
    transform: translateZ(0);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), 
                box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease !important;
}

/* Better click animations */
.download-free-btn:active,
.purchase-premium-btn:active,
button[class*="download"]:active,
button[class*="purchase"]:active {
    transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Fix for nav auth interactions */
.nav-link-auth {
    position: relative;
    z-index: 50; /* Ensure proper stacking */
    isolation: isolate;
}

/* Fix for authentication modal not properly handling clicks */
#loginForm,
#registerForm,
#resetPasswordForm {
    /* Prevent form submission from causing layout shifts */
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Fix for form transitions */
.auth-form-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}

/* Ensure buttons maintain proper dimensions during animations */
.btn {
    box-sizing: border-box !important;
}