/*
初晨摸鱼小站 - 动画效果
各种交互动画和过渡效果
*/

/* 页面进入动画 - 添加浏览器前缀 */
@-webkit-keyframes slideInFromLeft {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-moz-keyframes slideInFromLeft {
    0% {
        -moz-transform: translateX(-100%);
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes slideInFromRight {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-moz-keyframes slideInFromRight {
    0% {
        -moz-transform: translateX(100%);
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        -moz-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

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

/* 应用进入动画 - 添加浏览器兼容性 */
.left-section {
    -webkit-animation: slideInFromLeft 0.8s ease-out;
    -moz-animation: slideInFromLeft 0.8s ease-out;
    -ms-animation: slideInFromLeft 0.8s ease-out;
    animation: slideInFromLeft 0.8s ease-out;
}

/* 修正选择器匹配实际HTML结构 */
.big-cards-section .cards:nth-child(1),
.big-cards-section .cards:nth-child(3) {
    -webkit-animation: slideInFromRight 0.8s ease-out;
    -moz-animation: slideInFromRight 0.8s ease-out;
    -ms-animation: slideInFromRight 0.8s ease-out;
    animation: slideInFromRight 0.8s ease-out;
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
    animation-delay: 0.2s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

.big-cards-section .cards:nth-child(2),
.big-cards-section .cards:nth-child(4) {
    -webkit-animation: slideInFromRight 0.8s ease-out;
    -moz-animation: slideInFromRight 0.8s ease-out;
    -ms-animation: slideInFromRight 0.8s ease-out;
    animation: slideInFromRight 0.8s ease-out;
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    animation-delay: 0.4s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* 小卡片也添加动画 */
.small-cards .small-card {
    -webkit-animation: slideInFromRight 0.6s ease-out;
    -moz-animation: slideInFromRight 0.6s ease-out;
    -ms-animation: slideInFromRight 0.6s ease-out;
    animation: slideInFromRight 0.6s ease-out;
    -webkit-animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
    animation-delay: 0.6s;
    opacity: 0;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/* Logo动画 - 添加浏览器前缀 */
@-webkit-keyframes logoFloat {
    0%, 100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@-moz-keyframes logoFloat {
    0%, 100% {
        -moz-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -moz-transform: translateY(-10px);
        transform: translateY(-10px);
    }
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

#logo-img {
    -webkit-animation: logoFloat 3s ease-in-out infinite;
    -moz-animation: logoFloat 3s ease-in-out infinite;
    -ms-animation: logoFloat 3s ease-in-out infinite;
    animation: logoFloat 3s ease-in-out infinite;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
}

/* 社交图标动画 */
@keyframes socialPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

.social .link:hover {
    animation: socialPulse 0.6s ease-out;
}

/* 卡片悬停动画 */
@keyframes cardGlow {
    0% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    100% {
        box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2), 
                    0 0 20px rgba(102, 126, 234, 0.1);
    }
}

.cards:hover {
    animation: cardGlow 0.3s ease-out forwards;
}

/* 文字打字机效果 */
@keyframes typewriter {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink {
    0%, 50% { border-color: #4A90E2; }
    51%, 100% { border-color: transparent; }
}

.typewriter {
    overflow: hidden;
    border-right: 2px solid #4A90E2;
    white-space: nowrap;
    -webkit-animation: typewriter 2s steps(30) 1s 1 normal both,
                       blink 1s steps(1) infinite;
    -moz-animation: typewriter 2s steps(30) 1s 1 normal both,
                    blink 1s steps(1) infinite;
    animation: typewriter 2s steps(30) 1s 1 normal both,
               blink 1s steps(1) infinite;
}

/* 数字滚动动画 */
@keyframes countUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

.count-animation {
    animation: countUp 0.6s ease-out;
}

/* 引用文字渐变动画 */
@keyframes textShimmer {
    0% {
        background-position: -200% center;
    }
    100% {
        background-position: 200% center;
    }
}

.shimmer-text {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(255, 255, 255, 1) 50%,
        rgba(255, 255, 255, 0.6) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: textShimmer 3s linear infinite;
}

/* 刷新按钮动画 */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.refresh-btn.spinning i {
    animation: spin 1s linear infinite;
}

/* 时间数字翻转动画 */
@keyframes flipInY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: perspective(400px) rotateY(-10deg);
    }
    70% {
        transform: perspective(400px) rotateY(10deg);
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.time-flip {
    animation: flipInY 0.6s ease-out;
}

/* 天气图标动画 */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-15px);
    }
    70% {
        transform: translateY(-7px);
    }
    90% {
        transform: translateY(-3px);
    }
}

.weather-icon-bounce {
    animation: bounce 2s ease-in-out infinite;
}

/* 导航链接滑动动画 */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.nav-link {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.nav-link:hover {
    transform: translateX(5px) scale(1.02);
}

/* 内容区域显示动画 */
@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.content-sections.show {
    animation: slideDown 0.5s ease-out;
}

.content-sections.hide {
    animation: slideDown 0.5s ease-out reverse;
}

/* 碎碎念项目动画 */
@keyframes staggerIn {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.suisui-item:nth-child(1) {
    animation: staggerIn 0.6s ease-out 0.1s both;
}

.suisui-item:nth-child(2) {
    animation: staggerIn 0.6s ease-out 0.2s both;
}

.suisui-item:nth-child(3) {
    animation: staggerIn 0.6s ease-out 0.3s both;
}

.suisui-item:nth-child(4) {
    animation: staggerIn 0.6s ease-out 0.4s both;
}

/* 时间轴动画 */
@keyframes drawLine {
    0% {
        height: 0;
    }
    100% {
        height: 100%;
    }
}

.timeline.animate::before {
    animation: drawLine 2s ease-out;
}

@keyframes popIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.timeline-item.animate::before {
    animation: popIn 0.5s ease-out;
}

.timeline-item.animate .timeline-content {
    animation: slideInFromRight 0.6s ease-out;
}

/* 友链动画 */
.friend-item {
    transition: all 0.3s ease;
}

.friend-item:hover {
    transform: translateY(-3px);
}

.friend-avatar {
    transition: all 0.3s ease;
}

.friend-item:hover .friend-avatar {
    transform: rotate(360deg);
}

/* 标签动画 */
@keyframes tagPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tag {
    animation: tagPop 0.3s ease-out;
}

.tag:nth-child(1) { animation-delay: 0.1s; }
.tag:nth-child(2) { animation-delay: 0.2s; }
.tag:nth-child(3) { animation-delay: 0.3s; }
.tag:nth-child(4) { animation-delay: 0.4s; }

/* 返回按钮动画 */
@keyframes bounceIn {
    0% {
        transform: scale(0.3) translateX(100px);
        opacity: 0;
    }
    50% {
        transform: scale(1.05) translateX(0);
    }
    70% {
        transform: scale(0.9) translateX(0);
    }
    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

.back-to-home.show {
    animation: bounceIn 0.6s ease-out;
}

/* 加载动画增强 */
.loading-container.fade-out {
    animation: fadeOut 1s ease-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* 背景切换动画 */
@keyframes backgroundFade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.background.fade-in {
    animation: backgroundFade 2s ease-in-out;
}

/* 粒子效果动画 */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg);
    }
    50% {
        transform: translateY(-20px) rotateX(180deg);
    }
}

.particle {
    animation: float 6s ease-in-out infinite;
}

.particle:nth-child(1) { animation-delay: 0s; }
.particle:nth-child(2) { animation-delay: 2s; }
.particle:nth-child(3) { animation-delay: 4s; }

/* 鼠标跟随效果 */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.3) 0%, transparent 70%);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

/* 进度条动画 */
@keyframes progressBar {
    0% {
        width: 0%;
    }
    100% {
        width: var(--progress);
    }
}

.progress-animation {
    animation: progressBar 2s ease-out;
}

/* 脉冲效果 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

.pulse-effect {
    animation: pulse 2s infinite;
}

/* 响应式动画优化 */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 768px) {
    /* 移动端动画简化 */
    .cards:hover {
        animation: none;
        transform: none;
    }
    
    #logo-img {
        animation-duration: 4s;
    }
    
    .nav-link:hover {
        transform: translateX(3px);
    }
}