/**
 * Touch (تاچ) - Smart Contact Hub Widget Animations
 * 6 animation types for widget entrance and exit
 * 
 * @package Touch
 * @version 1.0.0
 */

/* ============================================
   Animation Base
   ============================================ */

.tch-widget.tch-animating {
    pointer-events: none;
}

/* ============================================
   ANIMATION 1: Fade
   ============================================ */

.tch-widget.tch-fade-in {
    animation: tch-fade-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-fade-out {
    animation: tch-fade-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes tch-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ============================================
   ANIMATION 2: Zoom
   ============================================ */

.tch-widget.tch-zoom-in {
    animation: tch-zoom-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-zoom-out {
    animation: tch-zoom-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-zoom-in {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tch-zoom-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Adjust for middle positioned widgets */
.tch-widget.tch-position-middle-right.tch-zoom-in,
.tch-widget.tch-position-middle-left.tch-zoom-in {
    animation: tch-zoom-in-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-position-middle-right.tch-zoom-out,
.tch-widget.tch-position-middle-left.tch-zoom-out {
    animation: tch-zoom-out-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-zoom-in-middle {
    from {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes tch-zoom-out-middle {
    from {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }
}

/* ============================================
   ANIMATION 3: Slide Up
   ============================================ */

.tch-widget.tch-slide-up-in {
    animation: tch-slide-up-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-slide-up-out {
    animation: tch-slide-up-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-up-in {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tch-slide-up-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100px);
    }
}

/* Adjust for middle positioned widgets */
.tch-widget.tch-position-middle-right.tch-slide-up-in,
.tch-widget.tch-position-middle-left.tch-slide-up-in {
    animation: tch-slide-up-in-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-position-middle-right.tch-slide-up-out,
.tch-widget.tch-position-middle-left.tch-slide-up-out {
    animation: tch-slide-up-out-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-up-in-middle {
    from {
        opacity: 0;
        transform: translateY(calc(-50% + 100px));
    }
    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

@keyframes tch-slide-up-out-middle {
    from {
        opacity: 1;
        transform: translateY(-50%);
    }
    to {
        opacity: 0;
        transform: translateY(calc(-50% + 100px));
    }
}

/* ============================================
   ANIMATION 4: Slide Left
   ============================================ */

.tch-widget.tch-slide-left-in {
    animation: tch-slide-left-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-slide-left-out {
    animation: tch-slide-left-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-left-in {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tch-slide-left-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Adjust for middle positioned widgets */
.tch-widget.tch-position-middle-right.tch-slide-left-in,
.tch-widget.tch-position-middle-left.tch-slide-left-in {
    animation: tch-slide-left-in-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-position-middle-right.tch-slide-left-out,
.tch-widget.tch-position-middle-left.tch-slide-left-out {
    animation: tch-slide-left-out-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-left-in-middle {
    from {
        opacity: 0;
        transform: translate(100px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@keyframes tch-slide-left-out-middle {
    from {
        opacity: 1;
        transform: translate(0, -50%);
    }
    to {
        opacity: 0;
        transform: translate(100px, -50%);
    }
}

/* ============================================
   ANIMATION 5: Slide Right
   ============================================ */

.tch-widget.tch-slide-right-in {
    animation: tch-slide-right-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-slide-right-out {
    animation: tch-slide-right-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-right-in {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tch-slide-right-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-100px);
    }
}

/* Adjust for middle positioned widgets */
.tch-widget.tch-position-middle-right.tch-slide-right-in,
.tch-widget.tch-position-middle-left.tch-slide-right-in {
    animation: tch-slide-right-in-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-position-middle-right.tch-slide-right-out,
.tch-widget.tch-position-middle-left.tch-slide-right-out {
    animation: tch-slide-right-out-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-slide-right-in-middle {
    from {
        opacity: 0;
        transform: translate(-100px, -50%);
    }
    to {
        opacity: 1;
        transform: translate(0, -50%);
    }
}

@keyframes tch-slide-right-out-middle {
    from {
        opacity: 1;
        transform: translate(0, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-100px, -50%);
    }
}

/* ============================================
   ANIMATION 6: Bounce
   ============================================ */

.tch-widget.tch-bounce-in {
    animation: tch-bounce-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-bounce-out {
    animation: tch-bounce-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-bounce-in {
    0% {
        opacity: 0;
        transform: scale(0.3) translateY(0);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-10px);
    }
    70% {
        transform: scale(0.95) translateY(0);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes tch-bounce-out {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 0;
        transform: scale(0.3) translateY(20px);
    }
}

/* Adjust for middle positioned widgets */
.tch-widget.tch-position-middle-right.tch-bounce-in,
.tch-widget.tch-position-middle-left.tch-bounce-in {
    animation: tch-bounce-in-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-position-middle-right.tch-bounce-out,
.tch-widget.tch-position-middle-left.tch-bounce-out {
    animation: tch-bounce-out-middle var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-bounce-in-middle {
    0% {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.05);
    }
    70% {
        transform: translateY(-50%) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
}

@keyframes tch-bounce-out-middle {
    0% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
    }
    30% {
        transform: translateY(-50%) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) scale(0.3);
    }
}

/* ============================================
   Bottom Bar Animation
   ============================================ */

.tch-widget.tch-style-bottom-bar.tch-slide-up-in {
    animation: tch-bottom-bar-slide-in var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-out) forwards;
}

.tch-widget.tch-style-bottom-bar.tch-slide-up-out {
    animation: tch-bottom-bar-slide-out var(--tch-transition-speed, 300ms) var(--tch-transition-easing, ease-in) forwards;
}

@keyframes tch-bottom-bar-slide-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes tch-bottom-bar-slide-out {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .tch-widget.tch-fade-in,
    .tch-widget.tch-fade-out,
    .tch-widget.tch-zoom-in,
    .tch-widget.tch-zoom-out,
    .tch-widget.tch-slide-up-in,
    .tch-widget.tch-slide-up-out,
    .tch-widget.tch-slide-left-in,
    .tch-widget.tch-slide-left-out,
    .tch-widget.tch-slide-right-in,
    .tch-widget.tch-slide-right-out,
    .tch-widget.tch-bounce-in,
    .tch-widget.tch-bounce-out {
        animation: none !important;
        transition: opacity 0.01ms !important;
    }
}

/* ============================================
   Panel Open/Close Animations
   ============================================ */

.tch-widget-panel.tch-panel-fade-in {
    animation: tch-panel-fade-in 200ms ease-out forwards;
}

.tch-widget-panel.tch-panel-fade-out {
    animation: tch-panel-fade-out 200ms ease-in forwards;
}

@keyframes tch-panel-fade-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tch-panel-fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ============================================
   Channel List Animation
   ============================================ */

.tch-widget-channel,
.tch-channel {
    opacity: 0;
    animation: tch-channel-fade-in 200ms ease-out forwards;
}

.tch-widget-channel:nth-child(1), .tch-channel:nth-child(1) { animation-delay: 50ms; }
.tch-widget-channel:nth-child(2), .tch-channel:nth-child(2) { animation-delay: 100ms; }
.tch-widget-channel:nth-child(3), .tch-channel:nth-child(3) { animation-delay: 150ms; }
.tch-widget-channel:nth-child(4), .tch-channel:nth-child(4) { animation-delay: 200ms; }
.tch-widget-channel:nth-child(5), .tch-channel:nth-child(5) { animation-delay: 250ms; }
.tch-widget-channel:nth-child(6), .tch-channel:nth-child(6) { animation-delay: 300ms; }
.tch-widget-channel:nth-child(7), .tch-channel:nth-child(7) { animation-delay: 350ms; }
.tch-widget-channel:nth-child(8), .tch-channel:nth-child(8) { animation-delay: 400ms; }
.tch-widget-channel:nth-child(9), .tch-channel:nth-child(9) { animation-delay: 450ms; }
.tch-widget-channel:nth-child(10), .tch-channel:nth-child(10) { animation-delay: 500ms; }

@keyframes tch-channel-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Disable channel stagger animation on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tch-widget-channel,
    .tch-channel {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ============================================
   Pulse Animation for Attention
   ============================================ */

.tch-widget-button.tch-pulse {
    animation: tch-pulse 2s ease-in-out infinite;
}

@keyframes tch-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 20px rgba(59, 130, 246, 0);
    }
}

/* Disable pulse on reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tch-widget-button.tch-pulse {
        animation: none !important;
    }
}