/* ============================================
   骏辉陶瓷 - 加载动画与全局交互动效
   品牌: 高端、质感、现代、优雅
   ============================================ */

/* ============================================
   一、Hero 首屏进场动画（纯 CSS，随解析即播放，不阻塞渲染）
   ============================================ */
@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#home {
  animation: hero-enter 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

/* ============================================
   三、全局鼠标跟随效果
   ============================================ */

/* 自定义光标 */
.custom-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #f7270b;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease;
  opacity: 0;
}

.custom-cursor.visible {
  opacity: 1;
}

.custom-cursor.hover {
  width: 40px;
  height: 40px;
  background: rgba(247, 39, 11, 0.2);
  border: 2px solid #f7270b;
}

/* 鼠标光晕 */
.cursor-glow {
  position: fixed;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(247, 39, 11, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  opacity: 0;
}

.cursor-glow.visible {
  opacity: 1;
}

/* 仅在大屏幕显示自定义光标 */
@media (max-width: 1024px) {
  .custom-cursor,
  .cursor-glow {
    display: none !important;
  }
}

/* ============================================
   四、涟漪点击效果
   ============================================ */

.ripple {
  position: fixed;
  border-radius: 50%;
  background: rgba(247, 39, 11, 0.4);
  transform: scale(0);
  animation: ripple-effect 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 9997;
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 按钮涟漪效果 */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* ============================================
   五、导航栏增强动画
   ============================================ */

/* Logo悬浮效果 */
#site-header .logo-wrapper {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#site-header .logo-wrapper:hover {
  transform: scale(1.05);
}

/* 导航项高级动画 */
.nav-link {
  position: relative;
  overflow: hidden;
}

/* 导航项背景滑入效果 */
.nav-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: linear-gradient(180deg, transparent, rgba(247, 39, 11, 0.05));
  transition: height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: -1;
}

.nav-link:hover::before {
  height: 100%;
}

/* 下拉菜单增强 */
.dropdown-menu {
  transform: translateY(10px) scale(0.95);
  opacity: 0;
  visibility: hidden;
}

.group:hover .dropdown-menu,
.group:focus-within .dropdown-menu {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
}

/* 下拉菜单项交错动画 */
.dropdown-item {
  opacity: 0;
  transform: translateX(-10px);
}

.group:hover .dropdown-item,
.group:focus-within .dropdown-item {
  opacity: 1;
  transform: translateX(0);
}

.group:hover .dropdown-item:nth-child(1),
.group:focus-within .dropdown-item:nth-child(1) {
  transition-delay: 0.05s;
}

.group:hover .dropdown-item:nth-child(2),
.group:focus-within .dropdown-item:nth-child(2) {
  transition-delay: 0.1s;
}

.group:hover .dropdown-item:nth-child(3),
.group:focus-within .dropdown-item:nth-child(3) {
  transition-delay: 0.15s;
}

.group:hover .dropdown-item:nth-child(4),
.group:focus-within .dropdown-item:nth-child(4) {
  transition-delay: 0.2s;
}

/* ============================================
   六、按钮增强动画
   ============================================ */

/* 主按钮 - 磁性吸附效果 */
.btn-primary {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s,
              box-shadow 0.25s;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 14px 30px -8px rgba(247, 39, 11, 0.5);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* 幽灵按钮 - 边框流光 */
.btn-ghost {
  position: relative;
  overflow: hidden;
}

.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.btn-ghost:hover::before {
  left: 100%;
}

/* ============================================
   七、卡片增强动画
   ============================================ */

/* 解决方案卡片 - 光泽滑过 */
.solution-card {
  position: relative;
  overflow: hidden;
}

.solution-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transform: skewX(-25deg);
  transition: left 0.6s ease;
}

.solution-card:hover::before {
  left: 150%;
}

/* ============================================
   八、图片增强动画
   ============================================ */

/* 图片容器 - 视差效果 */
.parallax-image-container {
  overflow: hidden;
  position: relative;
}

.parallax-image {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 图片悬浮放大 */
.img-zoom-hover {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

/* 图片阴影增强 */
.img-shadow-hover {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease;
}

.img-shadow-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ============================================
   九、滚动触发动画增强
   ============================================ */

/* 淡入缩放 */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 从左滑入 */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
}

.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 从右滑入 */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
}

.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 弹性缩放 */
.reveal-pop {
  opacity: 0;
  transform: scale(0.5);
}

.reveal-pop.revealed {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================
   十、数字滚动动画增强
   ============================================ */

.stat-number {
  font-variant-numeric: tabular-nums;
}

/* 数字背景光泽 */
.contact-stat-item {
  position: relative;
  overflow: hidden;
}

.contact-stat-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(247, 39, 11, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.contact-stat-item:hover::before {
  opacity: 1;
}

/* ============================================
   十一、悬浮按钮增强
   ============================================ */

.floating-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.25s,
              box-shadow 0.25s;
}

.floating-btn:hover {
  transform: scale(1.15) rotate(-8deg);
}

.floating-btn:active {
  transform: scale(1.05) rotate(-5deg);
}

/* 返回顶部按钮呼吸效果 */
#back-to-top.visible {
  animation: btn-pulse 2s ease-in-out infinite;
}

@keyframes btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 39, 11, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(247, 39, 11, 0); }
}

/* ============================================
   十二、加载状态优化
   ============================================ */

/* 骨架屏增强 */
.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    #f1f5f9 25%,
    #f8fafc 50%,
    #f1f5f9 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

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

/* 内容加载淡入 */
.content-fade-in {
  animation: content-fade-in 0.5s ease forwards;
}

@keyframes content-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   十三、文字动画
   ============================================ */

/* 标题字符逐一动画 */
.text-animate-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) rotateX(-90deg);
  animation: char-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes char-appear {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0);
  }
}

/* 下划线绘制动画 */
.text-draw-line {
  position: relative;
}

.text-draw-line::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #f7270b, #f94d35);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.text-draw-line:hover::after {
  width: 100%;
}

/* ============================================
   十四、特殊效果
   ============================================ */

/* 瓷砖纹理遮罩 - 鼠标移动时显示 */
.tile-mask {
  position: relative;
  overflow: hidden;
}

.tile-mask::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='0.5'/%3E%3C/svg%3E");
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.tile-mask:hover::after {
  opacity: 1;
}

/* 发光边框 */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, #f7270b, #f94d35, #f7270b);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.3s ease;
}

.glow-border:hover::before {
  opacity: 0.6;
}

/* ============================================
   十五、减弱动画偏好支持
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .custom-cursor,
  .cursor-glow,
  .ripple {
    display: none !important;
  }
}

/* ============================================
   十六、移动端适配
   ============================================ */

@media (max-width: 768px) {
  /* 移动端禁用复杂动画 */
  .custom-cursor,
  .cursor-glow,
  .ripple {
    display: none !important;
  }

  /* 简化卡片动画 */
  .product-card:hover,
  .solution-card:hover,
  .project-card:hover {
    transform: translateY(-4px);
  }
}