/* ===== 动画样式文件 ===== */
/* 本文件包含网站所有动画效果的定义，包括页面加载动画、浮动效果、旋转动画、悬停效果等 */

/* ===== 页面加载动画 ===== */
/* 从下往上淡入动画 - 元素从下方30px位置淡入到原位置 */
@keyframes fadeInUp {
    from {
        opacity: 0; /* 初始透明度为0（完全透明） */
        transform: translateY(30px); /* 初始位置向下偏移30px */
    }
    to {
        opacity: 1; /* 最终透明度为1（完全不透明） */
        transform: translateY(0); /* 最终位置回到原点 */
    }
}

/* 从上往下淡入动画 - 元素从上方30px位置淡入到原位置 */
@keyframes fadeInDown {
    from {
        opacity: 0; /* 初始透明度为0 */
        transform: translateY(-30px); /* 初始位置向上偏移30px */
    }
    to {
        opacity: 1; /* 最终透明度为1 */
        transform: translateY(0); /* 最终位置回到原点 */
    }
}

/* 从左往右淡入动画 - 元素从左侧30px位置淡入到原位置 */
@keyframes fadeInLeft {
    from {
        opacity: 0; /* 初始透明度为0 */
        transform: translateX(-30px); /* 初始位置向左偏移30px */
    }
    to {
        opacity: 1; /* 最终透明度为1 */
        transform: translateX(0); /* 最终位置回到原点 */
    }
}

/* 从右往左淡入动画 - 元素从右侧30px位置淡入到原位置 */
@keyframes fadeInRight {
    from {
        opacity: 0; /* 初始透明度为0 */
        transform: translateX(30px); /* 初始位置向右偏移30px */
    }
    to {
        opacity: 1; /* 最终透明度为1 */
        transform: translateX(0); /* 最终位置回到原点 */
    }
}

/* 缩放淡入动画 - 元素从80%大小缩放到100%同时淡入 */
@keyframes scaleIn {
    from {
        opacity: 0; /* 初始透明度为0 */
        transform: scale(0.8); /* 初始缩放比例为80% */
    }
    to {
        opacity: 1; /* 最终透明度为1 */
        transform: scale(1); /* 最终缩放比例为100% */
    }
}

/* ===== 浮动动画 ===== */
/* 慢速浮动动画 - 元素缓慢上下浮动并轻微旋转，模拟轻柔的漂浮效果 */
@keyframes floatSlow {
    0%, 100% {
        transform: translateY(0px) rotate(0deg); /* 起始和结束位置：原点，无旋转 */
    }
    25% {
        transform: translateY(-15px) rotate(2deg); /* 25%时间点：向上15px，顺时针旋转2度 */
    }
    50% {
        transform: translateY(-5px) rotate(-1deg); /* 50%时间点：向上5px，逆时针旋转1度 */
    }
    75% {
        transform: translateY(-10px) rotate(1deg); /* 75%时间点：向上10px，顺时针旋转1度 */
    }
}

/* 中速浮动动画 - 元素以中等速度浮动，旋转幅度稍大 */
@keyframes floatMedium {
    0%, 100% {
        transform: translateY(0px) rotate(0deg); /* 起始和结束位置：原点，无旋转 */
    }
    33% {
        transform: translateY(-20px) rotate(3deg); /* 33%时间点：向上20px，顺时针旋转3度 */
    }
    66% {
        transform: translateY(8px) rotate(-2deg); /* 66%时间点：向下8px，逆时针旋转2度 */
    }
}

/* 快速浮动动画 - 元素快速上下浮动，旋转幅度最大 */
@keyframes floatFast {
    0%, 100% {
        transform: translateY(0px) rotate(0deg); /* 起始和结束位置：原点，无旋转 */
    }
    50% {
        transform: translateY(-25px) rotate(5deg); /* 50%时间点：向上25px，顺时针旋转5度 */
    }
}

/* ===== 旋转动画 ===== */
/* 360度旋转动画 - 元素绕Z轴顺时针旋转一整圈 */
@keyframes rotate360 {
    from {
        transform: rotate(0deg); /* 起始角度：0度 */
    }
    to {
        transform: rotate(360deg); /* 结束角度：360度（完整一圈） */
    }
}

/* Y轴旋转动画 - 元素绕Y轴旋转，产生翻转效果 */
@keyframes rotateY {
    from {
        transform: rotateY(0deg); /* 起始Y轴旋转角度：0度 */
    }
    to {
        transform: rotateY(360deg); /* 结束Y轴旋转角度：360度 */
    }
}

/* ===== 心跳动画 ===== */
/* 心跳效果动画 - 模拟心脏跳动的节奏，两次快速放大后恢复 */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1); /* 起始和结束：正常大小 */
    }
    14% {
        transform: scale(1.1); /* 第一次心跳：放大到110% */
    }
    28% {
        transform: scale(1); /* 第一次心跳后：恢复正常 */
    }
    42% {
        transform: scale(1.1); /* 第二次心跳：再次放大到110% */
    }
    70% {
        transform: scale(1); /* 第二次心跳后：恢复正常并保持 */
    }
}

/* ===== 脉冲动画 ===== */
/* 脉冲效果动画 - 元素轻微放大缩小并改变透明度，产生呼吸感 */
@keyframes pulse {
    0% {
        transform: scale(1); /* 起始大小：100% */
        opacity: 1; /* 起始透明度：完全不透明 */
    }
    50% {
        transform: scale(1.05); /* 中间状态：放大到105% */
        opacity: 0.8; /* 中间透明度：80%不透明 */
    }
    100% {
        transform: scale(1); /* 结束大小：恢复100% */
        opacity: 1; /* 结束透明度：完全不透明 */
    }
}

/* ===== 摇摆动画 ===== */
/* 摇摆效果动画 - 元素左右摇摆，模拟钟摆或树叶摇摆的效果 */
@keyframes swing {
    0%, 100% {
        transform: rotate(0deg); /* 起始和结束：无旋转 */
    }
    20% {
        transform: rotate(15deg); /* 20%时：向右旋转15度 */
    }
    40% {
        transform: rotate(-10deg); /* 40%时：向左旋转10度 */
    }
    60% {
        transform: rotate(5deg); /* 60%时：向右旋转5度 */
    }
    80% {
        transform: rotate(-5deg); /* 80%时：向左旋转5度 */
    }
}

/* ===== 弹跳动画 ===== */
/* 弹跳效果动画 - 模拟球体弹跳的物理效果，多次弹跳后静止 */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0); /* 在地面位置（多个时间点保持静止） */
    }
    40%, 43% {
        transform: translateY(-20px); /* 第一次弹跳：最高点20px */
    }
    70% {
        transform: translateY(-10px); /* 第二次弹跳：高度减半到10px */
    }
    90% {
        transform: translateY(-4px); /* 第三次弹跳：进一步减小到4px */
    }
}

/* ===== 闪烁动画 ===== */
/* 闪烁效果动画 - 元素透明度和大小同时变化，产生闪烁星光效果 */
@keyframes sparkle {
    0%, 100% {
        opacity: 0.3; /* 起始和结束：30%透明度 */
        transform: scale(0.8); /* 起始和结束：80%大小 */
    }
    50% {
        opacity: 1; /* 中间状态：完全不透明 */
        transform: scale(1.2); /* 中间状态：120%大小 */
    }
}

/* ===== 渐变背景动画 ===== */
/* 渐变背景移动动画 - 背景渐变位置循环移动，产生流动效果 */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%; /* 起始位置：左侧 */
    }
    50% {
        background-position: 100% 50%; /* 中间位置：右侧 */
    }
    100% {
        background-position: 0% 50%; /* 结束位置：回到左侧 */
    }
}

/* ===== 波浪动画 ===== */
/* 波浪效果动画 - 元素上下移动，模拟水波或音波的效果 */
@keyframes wave {
    0%, 100% {
        transform: translateY(0px); /* 起始和结束：原始位置 */
    }
    50% {
        transform: translateY(-15px); /* 中间状态：向上移动15px */
    }
}

/* ===== 彩虹文字动画 ===== */
/* 彩虹色彩循环动画 - 文字颜色在彩虹色谱中循环变化 */
@keyframes rainbow {
    0% { color: #ff6b9d; } /* 粉红色 */
    16% { color: #ffd93d; } /* 金黄色 */
    32% { color: #a8e6cf; } /* 薄荷绿 */
    48% { color: #87ceeb; } /* 天蓝色 */
    64% { color: #c7ceea; } /* 淡紫色 */
    80% { color: #ffb3d1; } /* 浅粉色 */
    100% { color: #ff6b9d; } /* 回到粉红色，形成循环 */
}

/* ===== 动画类应用 ===== */
/* 将上面定义的关键帧动画应用到具体的CSS类中，方便在HTML元素上使用 */

/* 页面加载动画类 - 用于页面元素的入场效果 */
/* 从下往上淡入动画类 - 0.8秒缓出效果，设置初始状态防止闪烁 */
.animate-fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out forwards;
}

/* 确保动画完成后按钮保持可见状态 */
.animate-fade-in-up.animation-complete {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 从上往下淡入动画类 - 0.8秒缓出效果，设置初始状态防止闪烁 */
.animate-fade-in-down {
    opacity: 0;
    transform: translateY(-30px);
    animation: fadeInDown 0.8s ease-out forwards;
}

/* 从左往右淡入动画类 - 0.8秒缓出效果，设置初始状态防止闪烁 */
.animate-fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    animation: fadeInLeft 0.8s ease-out forwards;
}

/* 从右往左淡入动画类 - 0.8秒缓出效果，设置初始状态防止闪烁 */
.animate-fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    animation: fadeInRight 0.8s ease-out forwards;
}

/* 缩放淡入动画类 - 0.6秒缓出效果，比其他淡入动画稍快，设置初始状态防止闪烁 */
.animate-scale-in {
    opacity: 0;
    transform: scale(0.8);
    animation: scaleIn 0.6s ease-out forwards;
}

/* 浮动动画类 - 用于装饰元素的持续浮动效果 */
/* 慢速浮动动画类 - 4秒循环，适合背景装饰元素 */
.animate-float-slow {
    animation: floatSlow 4s ease-in-out infinite;
}

/* 中速浮动动画类 - 3秒循环，适合中等重要的装饰元素 */
.animate-float-medium {
    animation: floatMedium 3s ease-in-out infinite;
}

/* 快速浮动动画类 - 2秒循环，适合需要吸引注意力的元素 */
.animate-float-fast {
    animation: floatFast 2s ease-in-out infinite;
}

/* 旋转动画类 - 用于需要旋转效果的元素 */
/* 360度旋转动画类 - 2秒线性无限循环，适合加载图标或装饰元素 */
.animate-rotate {
    animation: rotate360 2s linear infinite;
}

/* Y轴旋转动画类 - 3秒线性无限循环，产生翻转效果 */
.animate-rotate-y {
    animation: rotateY 3s linear infinite;
}

/* 心跳动画类 - 用于需要吸引注意力的重要元素 */
/* 心跳效果动画类 - 2秒缓入缓出无限循环，模拟心跳节奏 */
.animate-heartbeat {
    animation: heartbeat 2s ease-in-out infinite;
}

/* 脉冲动画类 - 用于按钮或交互元素的呼吸效果 */
/* 脉冲效果动画类 - 2秒缓入缓出无限循环，产生呼吸感 */
.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* 摇摆动画类 - 用于模拟自然摇摆的装饰元素 */
/* 摇摆效果动画类 - 2秒缓入缓出无限循环，模拟钟摆效果 */
.animate-swing {
    animation: swing 2s ease-in-out infinite;
}

/* 弹跳动画类 - 用于活泼的交互反馈 */
/* 弹跳效果动画类 - 2秒无限循环，模拟球体弹跳 */
.animate-bounce {
    animation: bounce 2s infinite;
}

/* 闪烁动画类 - 用于星光或闪烁装饰效果 */
/* 闪烁效果动画类 - 1.5秒缓入缓出无限循环，产生星光闪烁 */
.animate-sparkle {
    animation: sparkle 1.5s ease-in-out infinite;
}

/* 渐变背景动画类 - 用于动态背景效果 */
/* 渐变背景动画类 - 4秒缓动无限循环，背景渐变流动效果 */
.animate-gradient {
    background: linear-gradient(-45deg, #ff6b9d, #ffd93d, #a8e6cf, #87ceeb); /* 四色渐变：粉红-金黄-薄荷绿-天蓝 */
    background-size: 400% 400%; /* 背景尺寸放大4倍，为动画提供空间 */
    animation: gradientShift 4s ease infinite; /* 应用渐变移动动画 */
}

/* 波浪动画类 - 用于模拟水波或音波效果 */
/* 波浪效果动画类 - 2秒缓入缓出无限循环，上下波动 */
.animate-wave {
    animation: wave 2s ease-in-out infinite;
}

/* 彩虹文字动画类 - 用于特殊文字的彩色变化效果 */
/* 彩虹文字动画类 - 3秒线性无限循环，文字颜色在彩虹色谱中变化 */
.animate-rainbow {
    animation: rainbow 3s linear infinite;
}

/* ===== 悬停动画效果 ===== */
/* 鼠标悬停时触发的动画效果，用于增强用户交互体验 */

/* 悬停上浮效果 - 元素向上移动并增加阴影 */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 变换和阴影的过渡效果 */
}

.hover-lift:hover {
    transform: translateY(-5px); /* 悬停时向上移动5px */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* 悬停时增加阴影效果 */
}

/* 悬停缩放效果 - 元素轻微放大 */
.hover-scale {
    transition: transform 0.3s ease; /* 变换的过渡效果 */
}

.hover-scale:hover {
    transform: scale(1.05); /* 悬停时放大到105% */
}

/* 悬停旋转效果 - 元素轻微旋转 */
.hover-rotate {
    transition: transform 0.3s ease; /* 变换的过渡效果 */
}

.hover-rotate:hover {
    transform: rotate(5deg); /* 悬停时顺时针旋转5度 */
}

/* 悬停发光效果 - 元素周围产生光晕 */
.hover-glow {
    transition: box-shadow 0.3s ease; /* 阴影的过渡效果 */
}

.hover-glow:hover {
    box-shadow: 0 0 20px rgba(255, 107, 157, 0.5); /* 悬停时产生粉色光晕效果 */
}

/* ===== 延迟动画类 ===== */
/* 用于创建动画序列效果，让多个元素依次执行动画 */

/* 延迟0.1秒执行动画 - 用于第一个元素的轻微延迟 */
.delay-100 {
    animation-delay: 0.1s;
}

/* 延迟0.2秒执行动画 - 用于第二个元素的延迟 */
.delay-200 {
    animation-delay: 0.2s;
}

/* 延迟0.3秒执行动画 - 用于第三个元素的延迟 */
.delay-300 {
    animation-delay: 0.3s;
}

/* 延迟0.4秒执行动画 - 用于第四个元素的延迟 */
.delay-400 {
    animation-delay: 0.4s;
}

/* 延迟0.5秒执行动画 - 用于第五个元素的延迟 */
.delay-500 {
    animation-delay: 0.5s;
}

/* 延迟0.6秒执行动画 - 用于第六个元素的延迟 */
.delay-600 {
    animation-delay: 0.6s;
}

/* ===== 特殊装饰动画 ===== */
/* 复杂的装饰性动画效果，用于增强页面视觉效果 */

/* 星星闪烁效果 - 创建满天星斗的背景装饰 */
.stars {
    position: relative; /* 相对定位，为伪元素提供定位基准 */
    overflow: hidden; /* 隐藏溢出的星星效果 */
}

/* 星星闪烁效果的实现 - 使用伪元素创建多个星点 */
.stars::before {
    content: ''; /* 空内容的伪元素 */
    position: absolute; /* 绝对定位覆盖整个容器 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 使用径向渐变创建多个星点，每个星点有不同的位置、大小和透明度 */
    background: radial-gradient(2px 2px at 20px 30px, #eee, transparent), /* 第一颗星：灰白色 */
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent), /* 第二颗星：半透明白色 */
                radial-gradient(1px 1px at 90px 40px, #fff, transparent), /* 第三颗星：小白点 */
                radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent), /* 第四颗星：更透明的白色 */
                radial-gradient(2px 2px at 160px 30px, #fff, transparent); /* 第五颗星：白色 */
    background-repeat: repeat; /* 背景重复，创建满天星效果 */
    background-size: 200px 100px; /* 背景尺寸，控制星星分布密度 */
    animation: sparkle 3s linear infinite; /* 应用闪烁动画，3秒线性无限循环 */
    pointer-events: none; /* 不响应鼠标事件，避免干扰用户交互 */
}

/* 星星装饰的后续元素 - 添加额外的星星图标 */
.stars::after {
    content: '✨'; /* 星星emoji图标 */
    position: absolute; /* 绝对定位 */
    bottom: -10px; /* 位于容器底部外侧 */
    right: -10px; /* 位于容器右侧外侧 */
    font-size: 12px; /* 字体大小12px */
    opacity: 0; /* 初始透明 */
    animation: sparkle 2s ease-in-out infinite; /* 闪烁动画，2秒缓入缓出无限循环 */
    animation-delay: 1s; /* 延迟1秒开始，与::before错开 */
}

/* 心形飘落效果 - 创建浪漫的心形下落动画 */
.hearts {
    position: relative; /* 相对定位，为伪元素提供定位基准 */
    overflow: hidden; /* 隐藏溢出的心形 */
}

/* 心形飘落动画的实现 */
.hearts::before {
    content: '💖'; /* 心形emoji图标 */
    position: absolute; /* 绝对定位 */
    top: -20px; /* 从容器顶部上方开始 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 精确居中对齐 */
    font-size: 20px; /* 心形大小 */
    animation: heartFall 3s ease-in infinite; /* 心形下落动画，3秒缓入无限循环 */
}

/* 心形下落动画关键帧 - 从上到下飘落并旋转 */
@keyframes heartFall {
    0% {
        top: -20px; /* 起始位置：容器顶部上方 */
        opacity: 1; /* 完全不透明 */
        transform: translateX(-50%) rotate(0deg); /* 居中且无旋转 */
    }
    100% {
        top: 100%; /* 结束位置：容器底部 */
        opacity: 0; /* 完全透明 */
        transform: translateX(-50%) rotate(360deg); /* 居中且旋转一圈 */
    }
}

/* 彩虹边框动画 - 创建流动的彩虹边框效果 */
.rainbow-border {
    position: relative; /* 相对定位，为伪元素提供定位基准 */
    border-radius: 10px; /* 圆角边框 */
    overflow: hidden; /* 隐藏溢出部分 */
}

/* 彩虹边框的背景层 - 创建彩虹渐变背景 */
.rainbow-border::before {
    content: ''; /* 空内容的伪元素 */
    position: absolute; /* 绝对定位 */
    top: -2px; /* 向上扩展2px */
    left: -2px; /* 向左扩展2px */
    right: -2px; /* 向右扩展2px */
    bottom: -2px; /* 向下扩展2px */
    /* 七色彩虹渐变：红-橙-黄-绿-蓝-靛-紫 */
    background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
    border-radius: inherit; /* 继承父元素的圆角 */
    z-index: -1; /* 置于背景层 */
    animation: gradientShift 3s linear infinite; /* 渐变移动动画，3秒线性无限循环 */
}

/* 彩虹边框的内容层 - 遮盖中间部分，只显示边框 */
.rainbow-border::after {
    content: ''; /* 空内容的伪元素 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 与容器顶部对齐 */
    left: 0; /* 与容器左侧对齐 */
    right: 0; /* 与容器右侧对齐 */
    bottom: 0; /* 与容器底部对齐 */
    background: inherit; /* 继承父元素背景 */
    border-radius: inherit; /* 继承父元素圆角 */
    z-index: -1; /* 置于背景层，但在::before之上 */
}

/* ===== 响应式动画控制 ===== */
/* 根据用户偏好和设备特性调整动画效果，提升用户体验和性能 */

/* 用户偏好：减少动画 - 为有动画敏感或偏好的用户提供无障碍体验 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important; /* 将所有动画时长缩短到几乎瞬间完成 */
        animation-iteration-count: 1 !important; /* 所有动画只执行一次，不循环 */
        transition-duration: 0.01ms !important; /* 将所有过渡效果缩短到几乎瞬间完成 */
    }
}

/* 移动设备优化 - 为移动设备调整动画性能和效果 */
@media (max-width: 768px) {
    /* 页面加载动画在移动设备上缩短时长，提升感知性能 */
    .animate-fade-in-up,
    .animate-fade-in-down,
    .animate-fade-in-left,
    .animate-fade-in-right,
    .animate-scale-in {
        animation-duration: 0.8s; /* 从1秒缩短到0.8秒 */
    }
    
    /* 浮动动画在移动设备上统一调整为3秒，平衡视觉效果和性能 */
    .animate-float-slow,
    .animate-float-medium,
    .animate-float-fast {
        animation-duration: 3s; /* 统一浮动动画时长 */
    }
    
    /* 移动设备上的悬停效果调整 - 减少移动幅度，适应触摸交互 */
    .hover-lift:hover {
        transform: translateY(-3px); /* 从-5px减少到-3px */
    }
    
    /* 移动设备上的缩放效果调整 - 减少缩放比例，避免过度效果 */
    .hover-scale:hover {
        transform: scale(1.03); /* 从1.05减少到1.03 */
    }
}