/* 动画效果 */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.03);

    }

    100% {

        transform: scale(1);

    }

}



@keyframes glow {

    0% {

        box-shadow: 0 0 5px rgba(170, 136, 57, 0.2);

    }

    50% {

        box-shadow: 0 0 20px rgba(170, 136, 57, 0.5);

    }

    100% {

        box-shadow: 0 0 5px rgba(170, 136, 57, 0.2);

    }

}



@keyframes flicker {

    0%, 100% {

        opacity: 1;

    }

    50% {

        opacity: 0.7;

    }

}



@keyframes floatY {

    0%, 100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-5px);

    }

}



@keyframes borderGlow {

    0%, 100% {

        border-color: #5c4a25;

    }

    50% {

        border-color: #d4af37;

    }

}



/* 应用动画的类 */

.animated {

    animation-duration: 1.2s;

    animation-fill-mode: both;

}



.fade-in {

    animation-name: fadeIn;

}



.slide-in-right {

    animation-name: slideInRight;

}



.pulse {

    animation-name: pulse;

    animation-duration: 3s;

    animation-iteration-count: infinite;

}



.glow {

    animation-name: glow;

    animation-duration: 3s;

    animation-iteration-count: infinite;

}



.flicker {

    animation-name: flicker;

    animation-duration: 4s;

    animation-iteration-count: infinite;

}



.float-y {

    animation-name: floatY;

    animation-duration: 4s;

    animation-iteration-count: infinite;

}



.border-glow {

    animation-name: borderGlow;

    animation-duration: 3s;

    animation-iteration-count: infinite;

}



/* 延迟类 */

.delay-1 {

    animation-delay: 0.1s;

}



.delay-2 {

    animation-delay: 0.2s;

}



.delay-3 {

    animation-delay: 0.3s;

}



.delay-4 {

    animation-delay: 0.4s;

}



.delay-5 {

    animation-delay: 0.5s;

}



/* 网页元素动画效果 */

.game-title {

    animation: fadeIn 1.5s ease-out, glow 3s infinite;

}



.game-subtitle {

    animation: fadeIn 1.5s ease-out 0.3s backwards;

}



.feature-text {

    animation: fadeIn 1.5s ease-out 0.5s backwards;

}



.download-btn {

    animation: pulse 3s infinite;

}



.download-btn:hover {

    animation: glow 1.5s infinite;

}



.feature-item {

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.8s ease;

}



.feature-item.animated {

    opacity: 1;

    transform: translateY(0);

}



.feature-item:hover i {

    animation: floatY 2s infinite;

}



.version-info {

    animation: fadeIn 1.5s ease-out 0.7s backwards;

}



.highlight {

    animation: flicker 4s infinite;

}



/* 导航和浮动菜单效果 */

#Floatingbar {

    transition: all 0.5s ease;

}



#Floatingbar.hidden-bar {

    right: -157px;

}



#Floatingbar .btn {

    transition: all 0.5s ease;

}



/* 悬停效果 */

.hover-grow {

    transition: all 0.5s ease;

}



.hover-grow:hover {

    transform: scale(1.03);

}



.scroll-decoration {

    animation: fadeIn 1.5s ease-out 0.3s backwards;

}



/* 响应式动画调整 */

@media screen and (max-width: 768px) {

    .game-title, .game-subtitle, .feature-text, .version-info {

        animation-duration: 1s;

    }

    

    .feature-item {

        transition: all 0.5s ease;

    }

}