/* 自定义科技感文字效果 - 针对 hexo 开发服务器 */

/* 文字容器基本定位 - 将通过JavaScript精确定位 */
.ring-pink-skin .circle-hover-text {
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important; /* 增加三倍宽度 */
  text-align: center !important;
  z-index: 10 !important;
  /* animation: randomMovement 15s infinite alternate ease-in-out !important; */
  /* 确保文字容器可见，即使在未悬停时 */
  position: absolute !important;
  /* 确保文字始终在最上层 */
  pointer-events: none !important;
}

/* 覆盖原有的文字样式 - 默认隐藏 */
.ring-pink-skin .hover-text-chinese,
.ring-pink-skin .hover-text-english {
  opacity: 1 !important; /* 改为始终可见 */
  display: block !important;
  visibility: visible !important;
  font-size: inherit !important;
  transition: all 0.6s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  transform: translateY(0) !important; /* 初始时不需要向上偏移 */
}

/* 中文文字样式 - 纯文字效果，无背景，单行显示 */
.ring-pink-skin .hover-text-chinese {
  font-weight: 700 !important;
  color: #ffffff !important; /* 纯白色，确保对比度 */
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.9),
    0 0 30px rgba(255, 255, 255, 0.7),
    0 0 45px rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 2px !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  width: 100% !important;
  /* white-space: nowrap !important; 防止换行 */
}

/* 英文文字样式 - 纯文字效果，无背景，分两行显示 */
.ring-pink-skin .hover-text-english {
  font-weight: 400 !important;
  color: #f0f8ff !important; /* 浅蓝色白色，确保对比度 */
  text-shadow: 
    0 0 12px rgba(240, 248, 255, 0.9),
    0 0 24px rgba(240, 248, 255, 0.7),
    0 0 36px rgba(240, 248, 255, 0.5) !important;
  letter-spacing: 1.5px !important;
  font-size: clamp(1rem, 2.2vw, 1.5rem) !important;
  line-height: 1.6 !important;
  text-align: center !important;
  /* width: 100% !important;
  white-space: normal !important; 允许换行 */
}

/* 悬停时增强文字效果 */
.ring-pink-skin .ring:hover .hover-text-chinese,
.ring-pink-skin .ring:hover .hover-text-english {
  opacity: 1 !important;
  transform: translateY(0) !important;
  animation: text-appear 0.8s ease-out !important;
}

.ring-pink-skin .ring:hover .hover-text-chinese {
  text-shadow: 
    0 0 25px rgba(255, 255, 255, 1),
    0 0 50px rgba(255, 255, 255, 0.8),
    0 0 75px rgba(255, 255, 255, 0.6),
    0 0 100px rgba(255, 105, 180, 0.6) !important;
}

.ring-pink-skin .ring:hover .hover-text-english {
  text-shadow: 
    0 0 20px rgba(240, 248, 255, 1),
    0 0 40px rgba(240, 248, 255, 0.8),
    0 0 60px rgba(240, 248, 255, 0.6),
    0 0 80px rgba(255, 20, 147, 0.5) !important;
}

/* 文字随机移动动画 */
@keyframes randomMovement {
  0% {
    transform: translate(-50%, -50%) translate(-15%, -15%) rotate(-3deg);
  }
  25% {
    transform: translate(-50%, -50%) translate(20%, -10%) rotate(2deg);
  }
  50% {
    transform: translate(-50%, -50%) translate(-10%, 20%) rotate(-2deg);
  }
  75% {
    transform: translate(-50%, -50%) translate(25%, 15%) rotate(3deg);
  }
  100% {
    transform: translate(-50%, -50%) translate(-15%, -15%) rotate(-3deg);
  }
}

/* 动画定义 */
@keyframes text-appear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(3px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(10px) scale(0.98);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 能源领域图片样式 - 平铺效果和悬停渐隐 */
.energy-field-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  transition: opacity 0.5s ease-in-out !important;
}

/* 悬停时图片渐隐，文字显现 */
.square.small-square:hover .energy-field-image {
  opacity: 0 !important;
}

/* 所有模块文字居中显示 - 服务模块和产品模块 */
.square.small-square .description,
.projects .square.small-square .description {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  padding: 2rem !important;
}

/* 产品模块具体文字居中 - 基础样式 */
.projects .product-link .square.small-square .description {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 2rem !important;
  box-sizing: border-box !important;
  position: relative !important;
}

.projects .product-link .square.small-square .description h4,
.projects .product-link .square.small-square .description p {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  position: relative !important;
  z-index: 11 !important;
}

/* 服务模块和产品模块的悬停状态 - 强力样式覆盖 */
.square.small-square:hover .description,
.projects .square.small-square:hover .description,
.projects .product-link .square.small-square:hover .description {
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  width: 100% !important;
  padding: 2rem !important;
  box-sizing: border-box !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin: 0 !important;
  vertical-align: top !important;
}

/* 悬停时文字内容的特殊处理 */
.square.small-square:hover .description h4,
.square.small-square:hover .description p,
.projects .square.small-square:hover .description h4,
.projects .square.small-square:hover .description p,
.projects .product-link .square.small-square:hover .description h4,
.projects .product-link .square.small-square:hover .description p {
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  position: relative !important;
  z-index: 11 !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  display: block !important;
}