/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * BALAM AI - Alpine.js Transition Utilities
 * ═══════════════════════════════════════════════════════════════════════════════
 *
 * A comprehensive collection of reusable Alpine.js transition classes for smooth
 * animations throughout the application. These classes work with Alpine.js
 * x-transition directives to provide consistent, performant animations.
 *
 * USAGE WITH ALPINE.JS:
 *   <div x-show="open"
 *        x-transition:enter="dropdown-enter"
 *        x-transition:enter-start="dropdown-enter-start"
 *        x-transition:enter-end="dropdown-enter-end"
 *        x-transition:leave="dropdown-leave"
 *        x-transition:leave-start="dropdown-leave-start"
 *        x-transition:leave-end="dropdown-leave-end">
 *     Content
 *   </div>
 *
 * TRANSITION TYPES:
 *   1. Dropdown - Slide down with scale (for menus)
 *   2. Fade - Simple opacity transition
 *   3. Slide - Directional slide animations
 *   4. Scale - Zoom in/out effects
 *   5. Modal - Combined fade + scale for dialogs
 *   6. Collapse - Height-based accordion animations
 *   7. Notification - Slide + fade for toasts
 *
 * ═══════════════════════════════════════════════════════════════════════════════
 */


/* =============================================================================
   1. DROPDOWN TRANSITIONS
   Used for dropdown menus, popover menus, and context menus.
   Provides a subtle slide-down with scale effect.
   ============================================================================= */

.dropdown-enter {
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.dropdown-enter-start {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
}
.dropdown-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dropdown-leave {
    transition: opacity 100ms ease-in, transform 100ms ease-in;
}
.dropdown-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dropdown-leave-end {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
}

/* Dropdown Up Variant - For menus that appear above their trigger */
.dropdown-up-enter {
    transition: opacity 150ms ease-out, transform 150ms ease-out;
}
.dropdown-up-enter-start {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
}
.dropdown-up-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dropdown-up-leave {
    transition: opacity 100ms ease-in, transform 100ms ease-in;
}
.dropdown-up-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.dropdown-up-leave-end {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
}


/* =============================================================================
   2. FADE TRANSITIONS
   Simple opacity-based transitions for subtle show/hide effects.
   ============================================================================= */

/* Standard Fade */
.fade-enter {
    transition: opacity 200ms ease-out;
}
.fade-enter-start {
    opacity: 0;
}
.fade-enter-end {
    opacity: 1;
}
.fade-leave {
    transition: opacity 150ms ease-in;
}
.fade-leave-start {
    opacity: 1;
}
.fade-leave-end {
    opacity: 0;
}

/* Fast Fade - For quick transitions */
.fade-fast-enter {
    transition: opacity 100ms ease-out;
}
.fade-fast-enter-start {
    opacity: 0;
}
.fade-fast-enter-end {
    opacity: 1;
}
.fade-fast-leave {
    transition: opacity 75ms ease-in;
}
.fade-fast-leave-start {
    opacity: 1;
}
.fade-fast-leave-end {
    opacity: 0;
}

/* Slow Fade - For emphasized transitions */
.fade-slow-enter {
    transition: opacity 300ms ease-out;
}
.fade-slow-enter-start {
    opacity: 0;
}
.fade-slow-enter-end {
    opacity: 1;
}
.fade-slow-leave {
    transition: opacity 200ms ease-in;
}
.fade-slow-leave-start {
    opacity: 1;
}
.fade-slow-leave-end {
    opacity: 0;
}


/* =============================================================================
   3. SLIDE TRANSITIONS
   Directional slide animations for panels, drawers, and sidebars.
   ============================================================================= */

/* Slide Down */
.slide-down-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.slide-down-enter-start {
    opacity: 0;
    transform: translateY(-16px);
}
.slide-down-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.slide-down-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.slide-down-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.slide-down-leave-end {
    opacity: 0;
    transform: translateY(-16px);
}

/* Slide Up */
.slide-up-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.slide-up-enter-start {
    opacity: 0;
    transform: translateY(16px);
}
.slide-up-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.slide-up-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.slide-up-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.slide-up-leave-end {
    opacity: 0;
    transform: translateY(16px);
}

/* Slide Left */
.slide-left-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.slide-left-enter-start {
    opacity: 0;
    transform: translateX(16px);
}
.slide-left-enter-end {
    opacity: 1;
    transform: translateX(0);
}
.slide-left-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.slide-left-leave-start {
    opacity: 1;
    transform: translateX(0);
}
.slide-left-leave-end {
    opacity: 0;
    transform: translateX(16px);
}

/* Slide Right */
.slide-right-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.slide-right-enter-start {
    opacity: 0;
    transform: translateX(-16px);
}
.slide-right-enter-end {
    opacity: 1;
    transform: translateX(0);
}
.slide-right-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.slide-right-leave-start {
    opacity: 1;
    transform: translateX(0);
}
.slide-right-leave-end {
    opacity: 0;
    transform: translateX(-16px);
}


/* =============================================================================
   4. SCALE TRANSITIONS
   Zoom-based transitions for emphasis and attention.
   ============================================================================= */

/* Scale (Center) */
.scale-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.scale-enter-start {
    opacity: 0;
    transform: scale(0.9);
}
.scale-enter-end {
    opacity: 1;
    transform: scale(1);
}
.scale-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.scale-leave-start {
    opacity: 1;
    transform: scale(1);
}
.scale-leave-end {
    opacity: 0;
    transform: scale(0.9);
}

/* Scale Up - Grows from smaller */
.scale-up-enter {
    transition: opacity 200ms ease-out, transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-up-enter-start {
    opacity: 0;
    transform: scale(0.75);
}
.scale-up-enter-end {
    opacity: 1;
    transform: scale(1);
}
.scale-up-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.scale-up-leave-start {
    opacity: 1;
    transform: scale(1);
}
.scale-up-leave-end {
    opacity: 0;
    transform: scale(0.75);
}

/* Scale Down - Shrinks from larger */
.scale-down-enter {
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.scale-down-enter-start {
    opacity: 0;
    transform: scale(1.1);
}
.scale-down-enter-end {
    opacity: 1;
    transform: scale(1);
}
.scale-down-leave {
    transition: opacity 150ms ease-in, transform 150ms ease-in;
}
.scale-down-leave-start {
    opacity: 1;
    transform: scale(1);
}
.scale-down-leave-end {
    opacity: 0;
    transform: scale(1.1);
}


/* =============================================================================
   5. MODAL TRANSITIONS
   Combined fade + scale for dialog boxes and modal overlays.
   ============================================================================= */

/* Modal Backdrop */
.modal-backdrop-enter {
    transition: opacity 300ms ease-out;
}
.modal-backdrop-enter-start {
    opacity: 0;
}
.modal-backdrop-enter-end {
    opacity: 1;
}
.modal-backdrop-leave {
    transition: opacity 200ms ease-in;
}
.modal-backdrop-leave-start {
    opacity: 1;
}
.modal-backdrop-leave-end {
    opacity: 0;
}

/* Modal Content */
.modal-enter {
    transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-enter-start {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
}
.modal-enter-end {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.modal-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.modal-leave-start {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.modal-leave-end {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
}

/* Modal Slide Up - For bottom sheets */
.modal-slide-up-enter {
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.modal-slide-up-enter-start {
    opacity: 0;
    transform: translateY(100%);
}
.modal-slide-up-enter-end {
    opacity: 1;
    transform: translateY(0);
}
.modal-slide-up-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.modal-slide-up-leave-start {
    opacity: 1;
    transform: translateY(0);
}
.modal-slide-up-leave-end {
    opacity: 0;
    transform: translateY(100%);
}


/* =============================================================================
   6. COLLAPSE/ACCORDION TRANSITIONS
   Height-based animations for expandable sections.
   Note: These require JavaScript to set explicit heights.
   ============================================================================= */

.collapse-enter {
    transition: opacity 200ms ease-out, max-height 200ms ease-out;
    overflow: hidden;
}
.collapse-enter-start {
    opacity: 0;
    max-height: 0;
}
.collapse-enter-end {
    opacity: 1;
    max-height: var(--collapse-height, 500px);
}
.collapse-leave {
    transition: opacity 150ms ease-in, max-height 150ms ease-in;
    overflow: hidden;
}
.collapse-leave-start {
    opacity: 1;
    max-height: var(--collapse-height, 500px);
}
.collapse-leave-end {
    opacity: 0;
    max-height: 0;
}


/* =============================================================================
   7. NOTIFICATION/TOAST TRANSITIONS
   Slide + fade for toast notifications and alerts.
   ============================================================================= */

/* Toast from Top */
.toast-top-enter {
    transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast-top-enter-start {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
}
.toast-top-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast-top-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.toast-top-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast-top-leave-end {
    opacity: 0;
    transform: translateY(-100%) scale(0.9);
}

/* Toast from Bottom */
.toast-bottom-enter {
    transition: opacity 300ms ease-out, transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toast-bottom-enter-start {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
}
.toast-bottom-enter-end {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast-bottom-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.toast-bottom-leave-start {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.toast-bottom-leave-end {
    opacity: 0;
    transform: translateY(100%) scale(0.9);
}

/* Toast from Right */
.toast-right-enter {
    transition: opacity 300ms ease-out, transform 300ms ease-out;
}
.toast-right-enter-start {
    opacity: 0;
    transform: translateX(100%);
}
.toast-right-enter-end {
    opacity: 1;
    transform: translateX(0);
}
.toast-right-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.toast-right-leave-start {
    opacity: 1;
    transform: translateX(0);
}
.toast-right-leave-end {
    opacity: 0;
    transform: translateX(100%);
}


/* =============================================================================
   8. SPECIAL EFFECT TRANSITIONS
   Unique transitions for special use cases.
   ============================================================================= */

/* Flip Horizontal */
.flip-enter {
    transition: opacity 300ms ease-out, transform 300ms ease-out;
    perspective: 1000px;
}
.flip-enter-start {
    opacity: 0;
    transform: rotateY(-90deg);
}
.flip-enter-end {
    opacity: 1;
    transform: rotateY(0);
}
.flip-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
    perspective: 1000px;
}
.flip-leave-start {
    opacity: 1;
    transform: rotateY(0);
}
.flip-leave-end {
    opacity: 0;
    transform: rotateY(90deg);
}

/* Bounce */
.bounce-enter {
    transition: opacity 400ms ease-out, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bounce-enter-start {
    opacity: 0;
    transform: scale(0.3);
}
.bounce-enter-end {
    opacity: 1;
    transform: scale(1);
}
.bounce-leave {
    transition: opacity 200ms ease-in, transform 200ms ease-in;
}
.bounce-leave-start {
    opacity: 1;
    transform: scale(1);
}
.bounce-leave-end {
    opacity: 0;
    transform: scale(0.3);
}


/* =============================================================================
   9. REDUCED MOTION SUPPORT
   Respects user preferences for reduced motion.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    /* Disable all transform transitions */
    [class*="-enter"],
    [class*="-leave"] {
        transition-property: opacity !important;
        transition-duration: 100ms !important;
    }

    [class*="-enter-start"],
    [class*="-leave-end"] {
        transform: none !important;
    }

    [class*="-enter-end"],
    [class*="-leave-start"] {
        transform: none !important;
    }
}