/**
 * 首页标题特效样式 - 独立按需加载
 * 只在显示首页标题时加载此文件
 */

/* ===================================================
 * 装饰效果 - 动态装饰元素
 * ==================================================*/

/**
 * 粒子轨道
 */
.effect-particles {
  position: relative;
  display: inline-block;
}

.effect-particles::before,
.effect-particles::after,
.effect-particles span::before,
.effect-particles span::after,
.effect-particles span span::before,
.effect-particles span span::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.effect-particles::before {
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, #fff, var(--color-primary));
  box-shadow: 0 0 10px #fff, 0 0 20px var(--color-primary), 0 0 30px var(--color-primary);
  top: -15px;
  right: 10%;
  animation: particle-orbit-1 6s linear infinite;
  opacity: 0.9;
}

.effect-particles::after {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #fff, var(--color-secondary));
  box-shadow: 0 0 8px #fff, 0 0 16px var(--color-secondary), 0 0 24px var(--color-secondary);
  bottom: -12px;
  left: 15%;
  animation: particle-orbit-2 5s linear infinite reverse;
  opacity: 0.8;
}

.effect-particles span::before {
  width: 5px;
  height: 5px;
  background: radial-gradient(circle, #fff, var(--color-accent));
  box-shadow: 0 0 6px #fff, 0 0 12px var(--color-accent), 0 0 18px var(--color-accent);
  top: -20px;
  left: 50%;
  animation: particle-orbit-3 4s linear infinite;
  opacity: 0.7;
}

.effect-particles span::after {
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #fff, var(--color-primary));
  box-shadow: 0 0 5px #fff, 0 0 10px var(--color-primary), 0 0 15px var(--color-primary);
  bottom: -8px;
  left: 60%;
  animation: particle-orbit-4 4.5s linear infinite reverse;
  opacity: 0.7;
}

.effect-particles span span::before {
  width: 3px;
  height: 3px;
  background: radial-gradient(circle, #fff, var(--color-secondary));
  box-shadow: 0 0 4px #fff, 0 0 8px var(--color-secondary), 0 0 12px var(--color-secondary);
  top: -6px;
  right: 20%;
  animation: particle-orbit-5 3s linear infinite;
  opacity: 0.6;
}

.effect-particles span span::after {
  width: 2px;
  height: 2px;
  background: radial-gradient(circle, #fff, var(--color-accent));
  box-shadow: 0 0 3px #fff, 0 0 6px var(--color-accent), 0 0 9px var(--color-accent);
  bottom: -5px;
  left: 15%;
  animation: particle-orbit-6 4s linear infinite reverse;
  opacity: 0.6;
}

@keyframes particle-orbit-1 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  25% { transform: translateX(100%) translateY(-20px) scale(1.1); }
  50% { transform: translateX(120%) translateY(5px) scale(1.2); }
  75% { transform: translateX(30%) translateY(15px) scale(1.1); }
}

@keyframes particle-orbit-2 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  25% { transform: translateX(-80%) translateY(15px) scale(1.1); }
  50% { transform: translateX(-100%) translateY(-5px) scale(1.2); }
  75% { transform: translateX(-30%) translateY(-15px) scale(1.1); }
}

@keyframes particle-orbit-3 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  33% { transform: translateX(50%) translateY(10px) scale(1.2); }
  66% { transform: translateX(-50%) translateY(15px) scale(1.1); }
}

@keyframes particle-orbit-4 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  33% { transform: translateX(40%) translateY(-10px) scale(1.2); }
  66% { transform: translateX(-30%) translateY(-5px) scale(1.1); }
}

@keyframes particle-orbit-5 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(-15px) translateY(10px) scale(1.3); }
}

@keyframes particle-orbit-6 {
  0%, 100% { transform: translateX(0) translateY(0) scale(1); }
  50% { transform: translateX(15px) translateY(-8px) scale(1.3); }
}

/**
 * 星光闪烁
 */
.effect-starlight {
  position: relative;
  display: inline-block;
}

.effect-starlight::before,
.effect-starlight::after,
.effect-starlight span::before,
.effect-starlight span::after,
.effect-starlight span span::before,
.effect-starlight span span::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 4px #fff, 0 0 8px var(--color-secondary), 0 0 12px var(--color-primary);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}

.effect-starlight::before { top: -12px; left: 5%; animation: star-twinkle 3s infinite; }
.effect-starlight::after { bottom: -10px; right: 5%; animation: star-twinkle 2.5s infinite 0.5s; }
.effect-starlight span::before { top: -18px; left: 65%; width: 3px; height: 3px; animation: star-twinkle 4s infinite 1s; }
.effect-starlight span::after { bottom: -15px; left: 35%; animation: star-twinkle 3.5s infinite 1.5s; }
.effect-starlight span span::before { top: -8px; right: 15%; width: 1px; height: 1px; animation: star-twinkle 3s infinite 0.7s; }
.effect-starlight span span::after { bottom: -6px; left: 15%; width: 1px; height: 1px; animation: star-twinkle 2s infinite 0.3s; }

@keyframes star-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ===================================================
 * 样式效果（8个）
 * ==================================================*/

/**
 * 1. 麦克笔感 
 * 推荐字体：Titan One
 */
.effect-marker-pop {
  color: transparent;
  -webkit-text-stroke: 2px #000;
  transform: rotate(-1deg);
  text-shadow:
    -3px -3px 0px rgba(255, 255, 255, 0.3),
    4px 4px 0px var(--title-color, var(--color-primary));
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
}

/**
 * 2. 斜切双色 - 固定颜色
 * 推荐字体：Monoton
 */
.effect-diagonal-split {
  color: transparent;
  background: linear-gradient(5deg, #fff 50%, var(--title-color, var(--color-primary)) 50%);
  -webkit-background-clip: text;
  background-clip: text;
}

/**
 * 3. 🎨 流光渐变 (gradient-flow)
 * 推荐字体：Monoton
 * 颜色：可自定义（使用 --title-color 变量控制渐变色）
 * 文字透明，渐变背景流动
 */
.gradient-flow {
  background: linear-gradient(
    90deg, 
    var(--title-color, var(--color-primary)) 0%,
    color-mix(in srgb, var(--title-color, var(--color-primary)) 70%, white 30%) 25%,
    var(--title-color, var(--color-primary)) 50%,
    color-mix(in srgb, var(--title-color, var(--color-primary)) 70%, white 30%) 75%,
    var(--title-color, var(--color-primary)) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-flow 4s linear infinite;
}

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

/**
 * 4. 🎨 描边发光 (stroke-glow)
 * 推荐字体：Titan One
 * 颜色：可自定义（使用 --title-color 变量控制描边和发光颜色）
 * 文字白色，描边和光晕使用特效色，带丝滑呼吸动画
 */
.stroke-glow {
  color: rgba(255, 255, 255, 0.95);
  -webkit-text-stroke: 2px var(--title-color, var(--color-primary));
  position: relative;
}

/* 使用伪元素叠加光晕层，通过opacity控制呼吸效果 */
.stroke-glow::before {
  content: '';
  position: absolute;
  inset: -30px;
  background: radial-gradient(
    ellipse 120% 100% at 50% 50%,
    var(--title-color, var(--color-primary)),
    transparent 70%
  );
  filter: blur(25px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
  animation: glow-breath 5s ease-in-out infinite;
}

@keyframes glow-breath {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/**
 * 5. 🎨 微光晕染 (text-glow)
 * 推荐字体：中文字体
 * 颜色：可自定义（使用 --title-color 变量控制光晕颜色）
 * 文字白色，多层柔和光晕，带丝滑呼吸动画
 */
.text-glow {
  color: rgba(255, 255, 255, 0.98);
  text-shadow:
    0 0 18px var(--title-color, var(--color-primary)),
    0 0 35px var(--title-color, var(--color-primary)),
    0 0 52px color-mix(in srgb, var(--title-color, var(--color-primary)) 50%, transparent),
    0 2px 4px rgba(0, 0, 0, 0.3);
  animation: text-glow-breath 5s ease-in-out infinite;
}

@keyframes text-glow-breath {
  0% {
    text-shadow:
      0 0 18px var(--title-color, var(--color-primary)),
      0 0 35px var(--title-color, var(--color-primary)),
      0 0 52px color-mix(in srgb, var(--title-color, var(--color-primary)) 50%, transparent),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
  25% {
    text-shadow:
      0 0 20px var(--title-color, var(--color-primary)),
      0 0 38px var(--title-color, var(--color-primary)),
      0 0 56px color-mix(in srgb, var(--title-color, var(--color-primary)) 50%, transparent),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    text-shadow:
      0 0 22px var(--title-color, var(--color-primary)),
      0 0 42px var(--title-color, var(--color-primary)),
      0 0 62px color-mix(in srgb, var(--title-color, var(--color-primary)) 50%, transparent),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
  75% {
    text-shadow:
      0 0 20px var(--title-color, var(--color-primary)),
      0 0 38px var(--title-color, var(--color-primary)),
      0 0 56px color-mix(in srgb, var(--title-color, var(--color-primary)) 50%, transparent),
      0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

/**
 * 6. 🎨 简约阴影 (simple-shadow)
 * 推荐字体：通用
 * 颜色：可自定义（使用 --title-color 变量控制文字和光晕颜色）
 * 文字使用特效色，带阴影和光晕
 */
.simple-shadow {
  color: var(--title-color, var(--color-primary));
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 0 20px color-mix(in srgb, var(--title-color, var(--color-primary)) 30%, transparent);
}

/* ===================================================
 * 性能优化
 * ==================================================*/

@media (prefers-reduced-motion: reduce) {
  .gradient-flow,
  .stroke-glow,
  .text-glow,
  .effect-particles::before,
  .effect-particles::after,
  .effect-particles span::before,
  .effect-particles span::after,
  .effect-particles span span::before,
  .effect-particles span span::after {
    animation: none !important;
  }
}