@import 'variables.css';
/* 图片动画效果优化 */

/* 基础图片样式重置 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 图片加载动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 图片淡入效果 - 已禁用动画 */
.img-fade-in {
  opacity: 1 !important;
  animation: none !important;
}

/* 图片悬停放大效果 */
@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

.img-zoom-hover {
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.img-zoom-hover:hover {
  transform: scale(1.05);
  z-index: 10;
}

/* 图片悬停旋转效果 */
@keyframes rotateSlightly {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(3deg);
  }
}

.img-rotate-hover {
  transition: transform 0.3s ease;
  transform-origin: center center;
}

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

/* 图片悬停抖动效果 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.img-shake-hover:hover {
  animation: shake 0.5s ease-in-out;
}

/* 图片滚动动画 - 视差效果 */
.img-parallax {
  transition: transform 0.5s ease;
}

/* 图片悬停阴影效果 */
@keyframes shadowGrow {
  from {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  to {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}

.img-shadow-hover {
  transition: box-shadow 0.3s ease;
}

.img-shadow-hover:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 图片悬停边框效果 */
@keyframes borderGlow {
  from {
    border: 2px solid transparent;
  }
  to {
    border: 2px solid #3b82f6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
}

.img-border-hover {
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.img-border-hover:hover {
  animation: borderGlow 0.3s ease forwards;
}

/* 图片序列帧动画 - 用于图标等小图片 */
@keyframes spriteAnimation {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

.img-sprite {
  background-repeat: no-repeat;
  animation: spriteAnimation 1s steps(4) infinite;
}

/* 图片脉冲效果 - 使用 index.css 中的 @keyframes pulse */
.img-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* 图片波浪效果 */
@keyframes wave {
  0%, 100% {
    transform: skewX(0deg);
  }
  25% {
    transform: skewX(-2deg);
  }
  75% {
    transform: skewX(2deg);
  }
}

.img-wave {
  animation: wave 1.5s ease-in-out infinite;
}

/* 图片悬停翻转效果 */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

.img-flip-hover {
  perspective: 1000px;
}

.img-flip-hover:hover img {
  animation: flip 0.6s ease-in-out forwards;
  transform-style: preserve-3d;
}

/* 图片加载骨架屏 */
.img-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 应用到现有的图片类 */
.img-responsive.img.center-block {
  transition: all 0.3s ease;
  transform-origin: center center;
}

.img-responsive.img.center-block:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 为轮播图图片添加动画 - 已禁用 */
.swiper-slide img {
  animation: none !important;
  opacity: 1 !important;
}

/* 为服务卡片图片添加动画 */
.service-box img {
  transition: all 0.3s ease;
}

.service-box:hover img {
  transform: scale(1.05);
}

/* 为实践案例图片添加动画 */
.practice-box img {
  transition: all 0.3s ease;
  border-radius: var(--radius-card);
}

.practice-box:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 为品牌图片添加动画 */
.brand-box img {
  transition: all 0.3s ease;
}

.brand-box:hover img {
  transform: scale(1.1);
}

/* 为证书图片添加动画 */
.cert-item img {
  transition: all 0.3s ease;
  border-radius: var(--radius-card);
}

.cert-item:hover img {
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 为功能卡片图标添加动画 */
.banner-item::before {
  transition: all 0.3s ease;
}

.banner-item:hover::before {
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4);
}

/* 为图标添加旋转动画 */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon-rotate {
  animation: rotate360 2s linear infinite;
}

/* 为图片添加呼吸效果 */
@keyframes breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.img-breathe {
  animation: breathe 2s ease-in-out infinite;
}

/* 优化图片过渡效果的性能 */
img {
  will-change: transform, opacity, box-shadow;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 响应式调整动画效果 */
@media (max-width: 768px) {
  .img-zoom-hover:hover {
    transform: scale(1.03);
  }
  
  .img-responsive.img.center-block:hover {
    transform: scale(1.01);
  }
}