/**
 * Layout Transition Animations
 *
 * Defines shared animation keyframes and transition classes
 * for the responsive layout system.
 */

/* ===========================================
   SLIDE TRANSITIONS
   =========================================== */

/* Slide up (for chat panel on mobile) */
.slide-up-enter {
    transform: translateY(100%);
}

.slide-up-enter-active {
    transform: translateY(0);
    transition: transform var(--transition-slow, 0.4s) var(--ease-in-out, ease-in-out);
}

.slide-up-exit {
    transform: translateY(0);
}

.slide-up-exit-active {
    transform: translateY(100%);
    transition: transform var(--transition-slow, 0.4s) var(--ease-in-out, ease-in-out);
}

/* Slide right (for tray panel) */
.slide-right-enter {
    transform: translateX(100%);
}

.slide-right-enter-active {
    transform: translateX(0);
    transition: transform var(--transition-normal, 0.3s) var(--ease-out, ease-out);
}

.slide-right-exit {
    transform: translateX(0);
}

.slide-right-exit-active {
    transform: translateX(100%);
    transition: transform var(--transition-normal, 0.3s) var(--ease-in, ease-in);
}

/* Slide left (alternative direction) */
.slide-left-enter {
    transform: translateX(-100%);
}

.slide-left-enter-active {
    transform: translateX(0);
    transition: transform var(--transition-normal, 0.3s) var(--ease-out, ease-out);
}

.slide-left-exit {
    transform: translateX(0);
}

.slide-left-exit-active {
    transform: translateX(-100%);
    transition: transform var(--transition-normal, 0.3s) var(--ease-in, ease-in);
}

/* ===========================================
   FADE TRANSITIONS
   =========================================== */

.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity var(--transition-fast, 0.2s) var(--ease-out, ease-out);
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity var(--transition-fast, 0.2s) var(--ease-in, ease-in);
}

/* ===========================================
   SCALE TRANSITIONS
   =========================================== */

.scale-enter {
    transform: scale(0.95);
    opacity: 0;
}

.scale-enter-active {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--transition-fast, 0.2s) var(--ease-out, ease-out),
                opacity var(--transition-fast, 0.2s) var(--ease-out, ease-out);
}

.scale-exit {
    transform: scale(1);
    opacity: 1;
}

.scale-exit-active {
    transform: scale(0.95);
    opacity: 0;
    transition: transform var(--transition-fast, 0.2s) var(--ease-in, ease-in),
                opacity var(--transition-fast, 0.2s) var(--ease-in, ease-in);
}

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

/* Pulse animation (for indicators) */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.05);
    }
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

.animate-slide-in-right {
    animation: slideInRight var(--transition-normal, 0.3s) var(--ease-out, ease-out) forwards;
}

/* Slide out to right */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.animate-slide-out-right {
    animation: slideOutRight var(--transition-normal, 0.3s) var(--ease-in, ease-in) forwards;
}

/* Slide in from bottom */
@keyframes slideInUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.animate-slide-in-up {
    animation: slideInUp var(--transition-slow, 0.4s) var(--ease-in-out, ease-in-out) forwards;
}

/* Slide out to bottom */
@keyframes slideOutDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

.animate-slide-out-down {
    animation: slideOutDown var(--transition-slow, 0.4s) var(--ease-in-out, ease-in-out) forwards;
}

/* ===========================================
   REDUCED MOTION
   Disable all animations for users who prefer reduced motion
   =========================================== */

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

    .slide-up-enter-active,
    .slide-up-exit-active,
    .slide-right-enter-active,
    .slide-right-exit-active,
    .slide-left-enter-active,
    .slide-left-exit-active,
    .fade-enter-active,
    .fade-exit-active,
    .scale-enter-active,
    .scale-exit-active {
        transition: none;
    }

    .animate-pulse,
    .animate-slide-in-right,
    .animate-slide-out-right,
    .animate-slide-in-up,
    .animate-slide-out-down {
        animation: none;
    }
}