/**
 * TecnoMicro Login Pro - Animações
 * Versão: 7.0.0
 */

/* Fade In Up */
@keyframes tmFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down */
@keyframes tmFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes tmFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Shake (erro) */
@keyframes tmShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Pulse */
@keyframes tmPulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Bounce */
@keyframes tmBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Glow */
@keyframes tmGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 115, 170, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 115, 170, 0.8);
    }
}

/* Slide In Right */
@keyframes tmSlideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Slide In Left */
@keyframes tmSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Zoom In */
@keyframes tmZoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Classes utilitárias para aplicar animações */
.tm-animate-fadeInUp {
    animation: tmFadeInUp 0.5s ease-out;
}

.tm-animate-fadeInDown {
    animation: tmFadeInDown 0.5s ease-out;
}

.tm-animate-fadeIn {
    animation: tmFadeIn 0.5s ease-out;
}

.tm-animate-shake {
    animation: tmShake 0.5s ease-out;
}

.tm-animate-pulse {
    animation: tmPulse 1s ease-in-out infinite;
}

.tm-animate-bounce {
    animation: tmBounce 1s ease-out;
}

.tm-animate-glow {
    animation: tmGlow 2s ease-in-out infinite;
}

.tm-animate-slideInRight {
    animation: tmSlideInRight 0.5s ease-out;
}

.tm-animate-slideInLeft {
    animation: tmSlideInLeft 0.5s ease-out;
}

.tm-animate-zoomIn {
    animation: tmZoomIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Transições suaves para mudança de estado */
.tm-transition-smooth {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tm-transition-fast {
    transition: all 0.2s ease;
}

.tm-transition-slow {
    transition: all 0.5s ease;
}

/* Loading dots animation */
@keyframes tmDots {
    0%, 20% {
        color: rgba(0, 115, 170, 0.4);
    }
    40% {
        color: var(--tm-primary-color);
    }
    60%, 100% {
        color: rgba(0, 115, 170, 0.4);
    }
}

.tm-loading-dots span {
    animation: tmDots 1.4s infinite;
}

.tm-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.tm-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Skeleton loading */
@keyframes tmSkeleton {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: calc(200px + 100%) 0;
    }
}

.tm-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200px 100%;
    animation: tmSkeleton 1.5s ease-in-out infinite;
}

/* Hover effects */
.tm-hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.tm-hover-scale {
    transition: transform 0.3s ease;
}

.tm-hover-scale:hover {
    transform: scale(1.05);
}

/* Progress bar animation */
@keyframes tmProgress {
    from {
        width: 0%;
    }
}

.tm-progress-bar {
    animation: tmProgress 0.6s ease-out;
}