/* 5. 动态光影文字效果 */
.font-effect {
	font-size: 60px;
	font-weight: bold;
	text-align: center;
}

/*文字加外阴影*/

.shining-text {
  width: 100%;
  display: inline-block;
  color: #bef6ff;
  font-size: 40px;
  font-weight: bold;
  position: relative;		  	
/*  text-shadow: 0px 0px 2px rgba(170, 54, 16, 0.8); */ */
  /* 为每个字符单独设置样式 */
  letter-spacing: 2px;
}

.shining-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #ffff0a 20%, transparent 80%);
  background-size: 20% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  animation: shine 6s linear infinite;
}

@keyframes shine {
  0% {
	background-position: -20% 0;
  }
  100% {
	background-position: 120% 0;
  }
}





/* 1. 渐变文字效果 */
.gradient-text {
	/* 定义渐变颜色 */
	background-image: linear-gradient(45deg, #ff0080, #ff8c00, #40e0d0);
	/* 将渐变应用到文字上（核心属性） */
	-webkit-background-clip: text;
	background-clip: text;
	/* 隐藏原文字颜色，只显示渐变 */
	color: transparent;
}

/* 2. 3D立体文字效果 */
.3d-text {
	color: #fff;
	/* 多层text-shadow叠加，营造立体层次感 */
	text-shadow: 
		1px 1px #000,
		2px 2px #000,
		3px 3px #000,
		4px 4px #000,
		5px 5px #000,
		6px 6px 10px rgba(0, 0, 0, 0.8);
	/* 轻微倾斜增强立体视觉 */
	transform: skew(-5deg);
}

/* 3. 霓虹闪烁文字效果 */
.neon-text {
	color: #ffe625 !important;
	/* 霓虹光晕效果 */
	text-shadow: 
		0 0 5px #0ff,
		0 0 10px #0ff,
		0 0 20px #0ff,
		0 0 40px #0ff,
		0 0 80px #0ff;
	/* 闪烁动画 */
	animation: neon-blink 2s infinite alternate;
}
@keyframes neon-blink {
	from { opacity: 1; }
	to { opacity: 0.5; text-shadow: 0 2px 2px #118cff, 0 4px 5px #3ddfff, 0 6px 10px #7cf5ff; }
}

/* 4. 描边镂空文字效果 */
.stroke-text {
	color: transparent;
	/* 文字描边（核心属性，webkit内核兼容） */
	-webkit-text-stroke: 2px #ff2d95;
	text-stroke: 2px #ff2d95;
	/* 轻微阴影增强层次感 */
	text-shadow: 0 0 5px rgba(255, 45, 149, 0.5);
}

/* 5. 动态光影文字效果 */
.moving-light-text {
	background-image: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* 光影移动动画 */
	animation: light-move 3s linear infinite;
}
@keyframes light-move {
	0% { background-position: 0 0; }
	100% { background-position: 200% 0; }
}

/* 6. 金属质感文字效果 */
.metal-text {
	background-image: linear-gradient(135deg, #c0c0c0, #ffffff, #c0c0c0);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* 多层阴影模拟金属反光和立体感 */
	text-shadow: 
		0 1px 0 #888,
		0 2px 0 #999,
		0 3px 0 #aaa,
		0 4px 0 #bbb,
		0 5px 5px rgba(0, 0, 0, 0.3);
}