/*
 * SLS Workflow Animations
 * All @keyframes, transitions, and animation utilities with accessibility support
 * Sprint 7.3: Extracted from monolithic sls-workflow-public.css
 */

/* ===========================================
   GLOBAL TRANSITIONS
   Sprint 1.7 - Task 1.7.19
   =========================================== */

/* Smooth transitions on all interactive elements */
button,
a,
input,
textarea,
select,
.sls-genre-card,
.sls-project-card,
.sls-deliverable-card,
.sls-workflow-interface,
.sls-breadcrumb-item,
.sls-step-indicator {
    transition: all 0.3s ease;
}

/* Enhanced button hover effects */
button:hover:not(:disabled),
.sls-btn:hover:not(:disabled),
.sls-quick-action-btn:hover,
.sls-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 162, 201, 0.3);
}

/* Button active/pressed state */
button:active:not(:disabled),
.sls-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 8px rgba(139, 162, 201, 0.2);
}

/* Enhanced focus states for accessibility */
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus {
    outline: 3px solid var(--sls-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(139, 162, 201, 0.2);
}

/* Focus visible (keyboard navigation only) */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* Card hover effects - subtle lift */
.sls-project-card:hover,
.sls-deliverable-card:hover,
.sls-genre-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(139, 162, 201, 0.25);
}

/* Smooth checkbox/radio animations */
input[type="checkbox"],
input[type="radio"] {
    transition: transform 0.2s ease;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    transform: scale(1.1);
}

/* Progress bar smooth fill animation */
.progress-fill,
.sls-progress-fill,
.sls-overall-progress-fill {
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Link hover effect - smooth color transition */
a {
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* ===========================================
   KEYFRAME ANIMATIONS
   =========================================== */

/* Progress bar stripe animation */
@keyframes progress-stripe {
    0% { background-position: 0 0; }
    100% { background-position: 30px 0; }
}

/* Pulse animation for current/active states */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(139, 162, 201, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(139, 162, 201, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 162, 201, 0); }
}

/* Typing indicator bounce */
@keyframes typing-bounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Message slide in */
@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spinner rotation */
@keyframes sls-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Slide in from right for modals/notifications */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide in from right (specific for mobile drawer) */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Recording countdown pulse */
@keyframes countdown-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade-in animation for new content */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ripple effect for button clicks */
@keyframes ripple {
    from {
        transform: scale(0);
        opacity: 0.6;
    }
    to {
        transform: scale(2);
        opacity: 0;
    }
}

/* Success animation for form submissions */
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(139, 162, 201, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(139, 162, 201, 0);
    }
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Bounce animation for notifications */
@keyframes bounceIn {
    0% {
        transform: scale(0.3);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Smooth modal backdrop fade */
@keyframes fadeInBackdrop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===========================================
   ANIMATION CLASSES
   =========================================== */

/* Fade-in for new content */
.sls-content-preview,
.sls-ai-working-display,
.sls-workflow-interface {
    animation: fadeIn 0.4s ease;
}

/* Slide-in for mobile drawer */
.sls-mobile-menu-toggle.menu-open + .mobile-drawer {
    animation: slideInRight 0.3s ease;
}

/* Pulse for loading states */
.sls-loading,
.sls-spinner {
    animation: pulse 2s ease-in-out infinite;
}

/* Success animation */
.success-animation {
    animation: successPulse 0.6s ease;
}

/* Smooth page transitions */
.sls-workflow-dashboard,
.woocommerce-account {
    animation: fadeIn 0.5s ease;
}

/* Skeleton loading */
.skeleton-loading {
    background: linear-gradient(
        90deg,
        var(--sls-dark-gray) 0%,
        var(--sls-gray) 50%,
        var(--sls-dark-gray) 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Notification bounce in */
.sls-notification {
    animation: bounceIn 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Modal backdrop fade */
.sls-mobile-menu-overlay,
.sls-modal-overlay {
    animation: fadeInBackdrop 0.3s ease;
}

/* ===========================================
   ACCESSIBILITY - REDUCED MOTION
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}