/* Fuzzy Text Effect CSS
 * 基于fuzzy.vue组件的样式文件
 * 提供基础样式和CSS动画效果
 */

/* 基础容器样式 */
.fuzzy-text-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

/* Canvas基础样式 */
.fuzzy-text-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* 悬停状态 */
.fuzzy-text-canvas:hover {
  opacity: 0.9;
}

/* 响应式字体大小 */
.fuzzy-text-responsive {
  font-size: clamp(2rem, 8vw, 8rem);
  font-weight: 900;
  font-family: inherit;
}

/* 模糊效果的CSS实现（作为备选方案） */
.fuzzy-text-css {
  font-size: clamp(2rem, 8vw, 8rem);
  font-weight: 900;
  color: #fff;
  text-shadow: none;
  filter: none;
  animation: none;
  user-select: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 鼠标悬停时激活模糊效果 */
.fuzzy-text-css:hover {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
  animation: fuzzyGlow 2s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

/* 模糊发光动画 */
@keyframes fuzzyGlow {
  0% {
    text-shadow: 
      0 0 5px currentColor,
      0 0 10px currentColor,
      0 0 15px currentColor,
      0 0 20px currentColor;
    filter: blur(0px);
  }
  50% {
    text-shadow: 
      0 0 8px currentColor,
      0 0 16px currentColor,
      0 0 24px currentColor,
      0 0 32px currentColor;
    filter: blur(0.5px);
  }
  100% {
    text-shadow: 
      0 0 12px currentColor,
      0 0 20px currentColor,
      0 0 30px currentColor,
      0 0 40px currentColor;
    filter: blur(1px);
  }
}

/* 悬停时增强效果（仅在已有模糊效果基础上） */
.fuzzy-text-css.fuzzy-always-on:hover {
  animation-duration: 0.5s;
  text-shadow: 
    0 0 15px currentColor,
    0 0 25px currentColor,
    0 0 35px currentColor,
    0 0 45px currentColor;
}

/* 始终开启模糊效果的类 */
.fuzzy-text-css.fuzzy-always-on {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor,
    0 0 20px currentColor;
  animation: fuzzyGlow 2s ease-in-out infinite alternate;
  filter: blur(0.5px);
}

/* 抖动效果 - 默认仅在悬停时生效 */
.fuzzy-text-css.fuzzy-text-shake:hover {
  animation: fuzzyShake 0.1s infinite;
}

/* 始终开启的抖动效果 */
.fuzzy-text-css.fuzzy-text-shake.fuzzy-always-on {
  animation: fuzzyShake 0.1s infinite;
}

@keyframes fuzzyShake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-1px) translateY(1px); }
  50% { transform: translateX(1px) translateY(-1px); }
  75% { transform: translateX(-1px) translateY(-1px); }
  100% { transform: translateX(1px) translateY(1px); }
}

/* 颜色变体 */
.fuzzy-text-blue {
  color: #00bfff;
}

.fuzzy-text-green {
  color: #00ff7f;
}

.fuzzy-text-red {
  color: #ff4757;
}

.fuzzy-text-purple {
  color: #9c88ff;
}

.fuzzy-text-orange {
  color: #ffa726;
}

/* 强度变体 - 默认仅在悬停时生效 */
.fuzzy-text-css.fuzzy-text-low-intensity:hover {
  text-shadow: 
    0 0 2px currentColor,
    0 0 4px currentColor;
  filter: blur(0.2px);
}

.fuzzy-text-css.fuzzy-text-medium-intensity:hover {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor;
  filter: blur(0.5px);
}

.fuzzy-text-css.fuzzy-text-high-intensity:hover {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor,
    0 0 40px currentColor;
  filter: blur(1px);
}

/* 始终开启的强度变体 */
.fuzzy-text-css.fuzzy-text-low-intensity.fuzzy-always-on {
  text-shadow: 
    0 0 2px currentColor,
    0 0 4px currentColor;
  filter: blur(0.2px);
}

.fuzzy-text-css.fuzzy-text-medium-intensity.fuzzy-always-on {
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 15px currentColor;
  filter: blur(0.5px);
}

.fuzzy-text-css.fuzzy-text-high-intensity.fuzzy-always-on {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor,
    0 0 40px currentColor;
  filter: blur(1px);
}

/* 禁用状态 */
.fuzzy-text-disabled {
  opacity: 0.5;
  pointer-events: none;
  animation: none;
  text-shadow: none;
  filter: none;
}

/* 加载状态 - 默认仅在悬停时生效 */
.fuzzy-text-css.fuzzy-text-loading:hover {
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* 始终开启的加载状态 */
.fuzzy-text-css.fuzzy-text-loading.fuzzy-always-on {
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 脉冲效果 - 默认仅在悬停时生效 */
.fuzzy-text-css.fuzzy-text-pulse:hover {
  animation: fuzzyPulse 1.5s ease-in-out infinite;
}

/* 始终开启的脉冲效果 */
.fuzzy-text-css.fuzzy-text-pulse.fuzzy-always-on {
  animation: fuzzyPulse 1.5s ease-in-out infinite;
}

@keyframes fuzzyPulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* 闪烁效果 - 默认仅在悬停时生效 */
.fuzzy-text-css.fuzzy-text-blink:hover {
  animation: fuzzyBlink 1s step-end infinite;
}

/* 始终开启的闪烁效果 */
.fuzzy-text-css.fuzzy-text-blink.fuzzy-always-on {
  animation: fuzzyBlink 1s step-end infinite;
}

@keyframes fuzzyBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* 移动端优化 */
@media (max-width: 768px) {
  .fuzzy-text-css {
    font-size: clamp(1.5rem, 6vw, 4rem);
  }
  
  .fuzzy-text-canvas {
    touch-action: manipulation;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .fuzzy-text-css {
    text-shadow: none;
    filter: none;
    animation: none;
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  .fuzzy-text-css {
    animation: none;
  }
  
  .fuzzy-text-shake {
    animation: none;
  }
}

/* 深色主题 */
@media (prefers-color-scheme: dark) {
  .fuzzy-text-container {
    background-color: transparent;
  }
}

/* 浅色主题 */
@media (prefers-color-scheme: light) {
  .fuzzy-text-css {
    color: #333;
  }
}