/* =================================================================== */
/* Animation Utilities - CSS Transitions replacing jQuery animations    */
/* Round 18.1 - jQuery Animation Modernization                          */
/* =================================================================== */

/**
 * CSS-based animations to replace jQuery's .fadeIn(), .fadeOut(),
 * .slideUp(), .slideDown(), .show(), .hide() methods.
 *
 * Usage:
 * - Add/remove classes via JS instead of calling jQuery animation methods
 * - Use with APP.Anim helper functions for programmatic control
 *
 * Performance:
 * - CSS transitions are GPU-accelerated
 * - Reduces JS execution time
 * - Smoother 60fps animations
 */

/* =================================================================== */
/* Fade Animations                                                      */
/* =================================================================== */

/* Base state for fade animations */
.anim-fade {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Fade out - apply to hide with fade */
.anim-fade.anim-out,
.anim-fade.hiding {
    opacity: 0;
}

/* Fade hidden - fully hidden after transition */
.anim-fade.anim-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Fast fade variant (150ms) */
.anim-fade-fast {
    opacity: 1;
    transition: opacity 0.15s ease;
}

.anim-fade-fast.anim-out,
.anim-fade-fast.hiding {
    opacity: 0;
}

/* Slow fade variant (500ms) */
.anim-fade-slow {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.anim-fade-slow.anim-out,
.anim-fade-slow.hiding {
    opacity: 0;
}

/* =================================================================== */
/* Slide Animations (for collapse-like behavior)                        */
/* =================================================================== */

/* Slide container - requires max-height to be set */
.anim-slide {
    overflow: hidden;
    max-height: 1000px; /* Adjust based on content, or set via JS */
    transition: max-height 0.35s ease-out, opacity 0.35s ease;
    opacity: 1;
}

/* Slide up (collapse) */
.anim-slide.anim-collapsed,
.anim-slide.collapsed {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

/* Fast slide variant */
.anim-slide-fast {
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.2s ease-out, opacity 0.2s ease;
    opacity: 1;
}

.anim-slide-fast.anim-collapsed,
.anim-slide-fast.collapsed {
    max-height: 0;
    opacity: 0;
}

/* =================================================================== */
/* Show/Hide Utilities                                                  */
/* =================================================================== */

/* Animated show/hide - use with d-none toggle */
.anim-show {
    animation: anim-show-keyframes 0.3s ease forwards;
}

.anim-hide {
    animation: anim-hide-keyframes 0.3s ease forwards;
}

@keyframes anim-show-keyframes {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes anim-hide-keyframes {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* =================================================================== */
/* Scroll-to-Top Button Animation                                       */
/* =================================================================== */

/* Specific for #toTop button */
#toTop {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#toTop.visible,
#toTop.show {
    opacity: 1;
    visibility: visible;
}

/* =================================================================== */
/* Search Result Dropdown Animation                                     */
/* =================================================================== */

#searchresult {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.25s ease;
}

#searchresult.show,
#searchresult.expanded {
    max-height: 500px; /* Adjust based on expected content */
    opacity: 1;
}

/* Knowledgebase search */
#searchKnowledgebase {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.25s ease-out, opacity 0.2s ease;
}

#searchKnowledgebase.show,
#searchKnowledgebase.expanded {
    max-height: 300px;
    opacity: 1;
}

/* =================================================================== */
/* Model List Slide Animation                                           */
/* =================================================================== */

#modelslist {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.25s ease;
}

#modelslist.show,
#modelslist.expanded {
    max-height: 400px;
    opacity: 1;
}

/* =================================================================== */
/* Password Strength Indicator                                          */
/* =================================================================== */

.password-strength {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.password-strength.show,
.password-strength.visible {
    opacity: 1;
    max-height: 100px;
}

/* =================================================================== */
/* Compare View Animation - DEPRECATED (feature removed)               */
/* =================================================================== */
/*
#viewCompare {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

#viewCompare.show,
#viewCompare.visible {
    opacity: 1;
    visibility: visible;
}
*/

/* =================================================================== */
/* Catalog/Tree Expansion Animation                                     */
/* =================================================================== */

#catloglist ul {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.25s ease;
}

#catloglist ul.show,
#catloglist ul.expanded {
    max-height: 2000px; /* Large value for nested lists */
    opacity: 1;
}

/* =================================================================== */
/* Services Table Row Animation                                         */
/* =================================================================== */

.services tr {
    transition: opacity 0.2s ease;
}

.services tr.anim-hidden {
    display: none;
}

/* =================================================================== */
/* Callback/Alert Animations                                            */
/* =================================================================== */

.callback-alert,
.alert-animated {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.callback-alert.show,
.alert-animated.show {
    opacity: 1;
    max-height: 200px;
}

/* =================================================================== */
/* Search Content Animation                                             */
/* =================================================================== */

.serchcontent {
    overflow: hidden;
    max-height: 500px;
    opacity: 1;
    transition: max-height 0.2s ease-out, opacity 0.15s ease;
}

.serchcontent.collapsed,
.serchcontent.hidden {
    max-height: 0;
    opacity: 0;
}

/* =================================================================== */
/* Generic Transition Utilities                                         */
/* =================================================================== */

/* Use these with Bootstrap 5's d-none for JS-controlled visibility */
.transition-opacity {
    transition: opacity 0.3s ease;
}

.transition-all {
    transition: all 0.3s ease;
}

.transition-fast {
    transition-duration: 0.15s !important;
}

.transition-slow {
    transition-duration: 0.5s !important;
}

/* Opacity states */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* =================================================================== */
/* Reduced Motion Support                                               */
/* =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .anim-fade,
    .anim-fade-fast,
    .anim-fade-slow,
    .anim-slide,
    .anim-slide-fast,
    #toTop,
    #searchresult,
    #searchKnowledgebase,
    #modelslist,
    .password-strength,
    /* #viewCompare - DEPRECATED */
    #catloglist ul,
    .callback-alert,
    .alert-animated,
    .serchcontent,
    .transition-opacity,
    .transition-all {
        transition: none !important;
        animation: none !important;
    }
}