/**
 * Authentication Button Animations and Loading States
 * Enhanced UX for authentication processes
 */

/* Custom animations for authentication buttons */
@keyframes auth-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.02);
    }
}

@keyframes auth-bounce-dots {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.3;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes auth-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes auth-wave {
    0%, 60%, 100% {
        transform: initial;
    }
    30% {
        transform: translateY(-10px);
    }
}

@keyframes auth-success-check {
    0% {
        stroke-dasharray: 0 100;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 100 0;
        stroke-dashoffset: 0;
    }
}

@keyframes auth-error-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(3px);
    }
}

@keyframes auth-loading-shimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

/* Authentication button states */
.auth-btn-loading {
    position: relative;
    pointer-events: none;
    overflow: hidden;
}

.auth-btn-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    animation: auth-loading-shimmer 2s infinite;
}

.auth-btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    animation: auth-pulse 0.6s ease-in-out;
}

.auth-btn-error {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    animation: auth-error-shake 0.6s ease-in-out;
}

/* OAuth provider button loading states */
.oauth-btn-loading {
    position: relative;
}

.oauth-btn-loading img {
    opacity: 0.6;
    animation: auth-pulse 1.5s infinite;
}

.oauth-btn-loading .oauth-dots {
    display: inline-flex;
    gap: 2px;
    margin-left: 8px;
}

.oauth-btn-loading .oauth-dots span {
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    animation: auth-bounce-dots 1.4s infinite ease-in-out both;
}

.oauth-btn-loading .oauth-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.oauth-btn-loading .oauth-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

.oauth-btn-loading .oauth-dots span:nth-child(3) {
    animation-delay: 0s;
}

/* Form loading overlay */
.auth-loading-overlay {
    backdrop-filter: blur(2px);
    transition: all 0.3s ease-in-out;
}

.auth-loading-overlay .loading-spinner {
    animation: auth-spin 1s linear infinite;
}

/* Input field loading states */
.auth-input-loading {
    background: linear-gradient(
        90deg,
        #f3f4f6,
        #e5e7eb,
        #f3f4f6
    );
    background-size: 200px 100%;
    animation: auth-loading-shimmer 1.5s infinite;
    pointer-events: none;
}

/* Progress indicators for multi-step auth */
.auth-progress-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 16px 0;
}

.auth-progress-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
}

.auth-progress-dot.active {
    background-color: #3b82f6;
    transform: scale(1.2);
}

.auth-progress-dot.completed {
    background-color: #10b981;
}

/* Loading text animation */
.auth-loading-text {
    animation: auth-pulse 2s infinite;
}

/* Success checkmark animation */
.auth-success-checkmark {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: auth-success-check 0.6s ease-in-out forwards;
}

/* Button hover states (disabled during loading) */
.auth-btn:not(.auth-btn-loading):not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .auth-btn-loading::before,
    .auth-loading-text,
    .oauth-btn-loading img,
    .oauth-btn-loading .oauth-dots span,
    .loading-spinner {
        animation: none;
    }
    
    .auth-btn-success,
    .auth-btn-error {
        animation: none;
    }
}

/* Focus states for better accessibility */
.auth-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .auth-btn-loading::before {
        background: linear-gradient(
            90deg,
            transparent,
            rgba(0, 0, 0, 0.3),
            transparent
        );
    }
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
    .auth-btn {
        min-height: 48px; /* Better touch target */
    }
    
    .oauth-btn-loading .oauth-dots {
        margin-left: 4px;
    }
    
    .auth-loading-overlay {
        padding: 20px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .auth-input-loading {
        background: linear-gradient(
            90deg,
            #374151,
            #4b5563,
            #374151
        );
    }
    
    .auth-progress-dot {
        background-color: #4b5563;
    }
    
    .auth-loading-overlay {
        background-color: rgba(17, 24, 39, 0.9);
    }
}

/* Utility classes for JavaScript integration */
.auth-btn-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.auth-form-disabled input,
.auth-form-disabled select,
.auth-form-disabled textarea {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Smooth transitions for state changes */
.auth-btn,
.auth-input,
.oauth-btn {
    transition: all 0.2s ease-in-out;
}

/* Loading message fade in/out */
.auth-loading-message {
    opacity: 0;
    animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Success/Error message styling */
.auth-message-success {
    color: #10b981;
    background-color: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
}

.auth-message-error {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
    margin: 8px 0;
}