/* 动画关键帧 */
@keyframes tgSlideIn {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes tgFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes tgScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tgBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 动画类 */
.tg-app-open {
    animation: tgSlideIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.tg-fade-in {
    animation: tgFadeIn 0.4s ease-in-out both;
}

.tg-scale-in {
    animation: tgScaleIn 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.tg-bounce-in {
    animation: tgBounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}

/* 延迟动画 */
.tg-delay-1 {
    animation-delay: 0.1s;
}

.tg-delay-2 {
    animation-delay: 0.2s;
}

.tg-delay-3 {
    animation-delay: 0.3s;
}

.tg-delay-4 {
    animation-delay: 0.4s;
}

/* 页面容器动画 */
.tg-page-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
    overflow: hidden;
}

.tg-page-content {
    animation: tgSlideIn 0.6s ease-out both;
}

/* 加载动画 */
.tg-loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top: 4px solid #0088cc;
    border-radius: 50%;
    animation: tgSpin 1s linear infinite;
}

@keyframes tgSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}