/* ===== 萌趣四川文旅 - 增强动画样式库 ===== */
/* {{CHENGQI:
   Action: Created
   Timestamp: 2025-01-27 22:45:00 +08:00
   Reason: 为四川文旅网站添加舒适的交互动画效果
   Principle_Applied: KISS - 使用简洁的CSS3动画；DRY - 创建可复用动画类
   Optimization: 使用transform和opacity进行硬件加速，避免重排重绘
   Architectural_Note (AR): 模块化动画系统，易于维护和扩展
   Documentation_Note (DW): 包含完整的动画效果库和使用说明
}} */

/* ===== 基础动画配置 ===== */
.animate-element {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  will-change: transform, opacity;
}

.animate-element.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 入场动画效果库 ===== */

/* 1. 淡入上升 - 最基础舒适的效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* 2. 从左滑入 - 适合时间轴效果 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInLeft {
  animation: slideInLeft 0.7s ease-out forwards;
}

/* 3. 从右滑入 - 平衡左滑效果 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-slideInRight {
  animation: slideInRight 0.7s ease-out forwards;
}

/* 4. 弹跳进入 - 萌趣效果 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3) translateY(-30px);
  }
  50% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  70% {
    transform: scale(0.9) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.animate-bounceIn {
  animation: bounceIn 1.0s ease-out forwards;
}

/* 5. 缩放进入 - 图片展示效果 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-zoomIn {
  animation: zoomIn 0.6s ease-out forwards;
}

/* 6. 旋转进入 - 特殊效果 */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-200deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.animate-rotateIn {
  animation: rotateIn 0.9s ease-out forwards;
}

/* 7. X轴翻转进入 - 卡片效果 */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

.animate-flipInX {
  animation: flipInX 1.0s ease-out forwards;
}

/* 8. Y轴翻转进入 */
@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}

.animate-flipInY {
  animation: flipInY 1.0s ease-out forwards;
}

/* 9. 从下方滑入 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideInUp {
  animation: slideInUp 0.8s ease-out forwards;
}

/* 10. 从上方滑入 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slideInDown {
  animation: slideInDown 0.8s ease-out forwards;
}

/* 11. 心跳效果 - 特殊萌趣动画 */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out forwards;
}

/* 12. 摆动效果 - 民俗风情 */
@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.animate-wiggle {
  animation: wiggle 0.8s ease-in-out forwards;
}

/* 13. 发光效果 - 特殊强调 */
@keyframes glow {
  from {
    opacity: 0;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0);
  }
  to {
    opacity: 1;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
}

.animate-glow {
  animation: glow 1.0s ease-out forwards;
}

/* 14. 弹性进入 - 更强的弹跳效果 */
@keyframes elasticIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  40% {
    transform: scale(1.1);
  }
  60% {
    transform: scale(0.9);
  }
  80% {
    transform: scale(1.03);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-elasticIn {
  animation: elasticIn 1.2s ease-out forwards;
}

/* 15. 渐进展开 - 宽度动画 */
@keyframes expandWidth {
  from {
    opacity: 0;
    width: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    width: 100%;
    transform: scaleX(1);
  }
}

.animate-expandWidth {
  animation: expandWidth 1.0s ease-out forwards;
}

/* ===== 延迟动画类 ===== */
.animate-delay-100 { animation-delay: 0.1s; }
.animate-delay-200 { animation-delay: 0.2s; }
.animate-delay-300 { animation-delay: 0.3s; }
.animate-delay-400 { animation-delay: 0.4s; }
.animate-delay-500 { animation-delay: 0.5s; }
.animate-delay-600 { animation-delay: 0.6s; }
.animate-delay-700 { animation-delay: 0.7s; }
.animate-delay-800 { animation-delay: 0.8s; }
.animate-delay-900 { animation-delay: 0.9s; }
.animate-delay-1000 { animation-delay: 1.0s; }

/* ===== 持续动画效果 ===== */

/* 浮动效果 - 用于强调元素 */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* 脉冲效果 - 增强版 */
@keyframes pulseEnhanced {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pulseEnhanced {
  animation: pulseEnhanced 2s ease-in-out infinite;
}

/* 呼吸效果 - 温和的持续动画 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.animate-breathe {
  animation: breathe 4s ease-in-out infinite;
}

/* ===== 特殊交互动画 ===== */

/* 悬停放大效果 - 增强版 */
.hover-scale {
  transition: transform 0.3s ease-out;
}

.hover-scale:hover {
  transform: scale(1.08);
}

/* 悬停发光效果 */
.hover-glow {
  transition: all 0.3s ease-out;
}

.hover-glow:hover {
  box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
  transform: translateY(-2px);
}

/* 悬停旋转效果 */
.hover-rotate {
  transition: transform 0.3s ease-out;
}

.hover-rotate:hover {
  transform: rotate(5deg);
}

/* ===== 响应式动画设置 ===== */

/* 尊重用户的动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-element {
    opacity: 1;
    transform: none;
  }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .animate-element {
    animation-duration: 0.5s;
  }
  
  [class*="animate-"] {
    animation-duration: 0.5s !important;
  }
}

/* ===== 工具类 ===== */

/* 隐藏待动画元素 */
.animate-hidden {
  opacity: 0;
  visibility: hidden;
}

/* 显示动画元素 */
.animate-visible {
  opacity: 1;
  visibility: visible;
}

/* 禁用动画 */
.no-animation {
  animation: none !important;
  transition: none !important;
}

/* 硬件加速优化 */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* ===== 自定义萌趣动画组合 ===== */

/* 萌趣弹跳组合 */
.cute-bounce {
  animation: 
    fadeInUp 0.6s ease-out,
    bounceIn 0.8s ease-out 0.2s,
    breathe 3s ease-in-out 1s infinite;
}

/* 优雅滑入组合 */
.elegant-slide {
  animation:
    slideInLeft 0.7s ease-out,
    float 4s ease-in-out 0.7s infinite;
}

/* 活力缩放组合 */
.vibrant-zoom {
  animation:
    zoomIn 0.6s ease-out,
    pulseEnhanced 2.5s ease-in-out 0.8s infinite;
}

/* ===== 页面特定动画 ===== */

/* 时间轴专用动画 */
.timeline-item {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 0.8s ease-out;
}

.timeline-item.animate-in {
  opacity: 1;
  transform: translateX(0);
}

.timeline-item:nth-child(even) {
  transform: translateX(30px);
}

.timeline-item:nth-child(even).animate-in {
  transform: translateX(0);
}

/* 网格卡片专用动画 */
.card-grid-item {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.6s ease-out;
}

.card-grid-item.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 瀑布流专用动画 */
.waterfall-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease-out;
}

.waterfall-item.animate-in {
  opacity: 1;
  transform: translateY(0);
}